Skip to content

Commit f703cb4

Browse files
SuaYooSuaYoo
committed
move details to popover
1 parent 2f41d05 commit f703cb4

File tree

4 files changed

+114
-100
lines changed

4 files changed

+114
-100
lines changed

‎frontend/src/features/browser-profiles/select-browser-profile.ts‎

Lines changed: 72 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
1212
import { when } from "lit/directives/when.js";
1313
import queryString from "query-string";
1414

15+
import { originsWithRemainder } from "./templates/origins-with-remainder";
16+
1517
import { BtrixElement } from "@/classes/BtrixElement";
1618
import { none } from "@/layouts/empty";
1719
import { pageHeading } from "@/layouts/page";
@@ -138,45 +140,31 @@ export class SelectBrowserProfile extends BtrixElement {
138140
: html` <sl-spinner slot="prefix"></sl-spinner> `}
139141
${browserProfiles?.items.map(
140142
(profile, i) => html`
141-
<sl-option
142-
value=${profile.id}
143-
class=${clsx(
144-
tw`part-[base]:flex-wrap`,
145-
tw`part-[prefix]:order-2`,
146-
tw`part-[label]:order-1 part-[label]:basis-1/2 part-[label]:overflow-hidden`,
147-
tw`part-[suffix]:order-3 part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
148-
i && tw`border-t`,
149-
)}
143+
<btrix-popover
144+
class="part-[body]:w-64"
145+
placement="left"
146+
trigger="hover"
147+
hoist
150148
>
151-
<span class="font-medium">${profile.name}</span>
152-
<span
153-
class="whitespace-nowrap text-xs text-neutral-500"
154-
slot="prefix"
155-
>
156-
${this.localize.relativeDate(
157-
profile.modified || profile.created,
158-
{ capitalize: true },
149+
<div slot="content">${this.renderOverview(profile)}</div>
150+
151+
<sl-option
152+
value=${profile.id}
153+
class=${clsx(
154+
tw`part-[base]:flex-wrap`,
155+
tw`part-[label]:basis-1/2 part-[label]:overflow-hidden`,
156+
tw`part-[suffix]:basis-full part-[suffix]:overflow-hidden`,
157+
i && tw`border-t`,
159158
)}
160-
</span>
161-
<div
162-
slot="suffix"
163-
class="flex w-full items-center justify-between gap-1.5 overflow-hidden pl-2.5 pt-0.5"
164159
>
165-
<btrix-code
166-
class="w-0 flex-1 text-xs"
167-
language="url"
168-
value=${profile.origins[0]}
169-
noWrap
170-
truncate
171-
></btrix-code>
172-
${when(
173-
profile.proxyId,
174-
(proxyId) => html`
175-
<btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
176-
`,
177-
)}
178-
</div>
179-
</sl-option>
160+
<span class="font-medium">${profile.name}</span>
161+
<div slot="suffix" class="w-full pl-2.5 pt-0.5">
162+
${originsWithRemainder(profile.origins, {
163+
disablePopover: true,
164+
})}
165+
</div>
166+
</sl-option>
167+
</btrix-popover>
180168
`,
181169
)}
182170
${browserProfiles && !browserProfiles.total
@@ -222,57 +210,8 @@ export class SelectBrowserProfile extends BtrixElement {
222210

223211
private renderSelectedProfileInfo() {
224212
const profileContent = (profile: Profile) => {
225-
const modifiedByAnyDate = [
226-
profile.modifiedCrawlDate,
227-
profile.modified,
228-
profile.created,
229-
].reduce((a, b) => (b && a && b > a ? b : a), profile.created);
230-
231213
return html`${pageHeading({ content: msg("Overview"), level: 3 })}
232-
<section class="mt-5">
233-
<btrix-desc-list>
234-
<btrix-desc-list-item label=${msg("Description")}>
235-
${profile.description
236-
? html`
237-
<!-- display: inline -->
238-
<div
239-
class="text-balanced whitespace-pre-line font-sans leading-relaxed text-neutral-600"
240-
>${profile.description}</div
241-
>
242-
`
243-
: none}
244-
</btrix-desc-list-item>
245-
<btrix-desc-list-item label=${msg("Tags")}>
246-
${profile.tags.length
247-
? html`<div class="mt-1 flex flex-wrap gap-1.5">
248-
${profile.tags.map(
249-
(tag) => html`<btrix-tag>${tag}</btrix-tag>`,
250-
)}
251-
</div>`
252-
: none}
253-
</btrix-desc-list-item>
254-
<btrix-desc-list-item label=${msg("Crawler Channel")}>
255-
<btrix-crawler-channel-badge
256-
channelId=${profile.crawlerChannel ||
257-
CrawlerChannelImage.Default}
258-
></btrix-crawler-channel-badge>
259-
</btrix-desc-list-item>
260-
${when(
261-
profile.proxyId,
262-
(proxyId) => html`
263-
<btrix-desc-list-item label=${msg("Proxy")}>
264-
<btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
265-
</btrix-desc-list-item>
266-
`,
267-
)}
268-
<btrix-desc-list-item label=${msg("Last Modified")}>
269-
${this.localize.relativeDate(
270-
modifiedByAnyDate || profile.created,
271-
{ capitalize: true },
272-
)}
273-
</btrix-desc-list-item>
274-
</btrix-desc-list>
275-
</section>
214+
<section class="mt-5">${this.renderOverview(profile)}</section>
276215
277216
<sl-divider class="my-5"></sl-divider>
278217
@@ -327,6 +266,53 @@ export class SelectBrowserProfile extends BtrixElement {
327266
</sl-drawer>`;
328267
}
329268

269+
private readonly renderOverview = (profile: Profile) => {
270+
const modifiedByAnyDate = [
271+
profile.modifiedCrawlDate,
272+
profile.modified,
273+
profile.created,
274+
].reduce((a, b) => (b && a && b > a ? b : a), profile.created);
275+
276+
return html`<btrix-desc-list>
277+
<btrix-desc-list-item label=${msg("Description")}>
278+
${profile.description
279+
? html`
280+
<!-- display: inline -->
281+
<div
282+
class="text-balanced line-clamp-2 whitespace-pre-line font-sans leading-relaxed text-neutral-600"
283+
>${profile.description}</div
284+
>
285+
`
286+
: none}
287+
</btrix-desc-list-item>
288+
<btrix-desc-list-item label=${msg("Tags")}>
289+
${profile.tags.length
290+
? html`<div class="mt-1 flex flex-wrap gap-1.5">
291+
${profile.tags.map((tag) => html`<btrix-tag>${tag}</btrix-tag>`)}
292+
</div>`
293+
: none}
294+
</btrix-desc-list-item>
295+
<btrix-desc-list-item label=${msg("Crawler Channel")}>
296+
<btrix-crawler-channel-badge
297+
channelId=${profile.crawlerChannel || CrawlerChannelImage.Default}
298+
></btrix-crawler-channel-badge>
299+
</btrix-desc-list-item>
300+
${when(
301+
profile.proxyId,
302+
(proxyId) => html`
303+
<btrix-desc-list-item label=${msg("Proxy")}>
304+
<btrix-proxy-badge proxyId=${proxyId}></btrix-proxy-badge>
305+
</btrix-desc-list-item>
306+
`,
307+
)}
308+
<btrix-desc-list-item label=${msg("Last Modified")}>
309+
${this.localize.relativeDate(modifiedByAnyDate || profile.created, {
310+
capitalize: true,
311+
})}
312+
</btrix-desc-list-item>
313+
</btrix-desc-list>`;
314+
};
315+
330316
private renderNoProfiles() {
331317
return html`
332318
<div class="mx-2 text-sm text-neutral-500">

‎frontend/src/features/browser-profiles/templates/origins-with-remainder.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { html, nothing } from "lit";
2+
3+
import type { Profile } from "@/types/crawler";
4+
import localize from "@/utils/localize";
5+
6+
/**
7+
* Displays primary origin with remainder in a popover badge
8+
*/
9+
export function originsWithRemainder(
10+
origins: Profile["origins"],
11+
{ disablePopover } = { disablePopover: false },
12+
) {
13+
const startingUrl = origins[0];
14+
const otherOrigins = origins.slice(1);
15+
16+
return html`<div class="flex w-full items-center gap-1.5 overflow-hidden">
17+
<btrix-code
18+
class="w-0 min-w-[10ch] max-w-min flex-1"
19+
language="url"
20+
value=${startingUrl}
21+
noWrap
22+
truncate
23+
></btrix-code>
24+
${otherOrigins.length
25+
? html`
26+
<btrix-popover placement="right" hoist ?disabled=${disablePopover}>
27+
<btrix-badge variant=${disablePopover ? "neutral" : "blue"}
28+
>+${localize.number(otherOrigins.length)}</btrix-badge
29+
>
30+
<ul slot="content">
31+
${otherOrigins.map((url) => html`<li>${url}</li>`)}
32+
</ul>
33+
</btrix-popover>
34+
`
35+
: nothing}
36+
</div>`;
37+
}

‎frontend/src/pages/org/browser-profiles-list.ts‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { parsePage, type PageChangeEvent } from "@/components/ui/pagination";
1818
import type { BtrixChangeTagFilterEvent } from "@/components/ui/tag-filter/types";
1919
import { ClipboardController } from "@/controllers/clipboard";
2020
import { SearchParamsValue } from "@/controllers/searchParamsValue";
21+
import { originsWithRemainder } from "@/features/browser-profiles/templates/origins-with-remainder";
2122
import { emptyMessage } from "@/layouts/emptyMessage";
2223
import { page } from "@/layouts/page";
2324
import { OrgTab } from "@/routes";
@@ -72,7 +73,7 @@ const columnsCss = [
7273
"min-content", // Status
7374
"[clickable-start] minmax(min-content, 1fr)", // Name
7475
"minmax(max-content, 1fr)", // Tags
75-
"minmax(max-content, 1fr)", // Origins
76+
"40ch", // Origins
7677
"minmax(min-content, 20ch)", // Last modified
7778
"[clickable-end] min-content", // Actions
7879
].join(" ");
@@ -521,8 +522,6 @@ export class BrowserProfilesList extends BtrixElement {
521522
(a, b) => (b && a && b > a ? b : a),
522523
data.created,
523524
) || data.created;
524-
const startingUrl = data.origins[0];
525-
const otherOrigins = data.origins.slice(1);
526525
const firstTags = data.tags.slice(0, MAX_TAGS);
527526
const otherTags = data.tags.slice(MAX_TAGS);
528527

@@ -565,17 +564,7 @@ export class BrowserProfilesList extends BtrixElement {
565564
: nothing}
566565
</btrix-table-cell>
567566
<btrix-table-cell>
568-
<btrix-code language="url" value=${startingUrl} noWrap></btrix-code>
569-
${otherOrigins.length
570-
? html`<btrix-popover placement="right" hoist>
571-
<btrix-badge
572-
>+${this.localize.number(otherOrigins.length)}</btrix-badge
573-
>
574-
<ul slot="content">
575-
${otherOrigins.map((url) => html`<li>${url}</li>`)}
576-
</ul>
577-
</btrix-popover>`
578-
: nothing}
567+
${originsWithRemainder(data.origins)}
579568
</btrix-table-cell>
580569
<btrix-table-cell>
581570
${this.localize.relativeDate(modifiedByAnyDate, { capitalize: true })}

‎frontend/src/theme.stylesheet.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,12 +411,14 @@
411411
.font-monostyle {
412412
@apply font-mono;
413413
font-variation-settings: var(--font-monostyle-variation);
414+
font-size: 95%;
414415
}
415416

416417
/* Actually monospaced font */
417418
.font-monospace {
418419
@apply font-mono;
419420
font-variation-settings: var(--font-monospace-variation);
421+
font-size: 95%;
420422
}
421423

422424
.truncate {

0 commit comments

Comments
 (0)