From f6e82d933583897d443e8d345d968f3ba07facf3 Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Sun, 25 Feb 2024 02:04:53 -0500 Subject: [PATCH] Archived item nav button quickfix (#1543) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Navigation buttons weren't being laid out properly and were overflowing in unintentional ways, this fixes that, and then also updates navigation buttons & puts them into use everywhere elements service the purpose of navigation buttons were used instead! Screenshot 2024-02-24 at 10 37 41 PM Screenshot 2024-02-24 at 10 38 06 PM Screenshot 2024-02-24 at 10 38 20 PM Screenshot 2024-02-24 at 10 38 25 PM Screenshot 2024-02-24 at 10 38 37 PM --- .../ui/navigation/navigation-button.ts | 22 ++- frontend/src/components/ui/pagination.ts | 9 +- frontend/src/components/ui/tab-list.ts | 4 +- .../collections/collection-items-dialog.ts | 8 +- .../src/pages/org/archived-item-detail.ts | 128 +++++++++--------- frontend/src/pages/org/archived-item-qa.ts | 16 +-- frontend/src/pages/org/archived-items.ts | 10 +- frontend/src/pages/org/collection-detail.ts | 7 +- frontend/src/pages/org/index.ts | 6 +- frontend/src/pages/org/settings.ts | 8 +- frontend/src/pages/org/workflow-detail.ts | 13 +- 11 files changed, 122 insertions(+), 109 deletions(-) diff --git a/frontend/src/components/ui/navigation/navigation-button.ts b/frontend/src/components/ui/navigation/navigation-button.ts index 8245743e..95fe8ddd 100644 --- a/frontend/src/components/ui/navigation/navigation-button.ts +++ b/frontend/src/components/ui/navigation/navigation-button.ts @@ -38,6 +38,12 @@ export class Button extends TailwindElement { @property({ type: String, reflect: true }) role: ARIAMixin["role"] = "tab"; + @property({ type: String }) + size: "small" | "medium" | "large" = "medium"; + + @property({ type: String }) + align: "left" | "center" | "right" = "left"; + protected willUpdate(changedProperties: PropertyValueMap) { if (changedProperties.has("active")) { this.ariaSelected = this.active ? "true" : null; @@ -60,10 +66,20 @@ export class Button extends TailwindElement { return html`<${tag} type=${this.type === "submit" ? "submit" : "button"} class=${[ - tw`flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-4 font-medium outline-primary-600 transition hover:transition-none focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50`, - this.icon ? tw`min-h-6 min-w-6` : tw`h-6`, + tw`flex w-full cursor-pointer items-center gap-2 rounded font-medium leading-[16px] outline-primary-600 transition hover:transition-none focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50`, + this.icon ? tw`min-h-6 min-w-6` : tw``, + { + small: this.icon ? tw`min-h-6 p-0` : tw`min-h-6 px-2 py-0`, + medium: tw`p-2`, + large: tw`px-2 py-4`, + }[this.size], + { + left: "justify-start", + center: "justify-center", + right: "justify-end", + }[this.align], this.active - ? tw`bg-blue-100 text-blue-600 shadow-sm shadow-blue-900/40 hover:bg-blue-100` + ? tw`bg-blue-100 text-blue-600 shadow-sm shadow-blue-900/20 hover:bg-blue-100` : tw`text-neutral-600 hover:bg-blue-50`, ] .filter(Boolean) diff --git a/frontend/src/components/ui/pagination.ts b/frontend/src/components/ui/pagination.ts index 229a3e96..7773b21d 100644 --- a/frontend/src/components/ui/pagination.ts +++ b/frontend/src/components/ui/pagination.ts @@ -298,13 +298,14 @@ export class Pagination extends LitElement { private readonly renderPageButton = (page: number) => { const isCurrent = page === this.page; return html`
  • - this.onPageChange(page)} aria-disabled=${isCurrent} - >${page}${page}
    • `; }; diff --git a/frontend/src/components/ui/tab-list.ts b/frontend/src/components/ui/tab-list.ts index 988c366c..f5b65bb2 100644 --- a/frontend/src/components/ui/tab-list.ts +++ b/frontend/src/components/ui/tab-list.ts @@ -133,6 +133,7 @@ export class TabList extends LitElement { margin: 0; list-style: none; padding: 0; + gap: 0.5rem; } .show-indicator .tablist { @@ -141,7 +142,7 @@ export class TabList extends LitElement { @media only screen and (min-width: ${TWO_COL_SCREEN_MIN_CSS}) { .tablist { - display: block; + flex-direction: column; } } @@ -165,7 +166,6 @@ export class TabList extends LitElement { } @media only screen and (min-width: ${TWO_COL_SCREEN_MIN_CSS}) { - .tablist, .show-indicator .track, .show-indicator .indicator { display: block; diff --git a/frontend/src/features/collections/collection-items-dialog.ts b/frontend/src/features/collections/collection-items-dialog.ts index 1e3c6a78..f02ad1e4 100644 --- a/frontend/src/features/collections/collection-items-dialog.ts +++ b/frontend/src/features/collections/collection-items-dialog.ts @@ -274,10 +274,10 @@ export class CollectionItemsDialog extends TailwindElement { const { icon, label } = this.tabLabels[tab]; return html` - (this.activeTab = tab)} - variant=${isSelected ? "primary" : "neutral"} - ?raised=${isSelected} + .active=${isSelected} + size="small" aria-selected="${isSelected}" role="tab" aria-controls="tabPanel-${tab}" @@ -286,7 +286,7 @@ export class CollectionItemsDialog extends TailwindElement { > ${label} - + `; }; diff --git a/frontend/src/pages/org/archived-item-detail.ts b/frontend/src/pages/org/archived-item-detail.ts index fbda9d4d..9ba61e39 100644 --- a/frontend/src/pages/org/archived-item-detail.ts +++ b/frontend/src/pages/org/archived-item-detail.ts @@ -260,8 +260,14 @@ export class CrawlDetail extends LiteElement {
    ${this.renderHeader()}
    -
    -
    ${this.renderNav()}
    +
    +
    +
    + ${this.renderNav()} +
    +
    ${sectionContent}
    @@ -317,83 +323,79 @@ export class CrawlDetail extends LiteElement { const isActive = section === this.sectionName; const baseUrl = window.location.pathname.split("#")[0]; return html` - + { + this.sectionName = section; + }} + > + ${label} `; }; return html` -