Add action dropdown descriptions

3 files changed, 14 insertions, 5 deletions

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 99e8b7ec1..54f5bf97c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -15,17 +15,23 @@
       <ng-container *ngFor="let action of actions">
         <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
 
-          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">
+          <ng-template #templateActionLabel let-action>
             <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
-            {{ action.label }}
+            <div class="d-flex flex-column">
+              <span i18n>{{ action.label }}</span>
+              <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
+            </div>
+          </ng-template>
+
+          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''">
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </a>
 
           <span
             *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
-            class="custom-action dropdown-item" role="button"
+            class="custom-action dropdown-item" role="button" [title]="action.title || ''"
           >
-            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
-            {{ action.label }}
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </span>
 
         </ng-container>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index e33aa8d24..442c90984 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -52,6 +52,7 @@
 
 .dropdown-menu {
   .dropdown-item {
+    display: flex;
     cursor: pointer;
     color: #000 !important;
 
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 5330ca220..a8b3ab16c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -4,6 +4,8 @@ import { GlobalIconName } from '@app/shared/images/global-icon.component'
 export type DropdownAction<T> = {
   label?: string
   iconName?: GlobalIconName
+  description?: string
+  title?: string
   handler?: (a: T) => any
   linkBuilder?: (a: T) => (string | number)[]
   isDisplayed?: (a: T) => boolean