Fix table grid column CSS variable, superadmin list menus being hidden/inoperable, and various other table tweaks (#2573)
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
GitHub
parent
1fa43335c0
commit
8a707e3b3a
@ -28,7 +28,7 @@ export class OrgsList extends BtrixElement {
|
||||
static styles = css`
|
||||
btrix-table {
|
||||
--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"
|
||||
></sl-icon
|
||||
></sl-input>
|
||||
<btrix-table>
|
||||
<btrix-table-head class="mb-2">
|
||||
<btrix-table-header-cell>
|
||||
<span class="sr-only">${msg("Status")}</span>
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Name")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Created")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Members")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Bytes Stored")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Last Crawl")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell>
|
||||
<span class="sr-only">${msg("Actions")}</span>
|
||||
</btrix-table-header-cell>
|
||||
</btrix-table-head>
|
||||
<btrix-table-body class="rounded border">
|
||||
${orgs?.map(this.renderOrg)}
|
||||
</btrix-table-body>
|
||||
</btrix-table>
|
||||
<div class="-mx-3 overflow-x-auto px-3">
|
||||
<btrix-table>
|
||||
<btrix-table-head class="mb-2">
|
||||
<btrix-table-header-cell>
|
||||
<span class="sr-only">${msg("Status")}</span>
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Name")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Created")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Members")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Bytes Stored")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell class="px-2">
|
||||
${msg("Last Crawl")}
|
||||
</btrix-table-header-cell>
|
||||
<btrix-table-header-cell>
|
||||
<span class="sr-only">${msg("Actions")}</span>
|
||||
</btrix-table-header-cell>
|
||||
</btrix-table-head>
|
||||
<btrix-table-body class="rounded border">
|
||||
${orgs?.map(this.renderOrg)}
|
||||
</btrix-table-body>
|
||||
</btrix-table>
|
||||
</div>
|
||||
|
||||
${this.renderOrgQuotas()} ${this.renderOrgProxies()}
|
||||
${this.renderOrgReadOnly()} ${this.renderOrgDelete()}
|
||||
|
||||
@ -50,7 +50,11 @@ export class OverflowDropdown extends TailwindElement {
|
||||
hoist
|
||||
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
|
||||
label=${msg("Actions")}
|
||||
name="three-dots-vertical"
|
||||
|
||||
@ -38,7 +38,8 @@ export class Table extends LitElement {
|
||||
:host {
|
||||
display: grid;
|
||||
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;
|
||||
await headEl.updateComplete;
|
||||
|
||||
if (!this.style.getPropertyValue("--btrix-table-grid-template-columns")) {
|
||||
// `grid-template-columns` must be defined in order for spanning all
|
||||
// columns in a subgrid to work.
|
||||
// See https://github.com/w3c/csswg-drafts/issues/2402
|
||||
this.style.setProperty(
|
||||
"--btrix-table-grid-template-columns",
|
||||
`repeat(${headEl.colCount}, auto)`,
|
||||
);
|
||||
}
|
||||
// `grid-template-columns` must be defined in order for spanning all
|
||||
// columns in a subgrid to work.
|
||||
// See https://github.com/w3c/csswg-drafts/issues/2402
|
||||
this.style.setProperty(
|
||||
"--btrix-table-grid-template-columns--internal",
|
||||
`var(--btrix-table-grid-template-columns, repeat(${headEl.colCount}, auto))`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -446,12 +446,12 @@ export class ArchivedItemList extends TailwindElement {
|
||||
return html`
|
||||
<style>
|
||||
btrix-table {
|
||||
grid-template-columns: ${headerCols
|
||||
--btrix-table-grid-template-columns: ${headerCols
|
||||
.map(({ cssCol }) => cssCol)
|
||||
.join(" ")};
|
||||
}
|
||||
</style>
|
||||
<div class="overflow-auto">
|
||||
<div class="-mx-5 overflow-auto px-5">
|
||||
<btrix-table>
|
||||
<btrix-table-head class="mb-2">
|
||||
<slot
|
||||
|
||||
@ -278,10 +278,9 @@ export class CrawlList extends TailwindElement {
|
||||
render() {
|
||||
return html` <style>
|
||||
btrix-table {
|
||||
grid-template-columns:
|
||||
min-content [clickable-start]
|
||||
${this.workflowId ? "" : `auto `}auto auto
|
||||
auto auto auto auto [clickable-end] min-content;
|
||||
--btrix-table-grid-template-columns: min-content [clickable-start]
|
||||
${this.workflowId ? "" : `auto `}auto auto auto auto auto auto
|
||||
[clickable-end] min-content;
|
||||
}
|
||||
</style>
|
||||
<div class="overflow-auto">
|
||||
|
||||
@ -752,7 +752,7 @@ export class ArchivedItemDetailQA extends BtrixElement {
|
||||
return html`
|
||||
<btrix-table
|
||||
class="-mx-3 overflow-x-auto px-5"
|
||||
style="grid-template-columns: ${[
|
||||
style="--btrix-table-grid-template-columns: ${[
|
||||
"[clickable-start] minmax(12rem, auto)",
|
||||
"minmax(min-content, 12rem)",
|
||||
"minmax(min-content, 12rem) [clickable-end]",
|
||||
|
||||
@ -56,9 +56,8 @@ export class BrowserProfilesList extends BtrixElement {
|
||||
|
||||
static styles = css`
|
||||
btrix-table {
|
||||
grid-template-columns:
|
||||
[clickable-start] minmax(30ch, 50ch) minmax(30ch, 40ch) repeat(2, 1fr)
|
||||
[clickable-end] min-content;
|
||||
--btrix-table-grid-template-columns: [clickable-start] minmax(30ch, 50ch)
|
||||
minmax(30ch, 40ch) repeat(2, 1fr) [clickable-end] min-content;
|
||||
--btrix-table-cell-gap: var(--sl-spacing-x-small);
|
||||
--btrix-table-cell-padding-x: var(--sl-spacing-small);
|
||||
}
|
||||
|
||||
@ -480,7 +480,7 @@ export class CollectionsList extends BtrixElement {
|
||||
return html`
|
||||
<btrix-table
|
||||
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-header-cell>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user