diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 2fdc09a..5cc31bb 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.223', + version: '1.0.224', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts index 0e1c781..ce097a2 100644 --- a/ts_web/elements/dees-table.ts +++ b/ts_web/elements/dees-table.ts @@ -263,6 +263,8 @@ export class DeesTable extends DeesElement { th, td { position: relative; + vertical-align: top; + padding: 0px; border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')}; } @@ -582,44 +584,55 @@ export class DeesTable extends DeesElement { `; } - public async firstUpdated() {} + public async firstUpdated() { + } public async updated(changedProperties: Map): Promise { super.updated(changedProperties); - this.freezeColumnWidths(); + this.determineColumnWidths(); } - freezeColumnWidths() { + public async determineColumnWidths() { + const domtools = await this.domtoolsPromise; + await domtools.convenience.smartdelay.delayFor(0); // Get the table element const table = this.shadowRoot.querySelector('table'); if (!table) return; - // Create a colgroup if it doesn't exist - let colgroup = table.querySelector('colgroup'); - if (!colgroup) { - colgroup = document.createElement('colgroup'); - table.insertBefore(colgroup, table.firstChild); - } - // Get the first row's cells to measure the widths const cells = table.rows[0].cells; - for (let i = 0; i < cells.length; i++) { + const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => { + const done = plugins.smartpromise.defer(); const cell = cells[i]; // Get computed width const width = window.getComputedStyle(cell).width; - - // Check if there's already a for this cell - let col = colgroup.children[i] as HTMLElement; - if (!col) { - col = document.createElement('col'); - colgroup.appendChild(col); + if (cell.textContent.includes('Actions')) { + cell.style.minWidth = '68px'; + cell.style.width = `${this.dataActions.filter(actionArg => actionArg.type.includes('inRow')).length * 35}px`; + } else { + cell.style.width = width; + } + if (waitForRenderArg) { + requestAnimationFrame(() => { + done.resolve(); + }); + await done.promise; } - - // Set the width - col.style.width = width; } + + if (cells[cells.length - 1].textContent.includes('Actions')) { + await handleColumnByIndex(cells.length - 1, true); + } + + for (let i = 0; i < cells.length; i++) { + if (cells[i].textContent.includes('Actions')) { + continue; + } + await handleColumnByIndex(i); + } + table.style.tableLayout = 'fixed'; } getActionsForType(typeArg: ITableAction['type'][0]) {