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) (#9911)

Browse Source 
Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
This commit is contained in:
Pablo Martinez
2024-08-01 15:11:45 +02:00
committed by GitHub
parent e9e5592e95
commit c43c0aa9a0
14 changed files with 214 additions and 68 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

@@ -182,11 +182,14 @@
</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 adf-datatable-checkbox-single">
<mat-checkbox
[id]="'select-file-' + idx"
[class.adf-datatable-checkbox-selected]="row.isSelected"
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
[aria-label]="'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate"
role="checkbox"
(change)="onCheckboxChange(row, $event)"
class="adf-checkbox-sr-only">

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

@@ -159,6 +159,20 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
display: flex;
align-items: center;
&:hover {
.adf-datatable-hover-only {
visibility: visible;
}
}
.adf-datatable-hover-only {
visibility: hidden;
&.adf-datatable-checkbox-selected {
visibility: visible;
}
}
.adf-datatable-checkbox {
max-width: $data-table-thumbnail-width;
width: $data-table-thumbnail-width;
@@ -290,6 +304,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
padding-right: 15px;
}
.adf-datatable-checkbox {
display: flex;
justify-content: center;
}
.adf-cell-value {
display: flex;
min-height: inherit;
@@ -438,6 +457,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
display: none;
}
/* stylelint-disable media-feature-range-notation */
/* mobile phone */
@media all and (width <= 768px) {
.adf-desktop-only.adf-ellipsis-cell {
@@ -501,11 +522,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
right: -3px;
}
&.adf-datatable-checkbox {
display: flex;
align-items: center;
}
.adf-datatable-cell-header-content {
display: flex;
flex-grow: 1;

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

@@ -157,6 +157,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();
@@ -169,6 +170,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(() => {
@@ -540,6 +560,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' })]);
@@ -555,6 +576,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 ', () => {
@@ -872,16 +895,13 @@ describe('DataTable', () => {
dataTable.multiselect = true;
dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(false);
dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(false);
expect(dataTable.isSelectAllChecked).toBe(true);
dataTable.onCheckboxChange(rows[0], { checked: false } as MatCheckboxChange);
dataTable.onCheckboxChange(rows[1], { checked: false } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(false);
expect(dataTable.isSelectAllChecked).toBe(false);
});
it('should allow select row when multi-select enabled', () => {
@@ -1309,6 +1329,36 @@ describe('DataTable', () => {
expect(rows[1].getValue('icon')).toBe('directions_car');
expect(rows[2].getValue('icon')).toBe('local_shipping');
});
describe('displayCheckboxesOnHover', () => {
const getCheckboxes = () =>
fixture.debugElement.queryAll(By.css('.adf-datatable-checkbox-single .adf-checkbox-sr-only')).map((row) => row.nativeElement);
beforeEach(() => {
dataTable.data = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
dataTable.multiselect = true;
});
it('should always display checkboxes when displayCheckboxesOnHover is set to false', () => {
dataTable.displayCheckboxesOnHover = false;
fixture.detectChanges();
const checkboxes = getCheckboxes();
checkboxes.forEach((checkbox) => {
expect(checkbox.classList).not.toContain('adf-datatable-hover-only');
});
});
it('should display checkboxes on hover when displayCheckboxesOnHover is set to true', () => {
dataTable.displayCheckboxesOnHover = true;
fixture.detectChanges();
const checkboxes = getCheckboxes();
checkboxes.forEach((checkbox) => {
expect(checkbox.classList).toContain('adf-datatable-hover-only');
});
});
});
});
describe('Accesibility', () => {

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

@@ -241,6 +241,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).
@@ -284,6 +288,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
@Input()
blurOnResize = true;
/**
* Flag that indicates if selection checkboxes inside row should be displayed on hover only.
*/
@Input()
displayCheckboxesOnHover = false;
headerFilterTemplate: TemplateRef<any>;
noContentTemplate: TemplateRef<any>;
noPermissionTemplate: TemplateRef<any>;
@@ -316,7 +326,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.keyManager.onKeydown(event);
}
constructor(private elementRef: ElementRef, differs: IterableDiffers, private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
constructor(
private elementRef: ElementRef,
differs: IterableDiffers,
private matIconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer
) {
if (differs) {
this.differ = differs.find([]).create(null);
}
@@ -566,35 +581,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 {
@@ -849,6 +867,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.selection.splice(idx, 1);
}
}
this.selectedItemsCountChanged.emit(this.selection.length);
}
}