inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-21147] Data table columns width are not adjusting to screen size anymore. (#9426)

Browse Source
This commit is contained in:
jacekpluta 2024-03-12 17:31:59 +01:00 committed by GitHub
parent e9dc55bca2
commit 32f2bf995d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@ -39,7 +39,7 @@
'adf-datatable__cursor--pointer': !isResizing,
'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'),
'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}"
[ngStyle]="(col.width) && !lastColumn && {'flex-basis': getFlexBasisValue(col)}"
[ngStyle]="(col.width) && {'flex': getFlexValue(col)}"
[attr.aria-label]="col.title | translate"
(click)="onColumnHeaderClick(col, $event)"
(keyup.enter)="onColumnHeaderClick(col, $event)"
@ -103,7 +103,7 @@
</span>
</div>
<div
*ngIf="isResizingEnabled && col.resizable && !lastColumn"
*ngIf="isResizingEnabled && col.resizable"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
adf-resize-handle
(click)="$event.stopPropagation()"
@ -216,7 +216,7 @@
[adf-context-menu]="getContextMenuActions(row, col)"
[adf-context-menu-enabled]="contextMenu"
adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row"
[ngStyle]="(col.width) && !lastColumn && {'flex-basis': getFlexBasisValue(col)}">
[ngStyle]="(col.width) && {'flex': getFlexValue(col)}">
<div *ngIf="!col.template" class="adf-datatable-cell-container">
<ng-container [ngSwitch]="data.getColumnType(row, col)">
<div *ngSwitchCase="'image'" class="adf-cell-value">

11
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@ -382,17 +382,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
min-height: inherit;
}
.adf-datatable-header, .adf-datatable-body {
.adf-datatable-cell-data {
flex-grow: 0;
flex-shrink: 1;
&:not(:has(~ .adf-datatable-cell-data)) {
flex-grow: 1;
}
}
}
/* stylelint-disable-next-line no-duplicate-selectors */
.adf-datatable-cell,
.adf-datatable-cell-header {

20
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@ -1738,20 +1738,20 @@ describe('Column Resizing', () => {
});
});
it('should display resize handle for each column, but not for the last one, by default', () => {
it('should display resize handle for each column by default', () => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
expect(getResizeHandlersCount()).toBe(1);
expect(getResizeHandlersCount()).toBe(2);
});
it('should NOT display resize handle for the column when the column has resizable param set to false and column is not the last one', () => {
it('should NOT display resize handle for the column when the column has resizable param set to false', () => {
dataTable.isResizingEnabled = true;
dataTableSchema[0].resizable = false;
dataTable.data = new ObjectDataTableAdapter([...data], [...dataTableSchema]);
fixture.detectChanges();
expect(getResizeHandlersCount()).toBe(0);
expect(getResizeHandlersCount()).toBe(1);
});
it('should display resize handle when the feature is Enabled [isResizingEnabled=true]', () => {
@ -1885,7 +1885,7 @@ describe('Column Resizing', () => {
fixture.detectChanges();
const headerColumns: HTMLElement[] = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
expect(headerColumns[0].style.flexBasis).toBe('125px');
expect(headerColumns[0].style.flex).toBe('0 1 125px');
}));
it('should set the column header to 100px on resizing when its width goes below 100', fakeAsync(() => {
@ -1894,7 +1894,7 @@ describe('Column Resizing', () => {
fixture.detectChanges();
const headerColumns: HTMLElement[] = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
expect(headerColumns[0].style.flexBasis).toBe('100px');
expect(headerColumns[0].style.flex).toBe('0 1 100px');
}));
it('should set the style of all the table cells under the resizing header on resizing', fakeAsync(() => {
@ -1906,8 +1906,8 @@ describe('Column Resizing', () => {
const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
expect(firstCell.style.flexBasis).toBe('130px');
expect(secondCell.style.flexBasis).toBe('130px');
expect(firstCell.style.flex).toBe('0 1 130px');
expect(secondCell.style.flex).toBe('0 1 130px');
}));
it('should set the style of all the table cells under the resizing header to 100px on resizing when its width goes below 100', fakeAsync(() => {
@ -1919,8 +1919,8 @@ describe('Column Resizing', () => {
const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
expect(firstCell.style.flexBasis).toBe('100px');
expect(secondCell.style.flexBasis).toBe('100px');
expect(firstCell.style.flex).toBe('0 1 100px');
expect(secondCell.style.flex).toBe('0 1 100px');
}));
it('should unblur the body and set the resizing to false upon resizing ends', () => {

4
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@ -971,8 +971,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.updateColumnsWidths();
}
getFlexBasisValue({ width = 0 }: DataColumn): string {
return `${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
getFlexValue({ width = 0 }: DataColumn): string {
return `0 1 ${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
}
filterDisabledColumns(index: number, _drag: CdkDrag, drop: CdkDropList): boolean {