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

…7117) * [AAE-5362] Add option to make actions button visible only on hover * [AAE-5362] Refactor * Unrelated linting fixes
Alfresco · Jun 22, 2021 · e2b8557 · e2b8557
1 parent b5e4316
commit e2b8557
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 9 deletions.
diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md
@@ -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. |

diff --git a/...s/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/...s/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
@@ -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');

diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.spec.ts b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.spec.ts
@@ -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();

diff --git a/lib/core/comments/comments.component.spec.ts b/lib/core/comments/comments.component.spec.ts
@@ -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();
     });

diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
@@ -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"

diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -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;
         }

diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -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;
     }