tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix table grid column CSS variable, superadmin list menus being hidden/inoperable, and various other table tweaks (#2573)

Browse Source 
Closes #2574
cc @SuaYoo 

## Changes

This adds an internal `--btrix-table-grid-template-columns--internal`
css property to `btrix-table` to set table grid cols, which uses the
`--btrix-table-grid-template-columns` value if defined and otherwise
defaults to the number of header cols **from within the css
declaration**, rather than using JS. In Chrome at least,
`this.style.getPropertyValue` wasn't picking up on css variables defined
outside of the custom component boundary, so this gets around that.

Other changes:
- Adds an additional column to the superadmin org list, as it was
missing one
- Fixes `overflow-dropdown` unintentionally setting its internal
button's size to `undefined` if `size` wasn't set on it
- Swaps the remaining tables to use
`--btrix-table-grid-template-columns` instead of directly setting
`grid-template-columns`
- Adds a min-width of `min-content` to the table container, because
doing so is necessary for left/right scrolling, and this is a common
enough pattern it seems that upstreaming this into the table itself
makes sense — it shouldn't cause breakages, this already generally is
the expected behaviour
- Allows tables to scroll left/right when necessary
- Fix padding/margin for a few left/right scrolling tables
- Allows primary column of collections list to shrink to a smaller min
width

## Testing

Test that none of the other tables are broken. I couldn't find any!
This commit is contained in:
Emma Segal-Grossman 2025-04-29 21:00:16 -04:00 committed by GitHub
parent 1fa43335c0
commit 8a707e3b3a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 54 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/components/orgs-list.ts
View File

@ -28,7 +28,7 @@ export class OrgsList extends BtrixElement {
static styles = css` static styles = css`
btrix-table { btrix-table {
--btrix-table-grid-template-columns: min-content [clickable-start] --btrix-table-grid-template-columns: min-content [clickable-start]
minmax(auto, 50ch) auto auto auto [clickable-end] min-content; minmax(auto, 50ch) auto auto auto auto [clickable-end] min-content;
} }
`; `;
@ -115,34 +115,36 @@ export class OrgsList extends BtrixElement {
library="default" library="default"
></sl-icon ></sl-icon
></sl-input> ></sl-input>
<btrix-table> <div class="-mx-3 overflow-x-auto px-3">
<btrix-table-head class="mb-2"> <btrix-table>
<btrix-table-header-cell> <btrix-table-head class="mb-2">
<span class="sr-only">${msg("Status")}</span> <btrix-table-header-cell>
</btrix-table-header-cell> <span class="sr-only">${msg("Status")}</span>
<btrix-table-header-cell class="px-2"> </btrix-table-header-cell>
${msg("Name")} <btrix-table-header-cell class="px-2">
</btrix-table-header-cell> ${msg("Name")}
<btrix-table-header-cell class="px-2"> </btrix-table-header-cell>
${msg("Created")} <btrix-table-header-cell class="px-2">
</btrix-table-header-cell> ${msg("Created")}
<btrix-table-header-cell class="px-2"> </btrix-table-header-cell>
${msg("Members")} <btrix-table-header-cell class="px-2">
</btrix-table-header-cell> ${msg("Members")}
<btrix-table-header-cell class="px-2"> </btrix-table-header-cell>
${msg("Bytes Stored")} <btrix-table-header-cell class="px-2">
</btrix-table-header-cell> ${msg("Bytes Stored")}
<btrix-table-header-cell class="px-2"> </btrix-table-header-cell>
${msg("Last Crawl")} <btrix-table-header-cell class="px-2">
</btrix-table-header-cell> ${msg("Last Crawl")}
<btrix-table-header-cell> </btrix-table-header-cell>
<span class="sr-only">${msg("Actions")}</span> <btrix-table-header-cell>
</btrix-table-header-cell> <span class="sr-only">${msg("Actions")}</span>
</btrix-table-head> </btrix-table-header-cell>
<btrix-table-body class="rounded border"> </btrix-table-head>
${orgs?.map(this.renderOrg)} <btrix-table-body class="rounded border">
</btrix-table-body> ${orgs?.map(this.renderOrg)}
</btrix-table> </btrix-table-body>
</btrix-table>
</div>
${this.renderOrgQuotas()} ${this.renderOrgProxies()} ${this.renderOrgQuotas()} ${this.renderOrgProxies()}
${this.renderOrgReadOnly()} ${this.renderOrgDelete()} ${this.renderOrgReadOnly()} ${this.renderOrgDelete()}

6
frontend/src/components/ui/overflow-dropdown.ts
View File

@ -50,7 +50,11 @@ export class OverflowDropdown extends TailwindElement {
hoist hoist
distance=${ifDefined(this.raised ? "4" : undefined)} distance=${ifDefined(this.raised ? "4" : undefined)}
> >
<btrix-button slot="trigger" ?raised=${this.raised} size=${this.size}> <btrix-button
slot="trigger"
?raised=${this.raised}
size=${ifDefined(this.size)}
>
<sl-icon <sl-icon
label=${msg("Actions")} label=${msg("Actions")}
name="three-dots-vertical" name="three-dots-vertical"

19
frontend/src/components/ui/table/table.ts
View File

@ -38,7 +38,8 @@ export class Table extends LitElement {
:host { :host {
display: grid; display: grid;
column-gap: var(--btrix-table-column-gap, 0); column-gap: var(--btrix-table-column-gap, 0);
grid-template-columns: var(--btrix-table-grid-template-columns); grid-template-columns: var(--btrix-table-grid-template-columns--internal);
min-width: min-content;
} }
`; `;
@ -57,14 +58,12 @@ export class Table extends LitElement {
if (!headEl) return; if (!headEl) return;
await headEl.updateComplete; await headEl.updateComplete;
if (!this.style.getPropertyValue("--btrix-table-grid-template-columns")) { // `grid-template-columns` must be defined in order for spanning all
// `grid-template-columns` must be defined in order for spanning all // columns in a subgrid to work.
// columns in a subgrid to work. // See https://github.com/w3c/csswg-drafts/issues/2402
// See https://github.com/w3c/csswg-drafts/issues/2402 this.style.setProperty(
this.style.setProperty( "--btrix-table-grid-template-columns--internal",
"--btrix-table-grid-template-columns", `var(--btrix-table-grid-template-columns, repeat(${headEl.colCount}, auto))`,
`repeat(${headEl.colCount}, auto)`, );
);
}
} }
} }

4
frontend/src/features/archived-items/archived-item-list.ts
View File

@ -446,12 +446,12 @@ export class ArchivedItemList extends TailwindElement {
return html` return html`
<style> <style>
btrix-table { btrix-table {
grid-template-columns: ${headerCols --btrix-table-grid-template-columns: ${headerCols
.map(({ cssCol }) => cssCol) .map(({ cssCol }) => cssCol)
.join(" ")}; .join(" ")};
} }
</style> </style>
<div class="overflow-auto"> <div class="-mx-5 overflow-auto px-5">
<btrix-table> <btrix-table>
<btrix-table-head class="mb-2"> <btrix-table-head class="mb-2">
<slot <slot

7
frontend/src/features/archived-items/crawl-list.ts
View File

@ -278,10 +278,9 @@ export class CrawlList extends TailwindElement {
render() { render() {
return html` <style> return html` <style>
btrix-table { btrix-table {
grid-template-columns: --btrix-table-grid-template-columns: min-content [clickable-start]
min-content [clickable-start] ${this.workflowId ? "" : `auto `}auto auto auto auto auto auto
${this.workflowId ? "" : `auto `}auto auto [clickable-end] min-content;
auto auto auto auto [clickable-end] min-content;
} }
</style> </style>
<div class="overflow-auto"> <div class="overflow-auto">

2
frontend/src/pages/org/archived-item-detail/ui/qa.ts
View File

@ -752,7 +752,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
return html` return html`
<btrix-table <btrix-table
class="-mx-3 overflow-x-auto px-5" class="-mx-3 overflow-x-auto px-5"
style="grid-template-columns: ${[ style="--btrix-table-grid-template-columns: ${[
"[clickable-start] minmax(12rem, auto)", "[clickable-start] minmax(12rem, auto)",
"minmax(min-content, 12rem)", "minmax(min-content, 12rem)",
"minmax(min-content, 12rem) [clickable-end]", "minmax(min-content, 12rem) [clickable-end]",

5
frontend/src/pages/org/browser-profiles-list.ts
View File

@ -56,9 +56,8 @@ export class BrowserProfilesList extends BtrixElement {
static styles = css` static styles = css`
btrix-table { btrix-table {
grid-template-columns: --btrix-table-grid-template-columns: [clickable-start] minmax(30ch, 50ch)
[clickable-start] minmax(30ch, 50ch) minmax(30ch, 40ch) repeat(2, 1fr) minmax(30ch, 40ch) repeat(2, 1fr) [clickable-end] min-content;
[clickable-end] min-content;
--btrix-table-cell-gap: var(--sl-spacing-x-small); --btrix-table-cell-gap: var(--sl-spacing-x-small);
--btrix-table-cell-padding-x: var(--sl-spacing-small); --btrix-table-cell-padding-x: var(--sl-spacing-small);
} }

2
frontend/src/pages/org/collections-list.ts
View File

@ -480,7 +480,7 @@ export class CollectionsList extends BtrixElement {
return html` return html`
<btrix-table <btrix-table
class="[--btrix-table-column-gap:var(--sl-spacing-small)]" class="[--btrix-table-column-gap:var(--sl-spacing-small)]"
style="grid-template-columns: min-content [clickable-start] 45em repeat(4, 1fr) [clickable-end] min-content" style="--btrix-table-grid-template-columns: min-content [clickable-start] minmax(min-content, 45em) repeat(4, 1fr) [clickable-end] min-content"
> >
<btrix-table-head class="mb-2 mt-1 whitespace-nowrap"> <btrix-table-head class="mb-2 mt-1 whitespace-nowrap">
<btrix-table-header-cell> <btrix-table-header-cell>