add scope tags and aria-labels to instance table (#2866)

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

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index c87ba4c82f8b3d4a84b692a562b189bc28b7ffc1..952b3b6f80b93769b02cd0ef72f0b358c51ae471 100644 (file)
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,16 +1,55 @@
-<div class="dropdown-root" dropdown container="body" dropup="true" placement="right" role="button">
-  <div class="action-button" dropdownToggle>
-    <span class="icon icon-action"></span>
+<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
+  <div
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
+    ngbDropdownToggle role="button"
+  >
+    <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>
+
+    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
-  <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
-    <li role="menuitem" *ngFor="let action of actions">
-      <my-delete-button *ngIf="action.type === 'delete'" [label]="action.label" (click)="action.handler(entry)"></my-delete-button>
-      <my-edit-button *ngIf="action.type === 'edit'" [label]="action.label" [routerLink]="action.linkBuilder(entry)"></my-edit-button>
-
-      <a *ngIf="action.type === 'custom'" class="dropdown-item" href="#" (click)="action.handler(entry)">
-        <span *ngIf="action.iconClass" class="icon" [ngClass]="action.iconClass"></span> <ng-container>{{ action.label }}</ng-container>
-      </a>
-    </li>
-  </ul>
-</div>
\ No newline at end of file
+  <div ngbDropdownMenu class="dropdown-menu">
+    <ng-container *ngFor="let actions of getActions()">
+
+      <ng-container *ngFor="let action of actions">
+        <ng-container *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"></my-global-icon>
+
+            <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 && !action.isHeader" [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 && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="custom-action dropdown-item" role="button" [title]="action.title || ''" (click)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </span>
+
+          <h6
+            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-header" role="button" [title]="action.title || ''" (click)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </h6>
+
+        </ng-container>
+      </ng-container>
+
+      <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
+
+    </ng-container>
+  </div>
+</div>