Improve moderation dropdown UX

2 files changed, 4 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index d0487f0b8..c465b6903 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -13,7 +13,7 @@
     <ng-container *ngFor="let actions of getActions()">
 
       <ng-container *ngFor="let action of actions">
-        <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+        <div [ngClass]="action.class" *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
 
           <ng-template #templateActionLabel let-action>
             <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
@@ -45,7 +45,7 @@
             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
           </h6>
 
-        </ng-container>
+        </div>
       </ng-container>
 
       <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 36d7d6229..67ac6e1aa 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -9,6 +9,8 @@ export type DropdownAction<T> = {
   handler?: (a: T) => any
   linkBuilder?: (a: T) => (string | number)[]
   isDisplayed?: (a: T) => boolean
+
+  class?: string[]
   isHeader?: boolean
 }