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

Revert ACS-8113 (#9910)

Browse Source 
* Revert "Add new datatable param for checkboxes visibility (#9908)"

This reverts commit 55dfc07a24.

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

This reverts commit a48611eb92.

* [ci:force]

* [ci:force]
This commit is contained in:
Pablo Martinez
2024-07-04 08:28:38 +02:00
committed by GitHub
parent 55dfc07a24
commit 640b8b17a2
14 changed files with 63 additions and 213 deletions
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

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

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

@@ -158,28 +158,14 @@ $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-cell {
.adf-datatable-checkbox {
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-cell {
.adf-datatable-checkbox {
padding-top: 15px;
}
}
@@ -297,11 +283,6 @@ $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;
@@ -451,8 +432,6 @@ $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 (max-width: 768px) {
.adf-desktop-only.adf-ellipsis-cell {
@@ -578,7 +557,6 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
}
/* stylelint-disable selector-class-pattern */
.cdk-drag-preview {
&.adf-datatable-cell-header {
border-radius: 6px;
@@ -642,7 +620,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
align-items: center;
height: inherit;
.adf-datatable-body[role='rowgroup'] {
.adf-datatable-body[role="rowgroup"] {
.adf-datatable-row {
height: 100%;
background-color: var(--adf-theme-background-card-color);

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

@@ -154,7 +154,6 @@ 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();
@@ -167,25 +166,6 @@ 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(() => {
@@ -557,7 +537,6 @@ 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' })]);
@@ -573,8 +552,6 @@ 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 ', () => {
@@ -892,7 +869,7 @@ describe('DataTable', () => {
dataTable.multiselect = true;
dataTable.onCheckboxChange(rows[0], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(true);
expect(dataTable.isSelectAllChecked).toBe(false);
dataTable.onCheckboxChange(rows[1], { checked: true } as MatCheckboxChange);
expect(dataTable.isSelectAllIndeterminate).toBe(false);
@@ -1329,36 +1306,6 @@ 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', () => {

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

@@ -191,10 +191,6 @@ 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).
@@ -238,12 +234,6 @@ 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>;
@@ -526,37 +516,34 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
}
private handleRowSelection(row: DataRow, e: KeyboardEvent | MouseEvent) {
if (!this.data) {
return;
}
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) {
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 (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();
if (!modifier) {
this.resetSelection();
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
}
this.selectRow(row, newValue);
this.emitRowSelectionEvent(domEventName, row);
this.checkSelectAllCheckboxState();
}
}
@@ -685,8 +672,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;
@@ -812,8 +799,6 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
this.selection.splice(idx, 1);
}
}
this.selectedItemsCountChanged.emit(this.selection.length);
}
}