Provide z-index centralisation for lower components
[oweals/peertube.git] / client / src / app / shared / buttons / action-dropdown.component.html
1 <div class="dropdown-root" ngbDropdown [placement]="placement" *ngIf="areActionsDisplayed(actions, entry)">
2   <div
3     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
4     ngbDropdownToggle role="button"
5   >
6     <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
7     <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
8
9     <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
10   </div>
11
12   <div ngbDropdownMenu class="dropdown-menu">
13     <ng-container *ngFor="let actions of getActions()">
14
15       <ng-container *ngFor="let action of actions">
16         <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
17
18           <ng-template #templateActionLabel let-action>
19             <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
20
21             <div class="d-flex flex-column">
22               <span i18n>{{ action.label }}</span>
23               <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
24             </div>
25           </ng-template>
26
27           <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''">
28             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
29           </a>
30
31           <span
32             *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
33             class="custom-action dropdown-item" role="button" [title]="action.title || ''"
34           >
35             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
36           </span>
37
38         </ng-container>
39       </ng-container>
40
41       <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
42
43     </ng-container>
44   </div>
45 </div>