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

[ACS-8113] UX bug - Checkbox selections checked state should be Hyland blue not green- edit summary (#9861)

Browse Source
This commit is contained in:
jacekpluta
2024-06-30 23:11:29 +02:00
committed by GitHub
parent 3cc571ee32
commit a48611eb92
14 changed files with 168 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@
</div>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox-cell">
<mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
</div>
@@ -182,9 +182,10 @@
</mat-menu>
</div>
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox">
<label *ngIf="multiselect" [for]="'select-file-' + idx" class="adf-datatable-cell adf-datatable-checkbox-cell adf-datatable-checkbox-single">
<mat-checkbox
[id]="'select-file-' + idx"
[class.adf-datatable-checkbox-selected]="row.isSelected"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
role="checkbox"

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

@@ -158,14 +158,30 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
display: flex;
align-items: center;
.adf-datatable-checkbox {
&:hover {
.adf-datatable-checkbox-cell {
&.adf-datatable-checkbox-single {
visibility: visible;
}
}
}
.adf-datatable-checkbox-single {
visibility: hidden;
&:has(.adf-datatable-checkbox-selected) {
visibility: visible;
}
}
.adf-datatable-checkbox-cell {
max-width: $data-table-thumbnail-width;
width: $data-table-thumbnail-width;
}
/* query for Microsoft IE 11 */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.adf-datatable-checkbox {
.adf-datatable-checkbox-cell {
padding-top: 15px;
}
}
@@ -283,6 +299,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
padding-right: 15px;
}
.adf-datatable-checkbox-cell {
display: flex;
justify-content: center;
}
.adf-cell-value {
display: flex;
min-height: inherit;

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

@@ -154,6 +154,7 @@ describe('DataTable', () => {
});
it('should preserve the historical selection order', () => {
spyOn(dataTable.selectedItemsCountChanged, 'emit');
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
const rows = dataTable.data.getRows();
@@ -166,6 +167,25 @@ describe('DataTable', () => {
expect(selection[0].getValue('id')).toBe(2);
expect(selection[1].getValue('id')).toBe(0);
expect(selection[2].getValue('id')).toBe(1);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(3);
});
it('should selectedItemsCountChanged be emitted 4 times', () => {
spyOn(dataTable.selectedItemsCountChanged, 'emit');
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
const rows = dataTable.data.getRows();
dataTable.selectRow(rows[2], true);
dataTable.selectRow(rows[0], true);
dataTable.selectRow(rows[1], true);
dataTable.selectRow(rows[1], false);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(1);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(3);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(4);
});
it('should update schema if columns change', fakeAsync(() => {
@@ -537,6 +557,7 @@ describe('DataTable', () => {
});
it('should unselect the row searching it by row id, when row id is defined', () => {
spyOn(dataTable.selectedItemsCountChanged, 'emit');
const findSelectionByIdSpy = spyOn(dataTable, 'findSelectionById');
dataTable.data = new ObjectDataTableAdapter([], [new ObjectDataColumn({ key: 'name' })]);
@@ -552,6 +573,8 @@ describe('DataTable', () => {
expect(indexOfSpy).not.toHaveBeenCalled();
expect(findSelectionByIdSpy).toHaveBeenCalledWith(fakeDataRows[0].id);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledTimes(1);
expect(dataTable.selectedItemsCountChanged.emit).toHaveBeenCalledWith(2);
});
it('should unselect the row by searching for the exact same reference of it (indexOf), when row id is not defined ', () => {
@@ -869,7 +892,7 @@ describe('DataTable', () => {
dataTable.multiselect = true;
dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(false);
expect(dataTable.isSelectAllChecked).toBe(true);
dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(false);

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

@@ -191,6 +191,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Output()
columnsWidthChanged = new EventEmitter<DataColumn[]>();
/** Emitted when the selected row items count in the table changed. */
@Output()
selectedItemsCountChanged = new EventEmitter<number>();
/**
* Flag that indicates if the datatable is in loading state and needs to show the
* loading template (see the docs to learn how to configure a loading template).
@@ -516,35 +520,38 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
if (this.data) {
if (this.isSingleSelectionMode()) {
if (row.isSelected) {
this.resetSelection();
this.emitRowSelectionEvent('row-unselect', null);
} else {
this.resetSelection();
this.selectRow(row, true);
this.emitRowSelectionEvent('row-select', row);
}
}
if (!this.data) {
return;
}
if (this.isMultiSelectionMode()) {
const modifier = e && (e.metaKey || e.ctrlKey);
let newValue: boolean;
if (this.selection.length === 1) {
newValue = !row.isSelected;
} else {
newValue = modifier ? !row.isSelected : true;
}
const domEventName = newValue ? 'row-select' : 'row-unselect';
if (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
if (this.isSingleSelectionMode()) {
if (row.isSelected) {
this.resetSelection();
this.emitRowSelectionEvent('row-unselect', null);
} else {
this.resetSelection();
this.selectRow(row, true);
this.emitRowSelectionEvent('row-select', row);
}
}
if (this.isMultiSelectionMode()) {
const modifier = e && (e.metaKey || e.ctrlKey);
let newValue: boolean;
if (this.selection.length === 1) {
newValue = !row.isSelected;
} else {
newValue = modifier ? !row.isSelected : true;
}
const domEventName = newValue ? 'row-select' : 'row-unselect';
if (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
this.checkSelectAllCheckboxState();
}
}
resetSelection(): void {
@@ -672,8 +679,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.isSelectAllChecked = true;
this.isSelectAllIndeterminate = false;
} else if (numberOfSelectedRows > 0 && numberOfSelectedRows < rows.length) {
this.isSelectAllChecked = false;
this.isSelectAllIndeterminate = true;
this.isSelectAllChecked = true;
} else {
this.isSelectAllChecked = false;
this.isSelectAllIndeterminate = false;
@@ -799,6 +806,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.selection.splice(idx, 1);
}
}
this.selectedItemsCountChanged.emit(this.selection.length);
}
}