client/src/app/shared/buttons/action-dropdown.component.html

   1 <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   2   <button
   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 </button>
  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" aria-hidden="true"></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
  28             *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
  29             class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''"
  30           >
  31             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
  32           </a>
  33
  34           <span
  35             *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
  36             class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
  37           >
  38             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
  39           </span>
  40
  41           <h6
  42             *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
  43             class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
  44           >
  45             <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
  46           </h6>
  47
  48         </ng-container>
  49       </ng-container>
  50
  51       <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
  52
  53     </ng-container>
  54   </div>
  55 </div>