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:
		
							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