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

[AAE-5362] Add option to make actions button visible only on hover (#7117)

Browse Source 
* [AAE-5362] Add option to make actions button visible only on hover

* [AAE-5362] Refactor

* Unrelated linting fixes
This commit is contained in:
Thomas Hunter
2021-06-22 17:28:38 +02:00
committed by GitHub
parent b5e4316c08
commit e2b8557f4b
7 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/core/components/datatable.component.md
View File

@@ -346,6 +346,7 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
| ---- | ---- | ------------- | ----------- |
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| actionsVisibleOnHover | `boolean` | false | If set to true, the actions button will only be visible on row hover. |
| allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use facet [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) search for filtering. |
| columns | `any[]` | \[] | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |

6
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
View File

@@ -407,7 +407,7 @@ describe('ContentMetadataComponent', () => {
component.displayEmpty = true;
fixture.detectChanges();
await fixture.whenStable()
await fixture.whenStable();
let defaultProp = queryDom(fixture);
let exifProp = queryDom(fixture, 'EXIF');
@@ -419,7 +419,7 @@ describe('ContentMetadataComponent', () => {
component.displayAspect = 'CUSTOM';
fixture.detectChanges();
await fixture.whenStable()
await fixture.whenStable();
defaultProp = queryDom(fixture);
exifProp = queryDom(fixture, 'EXIF');
@@ -431,7 +431,7 @@ describe('ContentMetadataComponent', () => {
component.displayAspect = 'Properties';
fixture.detectChanges();
await fixture.whenStable()
await fixture.whenStable();
defaultProp = queryDom(fixture);
exifProp = queryDom(fixture, 'EXIF');

2
lib/content-services/src/lib/site-dropdown/sites-dropdown.component.spec.ts
View File

@@ -188,7 +188,7 @@ describe('DropdownSitesComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
let options = debug.queryAll(By.css('mat-option'));
const options = debug.queryAll(By.css('mat-option'));
options[0].triggerEventHandler('click', null);
fixture.detectChanges();

6
lib/core/comments/comments.component.spec.ts
View File

@@ -135,7 +135,7 @@ describe('CommentsComponent', () => {
getProcessCommentsSpy.and.returnValue(of([]));
fixture.detectChanges();
await fixture.whenStable()
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('#comment-container')).toBeNull();
});
@@ -145,7 +145,7 @@ describe('CommentsComponent', () => {
component.ngOnChanges({'taskId': change});
fixture.detectChanges();
await fixture.whenStable()
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('#comment-input')).not.toBeNull();
});
@@ -154,7 +154,7 @@ describe('CommentsComponent', () => {
component.readOnly = true;
fixture.detectChanges();
await fixture.whenStable()
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull();
});

6
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -72,7 +72,8 @@
[attr.data-automation-id]="'datatable-row-' + idx">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
<button mat-icon-button [matMenuTriggerFor]="menu"
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_left_' + idx"
[attr.data-automation-id]="'action_menu_' + idx">
@@ -209,7 +210,8 @@
<div *ngIf="actions && actionsPosition === 'right'"
role="gridcell"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie">
<button mat-icon-button [matMenuTriggerFor]="menu"
<button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
[ngClass]="getHideActionsWithoutHoverClass(actionsMenuTrigger)"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_right_' + idx"

8
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -149,6 +149,10 @@
top: 4px;
}
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
display: none;
}
.adf-image-table-cell {
margin: 8px;
padding: 4px;
@@ -439,6 +443,10 @@
display: flex;
}
.adf-datatable-row:not(:hover) .adf-datatable-hide-actions-without-hover {
display: none;
}
.adf-datatable-cell--image {
max-width: $data-table-thumbnail-width;
}

9
lib/core/datatable/components/datatable/datatable.component.ts
View File

@@ -22,6 +22,7 @@ import {
} from '@angular/core';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatMenuTrigger } from '@angular/material/menu';
import { Subscription, Observable, Observer } from 'rxjs';
import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
import { DataColumn } from '../../data/data-column.model';
@@ -103,6 +104,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
@Input()
actionsPosition: string = 'right'; // left|right
/** Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open. */
@Input()
actionsVisibleOnHover: boolean = false;
/** Fallback image for rows where the thumbnail is missing. */
@Input()
fallbackThumbnail: string;
@@ -676,6 +681,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
}
}
getHideActionsWithoutHoverClass(actionsMenuTrigger: MatMenuTrigger) {
return { 'adf-datatable-hide-actions-without-hover': this.actionsVisibleOnHover && !actionsMenuTrigger.menuOpen };
}
rowAllowsDrop(row: DataRow): boolean {
return row.isDropTarget === true;
}