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

Add new datatable param for checkboxes visibility (#9908)

Browse Source
This commit is contained in:
MichalKinas
2024-07-03 15:29:00 +02:00
committed by GitHub
parent 41c3667906
commit 55dfc07a24
8 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/src/lib/document-list/components/document-list.component.html
View File

@@ -17,6 +17,7 @@
[allowFiltering]="allowFiltering"
[isResizingEnabled]="isResizingEnabled"
[blurOnResize]="blurOnResize"
[displayCheckboxesOnHover]="displayCheckboxesOnHover"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"

4
lib/content-services/src/lib/document-list/components/document-list.component.ts
View File

@@ -340,6 +340,10 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
@Input()
blurOnResize = true;
/** Display checkboxes in datatable rows on hover only */
@Input()
displayCheckboxesOnHover = false;
/** Emitted when the user clicks a list node */
@Output()
nodeClick = new EventEmitter<NodeEntityEvent>();

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

@@ -185,7 +185,8 @@
<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"
[class.adf-datatable-checkbox-selected]="row.isSelected"
[class.adf-datatable-hover-only]="displayCheckboxesOnHover"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
role="checkbox"

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

@@ -159,17 +159,15 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
align-items: center;
&:hover {
.adf-datatable-checkbox-cell {
&.adf-datatable-checkbox-single {
visibility: visible;
}
.adf-datatable-hover-only {
visibility: visible;
}
}
.adf-datatable-checkbox-single {
.adf-datatable-hover-only {
visibility: hidden;
&:has(.adf-datatable-checkbox-selected) {
&.adf-datatable-checkbox-selected {
visibility: visible;
}
}
@@ -453,6 +451,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 (max-width: 768px) {
.adf-desktop-only.adf-ellipsis-cell {
@@ -578,6 +578,7 @@ $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;
@@ -641,7 +642,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);

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

@@ -1329,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', () => {

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

@@ -238,6 +238,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>;