Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Fixed sync width directive

Browse Source
This commit is contained in:
Adina Țeudan 2021-01-08 23:03:30 +02:00 committed by Timo
parent d5485882e4
commit 64f2d861f2
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss
View File

@ -3,6 +3,7 @@
:host {
display: flex;
height: 30px;
flex: 1;
> div {
align-items: center;

27
apps/red-ui/src/app/utils/sync-width.directive.ts
View File

@ -15,6 +15,22 @@ export class SyncWidthDirective implements AfterViewChecked {
this.matchWidth();
}
private get _sampleRow(): { tableRow: Element; length: number } {
const tableRows = document.getElementsByClassName(this.redactionSyncWidth);
let length = 0;
let tableRow: Element;
for (let idx = 0; idx < tableRows.length; ++idx) {
const row = tableRows.item(idx);
if (row.children.length > length) {
length = row.children.length;
tableRow = row;
}
}
return { tableRow, length };
}
@debounce(0)
matchWidth() {
const headerItems = this.el.nativeElement.children;
@ -22,13 +38,18 @@ export class SyncWidthDirective implements AfterViewChecked {
if (!tableRows || !tableRows.length) return;
const tableRow = tableRows[0];
if (tableRow.children.length !== headerItems.length) return;
const { tableRow, length } = this._sampleRow;
for (let idx = 0; idx < headerItems.length - 1; ++idx) {
const hasExtraColumns = headerItems.length !== length ? 1 : 0;
for (let idx = 0; idx < length - hasExtraColumns - 1; ++idx) {
headerItems[idx].style.width = `${tableRow.children[idx].getBoundingClientRect().width}px`;
headerItems[idx].style.minWidth = `${tableRow.children[idx].getBoundingClientRect().width}px`;
}
for (let idx = length - hasExtraColumns - 1; idx < headerItems.length; ++idx) {
headerItems[idx].style.minWidth = `0`;
}
}
@HostListener('window:resize')