Refactor button components

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / buttons / action-dropdown.component.html

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 8b363b351d3fbd893097fa006df91c6c32007355..10dae68f01c7e9b40c9407e00523592c87826a53 100644 (file)
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -1,7 +1,7 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   <button
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
-    ngbDropdownToggle role="button"
+    ngbDropdownToggle role="button" aria-label="Open actions" i18n-aria-label
   >
     <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
     <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
@@ -13,14 +13,14 @@
     <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>
 
             <div class="d-flex flex-column">
               <span i18n>{{ action.label }}</span>
-              <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
+              <small class="muted" *ngIf="action.description">{{ action.description }}</small>
             </div>
           </ng-template>
 
@@ -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>