From 6b047428a40f3a576699b5493e5eda6223ee8593 Mon Sep 17 00:00:00 2001
From: Thomas Hunter <thomas.hunter@alfresco.com>
Date: Mon, 21 Jun 2021 15:52:15 +0100
Subject: [PATCH 1/3] [AAE-5362] Add option to make actions button visible only
 on hover

---
 docs/core/components/datatable.component.md               | 1 +
 .../components/datatable/datatable.component.html         | 6 ++++--
 .../components/datatable/datatable.component.scss         | 8 ++++++++
 .../datatable/components/datatable/datatable.component.ts | 4 ++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md
index 94a0085e5af..b489738260c 100644
--- 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/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index e39cf4e49d7..e6989ae1b10 100644
--- 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" #matMenuTrigger="matMenuTrigger"
+                            [ngClass]="{'adf-datatable-hide-actions-without-hover': actionsVisibleOnHover && !matMenuTrigger.menuOpen}"
                             [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" #matMenuTrigger="matMenuTrigger"
+                            [ngClass]="{'adf-datatable-hide-actions-without-hover': actionsVisibleOnHover && !matMenuTrigger.menuOpen}"
                             [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
index ba4e4403b8d..f4adf1baf92 100644
--- 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
index 587c0945c68..a38692df969 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -103,6 +103,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;

From 04340e26166be48af756ca8efe4eef0000944118 Mon Sep 17 00:00:00 2001
From: Thomas Hunter <thomas.hunter@alfresco.com>
Date: Tue, 22 Jun 2021 13:48:32 +0100
Subject: [PATCH 2/3] [AAE-5362] Refactor

---
 .../components/datatable/datatable.component.html         | 8 ++++----
 .../datatable/components/datatable/datatable.component.ts | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index e6989ae1b10..41d8e261517 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -72,8 +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" #matMenuTrigger="matMenuTrigger"
-                            [ngClass]="{'adf-datatable-hide-actions-without-hover': actionsVisibleOnHover && !matMenuTrigger.menuOpen}"
+                    <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">
@@ -210,8 +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" #matMenuTrigger="matMenuTrigger"
-                            [ngClass]="{'adf-datatable-hide-actions-without-hover': actionsVisibleOnHover && !matMenuTrigger.menuOpen}"
+                    <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.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index a38692df969..82eb152d3d7 100644
--- 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';
@@ -680,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;
     }

From 731f583be3c7f17a494cfa8b648762a0d89f2c3a Mon Sep 17 00:00:00 2001
From: Thomas Hunter <thomas.hunter@alfresco.com>
Date: Tue, 22 Jun 2021 14:05:44 +0100
Subject: [PATCH 3/3] Unrelated linting fixes

---
 .../content-metadata/content-metadata.component.spec.ts     | 6 +++---
 .../src/lib/site-dropdown/sites-dropdown.component.spec.ts  | 2 +-
 lib/core/comments/comments.component.spec.ts                | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
index b03c8990ddd..acb1a883b57 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
+++ b/lib/content-services/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
index 1b180ce64ea..aa7cdc7fb98 100644
--- 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
index 8035a3cfe04..71fe0ea2e12 100644
--- 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();
     });