mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
Add new datatable param for checkboxes visibility (#9908)
This commit is contained in:
MichalKinas
GitHub
parent
41c3667906
commit
55dfc07a24
@ -66,6 +66,7 @@ Displays the documents from a repository.
|
||||
| contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
|
||||
| contextMenuActions | `boolean` | false | Toggles context menus for each row |
|
||||
| currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
|
||||
| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. |
|
||||
| emptyFolderImageUrl | `string` | | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
|
||||
| filterValue | `any` | | Initial value for filter. |
|
||||
| headerFilters | `boolean` | false | Toggles the header filters mode. |
|
||||
|
||||
@ -429,6 +429,8 @@ Learn more about styling your datatable: [Customizing the component's styles](#c
|
||||
| columns | `any[]` | \[] | The columns that the datatable will show. |
|
||||
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) | | Data source for the table |
|
||||
| displayCheckboxesOnHover | `boolean` | false | Enables checkboxes in datatable rows being displayed on hover only. |
|
||||
|
||||
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
|
||||
| isResizingEnabled | `boolean` | false | Flag that indicates if the datatable allows column resizing. |
|
||||
| loading | `boolean` | false | 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). |
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
[allowFiltering]="allowFiltering"
|
||||
[isResizingEnabled]="isResizingEnabled"
|
||||
[blurOnResize]="blurOnResize"
|
||||
[displayCheckboxesOnHover]="displayCheckboxesOnHover"
|
||||
(showRowContextMenu)="onShowRowContextMenu($event)"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)"
|
||||
|
||||
@ -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>();
|
||||
|
||||
@ -186,6 +186,7 @@
|
||||
<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"
|
||||
|
||||
@ -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 {
|
||||
.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);
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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>;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user