Skip to content

Commit 57992c9

Browse files
emma-sgemma-sg
committed
update spacing, localization, layout, and overflow scrolls
1 parent 3e3b945 commit 57992c9

File tree

3 files changed

+67
-56
lines changed

3 files changed

+67
-56
lines changed

‎frontend/src/features/archived-items/item-dependents.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,26 +62,26 @@ export class ItemDependents extends BtrixElement {
6262
private readonly renderRow = (item: ArchivedItem) => {
6363
const crawled = isCrawl(item);
6464

65-
return html`<btrix-table-row>
65+
return html`<btrix-table-row class="h-10">
6666
<btrix-table-cell
6767
>${collectionStatusIcon({
6868
item,
6969
collectionId: this.collectionId,
7070
})}</btrix-table-cell
7171
>
7272
<btrix-table-cell class="pl-0">${renderName(item)}</btrix-table-cell>
73-
<btrix-table-cell>
73+
<btrix-table-cell class="tabular-nums">
7474
${this.localize.number(item.requiredByCrawls.length, {
7575
notation: "compact",
7676
})}
7777
</btrix-table-cell>
78-
<btrix-table-cell>
78+
<btrix-table-cell class="tabular-nums">
7979
${this.localize.date(item.finished || item.started, {
8080
dateStyle: "short",
8181
timeStyle: "short",
8282
})}
8383
</btrix-table-cell>
84-
<btrix-table-cell>
84+
<btrix-table-cell class="tabular-nums">
8585
${this.localize.bytes(item.fileSize || 0, { unitDisplay: "short" })}
8686
</btrix-table-cell>
8787
<btrix-table-cell>

‎frontend/src/features/collections/dedupe-workflows/dedupe-workflows.ts‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { localized, msg } from "@lit/localize";
1+
import { localized, msg, str } from "@lit/localize";
22
import { Task } from "@lit/task";
33
import clsx from "clsx";
44
import { html, nothing, unsafeCSS } from "lit";
@@ -18,7 +18,7 @@ import type { APIPaginatedList } from "@/types/api";
1818
import type { Crawl, ListWorkflow } from "@/types/crawler";
1919
import { SortDirection } from "@/types/utils";
2020
import { finishedCrawlStates, renderName } from "@/utils/crawler";
21-
import { pluralOf } from "@/utils/pluralize";
21+
import { pluralize, pluralOf } from "@/utils/pluralize";
2222
import { tw } from "@/utils/tailwind";
2323

2424
const styles = unsafeCSS(stylesheet);
@@ -66,7 +66,7 @@ export class DedupeWorkflows extends BtrixElement {
6666
});
6767

6868
render() {
69-
return html`<btrix-overflow-scroll>
69+
return html`<btrix-overflow-scroll class="-mx-5 part-[content]:px-5">
7070
${this.showHeader
7171
? html`<div
7272
class=${clsx(
@@ -83,7 +83,7 @@ export class DedupeWorkflows extends BtrixElement {
8383
</div>`
8484
: nothing}
8585
86-
<div class="divide-y rounded border">
86+
<div class="min-w-max divide-y rounded border">
8787
${when(this.workflows, (workflows) =>
8888
repeat(workflows, ({ id }) => id, this.renderWorkflow),
8989
)}
@@ -93,19 +93,23 @@ export class DedupeWorkflows extends BtrixElement {
9393

9494
private readonly renderWorkflow = (workflow: ListWorkflow) => {
9595
const totalCrawls = workflow.crawlSuccessfulCount;
96-
// TOOD Virtualize scroll
96+
// TODO Virtualize scroll
9797
const content = () => html`
9898
<div class="max-h-96 overflow-y-auto border-t">
9999
<div class="min-h-4 pl-3 pt-3 text-xs leading-none text-neutral-500">
100100
${until(
101-
this.workflowCrawlsMap
102-
.get(workflow.id)
103-
?.then((crawls) =>
104-
crawls?.total
105-
? html`${this.localize.number(crawls.total)} ${msg("deduped")}
106-
${pluralOf("crawls", crawls.total)}`
107-
: msg("No deduped crawls."),
108-
),
101+
this.workflowCrawlsMap.get(workflow.id)?.then((crawls) => {
102+
const count = crawls?.total ?? 0;
103+
const number_of_crawls = this.localize.number(count);
104+
return pluralize(count, {
105+
zero: msg("No deduped crawls."),
106+
one: msg("1 deduped crawl."),
107+
two: msg("2 deduped crawls."),
108+
few: msg(str`${number_of_crawls} deduped crawls`),
109+
many: msg(str`${number_of_crawls} deduped crawls`),
110+
other: msg(str`${number_of_crawls} deduped crawls`),
111+
});
112+
}),
109113
)}
110114
</div>
111115
@@ -226,7 +230,9 @@ export class DedupeWorkflows extends BtrixElement {
226230
workflow: ListWorkflow,
227231
crawls?: APIPaginatedList<Crawl>,
228232
) => {
229-
return html`<div class=${clsx(crawls?.items.length ? tw`mt-1` : tw`mt-3`)}>
233+
return html`<div
234+
class=${clsx(crawls?.items.length ? tw`mt-1` : tw`mt-3`, tw`p-3`)}
235+
>
230236
${when(
231237
crawls?.items,
232238
(items) =>

‎frontend/src/pages/org/collection-detail/dedupe.ts‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -553,40 +553,42 @@ export class CollectionDetailDedupe extends BtrixElement {
553553

554554
private renderDeduped() {
555555
return html`
556-
<div
557-
class="mb-3 flex items-center justify-between gap-3 rounded-lg border bg-neutral-50 p-3"
558-
>
559-
<div class="flex items-center gap-2">
560-
<label for="view" class="whitespace-nowrap text-neutral-500"
561-
>${msg("View:")}</label
562-
>
563-
<sl-radio-group
564-
id="view"
565-
size="small"
566-
value=${this.view.value.itemsView || DEFAULT_ITEMS_VIEW}
567-
@sl-change=${(e: SlChangeEvent) => {
568-
this.view.setValue({
569-
itemsView: (e.target as SlRadioGroup).value as ItemsView,
570-
});
571-
}}
572-
>
573-
<sl-radio-button pill value=${DEFAULT_ITEMS_VIEW}>
574-
<sl-icon slot="prefix" name="file-code-fill"></sl-icon>
575-
${msg("By Workflow")}
576-
</sl-radio-button>
577-
<sl-radio-button pill value=${ItemsView.Crawls}>
578-
<sl-icon slot="prefix" name="gear-wide-connected"></sl-icon>
579-
${msg("By Crawl Run")}
580-
</sl-radio-button>
581-
<sl-radio-button pill value=${ItemsView.Dependencies}>
582-
<sl-icon
583-
slot="prefix"
584-
name=${dedupeIconFor["dependency"].name}
585-
></sl-icon>
586-
${msg("Crawl Dependencies")}
587-
</sl-radio-button>
588-
</sl-radio-group>
589-
</div>
556+
<div class="mb-3 rounded-lg border bg-neutral-50 p-3">
557+
<btrix-overflow-scroll
558+
class="-mx-3 [--btrix-overflow-scroll-scrim-color:theme(colors.neutral.50)] part-[content]:px-3"
559+
>
560+
<div class="flex min-w-max items-center gap-2">
561+
<label for="view" class="whitespace-nowrap text-neutral-500"
562+
>${msg("View:")}</label
563+
>
564+
<sl-radio-group
565+
id="view"
566+
size="small"
567+
value=${this.view.value.itemsView || DEFAULT_ITEMS_VIEW}
568+
@sl-change=${(e: SlChangeEvent) => {
569+
this.view.setValue({
570+
itemsView: (e.target as SlRadioGroup).value as ItemsView,
571+
});
572+
}}
573+
>
574+
<sl-radio-button pill value=${DEFAULT_ITEMS_VIEW}>
575+
<sl-icon slot="prefix" name="file-code-fill"></sl-icon>
576+
${msg("By Workflow")}
577+
</sl-radio-button>
578+
<sl-radio-button pill value=${ItemsView.Crawls}>
579+
<sl-icon slot="prefix" name="gear-wide-connected"></sl-icon>
580+
${msg("By Crawl Run")}
581+
</sl-radio-button>
582+
<sl-radio-button pill value=${ItemsView.Dependencies}>
583+
<sl-icon
584+
slot="prefix"
585+
name=${dedupeIconFor["dependency"].name}
586+
></sl-icon>
587+
${msg("Crawl Dependencies")}
588+
</sl-radio-button>
589+
</sl-radio-group>
590+
</div>
591+
</btrix-overflow-scroll>
590592
</div>
591593
592594
<div class="mx-2">
@@ -742,10 +744,13 @@ export class CollectionDetailDedupe extends BtrixElement {
742744
const items = (items?: APIPaginatedList<ArchivedItem>) =>
743745
items?.items.length
744746
? html`
745-
<btrix-item-dependents
746-
collectionId=${this.collectionId}
747-
.items=${items.items}
748-
></btrix-item-dependents>
747+
<btrix-overflow-scroll class="-mx-5 part-[content]:px-5">
748+
<btrix-item-dependents
749+
class="block min-w-max"
750+
collectionId=${this.collectionId}
751+
.items=${items.items}
752+
></btrix-item-dependents>
753+
</btrix-overflow-scroll>
749754
750755
<footer class="mt-6 flex justify-center">
751756
<btrix-pagination

0 commit comments

Comments
 (0)