From 224b01107038d4eedd61b72d17b67ee1a08513cf Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Tue, 16 Jul 2024 17:01:55 -0400 Subject: [PATCH] Small UI fixes (#1934) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes a few things that have been bugging me: - Overflow buttons in list view now (mostly) take up the their full cell area, instead of there being a couple pixels around the button where clicking would do nothing or cause navigation - | before | after | | --- | --- | | Screenshot 2024-07-16 at 3 35 25 PM | Screenshot 2024-07-16 at 3 35 02 PM | - Changes the class that `tab-list` uses internally so that it doesn't conflict with Tailwind's `container` class, which prevents the tab content from being limited at the default Tailwind container width - Adds a couple of Tailwind plugins for styling CSS parts (`part-[...]:`) and for arbitrary attributes (`attr-[...]:`) --- .../config/tailwind/plugins/attributes.js | 4 ++++ frontend/config/tailwind/plugins/parts.js | 4 ++++ .../src/components/ui/overflow-dropdown.ts | 20 +++++-------------- frontend/src/components/ui/tab-list.ts | 6 +++--- .../pages/org/archived-item-detail/ui/qa.ts | 4 ++-- frontend/src/pages/org/archived-items.ts | 4 ++-- .../src/pages/org/browser-profiles-list.ts | 2 +- frontend/src/pages/org/collection-detail.ts | 4 ++-- frontend/src/pages/org/collections-list.ts | 2 +- frontend/tailwind.config.js | 4 ++++ 10 files changed, 28 insertions(+), 26 deletions(-) create mode 100644 frontend/config/tailwind/plugins/attributes.js create mode 100644 frontend/config/tailwind/plugins/parts.js diff --git a/frontend/config/tailwind/plugins/attributes.js b/frontend/config/tailwind/plugins/attributes.js new file mode 100644 index 00000000..8d5444c0 --- /dev/null +++ b/frontend/config/tailwind/plugins/attributes.js @@ -0,0 +1,4 @@ +const plugin = require("tailwindcss/plugin"); +module.exports = plugin(function ({ matchVariant }) { + matchVariant("attr", (value) => `&[${value}]`); +}); diff --git a/frontend/config/tailwind/plugins/parts.js b/frontend/config/tailwind/plugins/parts.js new file mode 100644 index 00000000..609264fc --- /dev/null +++ b/frontend/config/tailwind/plugins/parts.js @@ -0,0 +1,4 @@ +const plugin = require("tailwindcss/plugin"); +module.exports = plugin(function ({ matchVariant }) { + matchVariant("part", (value) => `&::part(${value})`); +}); diff --git a/frontend/src/components/ui/overflow-dropdown.ts b/frontend/src/components/ui/overflow-dropdown.ts index cc113f47..ac9f40a6 100644 --- a/frontend/src/components/ui/overflow-dropdown.ts +++ b/frontend/src/components/ui/overflow-dropdown.ts @@ -1,6 +1,6 @@ import { localized, msg } from "@lit/localize"; import type { SlDropdown, SlMenu } from "@shoelace-style/shoelace"; -import { css, html, LitElement } from "lit"; +import { html } from "lit"; import { customElement, query, @@ -8,6 +8,8 @@ import { state, } from "lit/decorators.js"; +import { TailwindElement } from "@/classes/TailwindElement"; + /** * Dropdown for additional actions. * @@ -23,19 +25,7 @@ import { */ @localized() @customElement("btrix-overflow-dropdown") -export class OverflowDropdown extends LitElement { - static style = [ - css` - .trigger { - font-size: 1rem; - } - - .trigger[disabled] { - visibility: hidden; - } - `, - ]; - +export class OverflowDropdown extends TailwindElement { @state() private hasMenuItems?: boolean; @@ -50,7 +40,7 @@ export class OverflowDropdown extends LitElement { +
${this.renderNav()}
diff --git a/frontend/src/pages/org/archived-item-detail/ui/qa.ts b/frontend/src/pages/org/archived-item-detail/ui/qa.ts index 5638ae3d..c53bbad0 100644 --- a/frontend/src/pages/org/archived-item-detail/ui/qa.ts +++ b/frontend/src/pages/org/archived-item-detail/ui/qa.ts @@ -329,7 +329,7 @@ export class ArchivedItemDetailQA extends TailwindElement { ${msg("Started by")} - + ${msg("Row actions")} @@ -389,7 +389,7 @@ export class ArchivedItemDetailQA extends TailwindElement { : notApplicable()} ${run.userName} - +
{ diff --git a/frontend/src/pages/org/archived-items.ts b/frontend/src/pages/org/archived-items.ts index 28d4436a..33deb652 100644 --- a/frontend/src/pages/org/archived-items.ts +++ b/frontend/src/pages/org/archived-items.ts @@ -389,7 +389,7 @@ export class CrawlsList extends TailwindElement { ${items.length ? html` - + ${msg("Row actions")} ${repeat(items, ({ id }) => id, this.renderArchivedItem)} @@ -602,7 +602,7 @@ export class CrawlsList extends TailwindElement { .item=${item} ?showStatus=${this.itemType !== null} > - + { // Prevent navigation to detail view diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts index efd612d3..b5081354 100644 --- a/frontend/src/pages/org/browser-profiles-list.ts +++ b/frontend/src/pages/org/browser-profiles-list.ts @@ -327,7 +327,7 @@ export class BrowserProfilesList extends TailwindElement { > - + ${this.renderActions(data)} diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts index d0d27d90..80b32df3 100644 --- a/frontend/src/pages/org/collection-detail.ts +++ b/frontend/src/pages/org/collection-detail.ts @@ -643,7 +643,7 @@ export class CollectionDetail extends LiteElement { return html` - + ${msg("Row actions")} ${repeat( @@ -677,7 +677,7 @@ export class CollectionDetail extends LiteElement { > ${this.isCrawler ? html` - + { // Prevent navigation to detail view diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts index 4dd8f039..3e776585 100644 --- a/frontend/src/pages/org/collections-list.ts +++ b/frontend/src/pages/org/collections-list.ts @@ -553,7 +553,7 @@ export class CollectionsList extends LiteElement { minute="2-digit" > - + ${this.isCrawler ? this.renderActions(col) : ""} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 63f1846d..2a2c5f82 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,7 +1,9 @@ const { tailwindTransform } = require("postcss-lit"); +const attributes = require("./config/tailwind/plugins/attributes"); const containPlugin = require("./config/tailwind/plugins/contain"); const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility"); +const cssPartsPlugin = require("./config/tailwind/plugins/parts"); const PRIMARY_COLOR = "#0891B2"; @@ -163,7 +165,9 @@ module.exports = { plugins: [ require("@tailwindcss/container-queries"), + attributes, containPlugin, contentVisibilityPlugin, + cssPartsPlugin, ], };