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

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;
}