aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/buttons
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-15 19:25:51 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-01-21 11:59:41 +0100
commit9b82d49da868536701d80ef1071df0e7cd301b7a (patch)
treed34997edf0157d390f44d367f6fd795e0d681760 /client/src/app/shared/buttons
parentc78d3db71baa397971a83b110c0159169646eae4 (diff)
downloadPeerTube-9b82d49da868536701d80ef1071df0e7cd301b7a.tar.gz
PeerTube-9b82d49da868536701d80ef1071df0e7cd301b7a.tar.zst
PeerTube-9b82d49da868536701d80ef1071df0e7cd301b7a.zip
Add action dropdown descriptions
Diffstat (limited to 'client/src/app/shared/buttons')
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html16
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss1
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.ts2
3 files changed, 14 insertions, 5 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 99e8b7ec1..54f5bf97c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -15,17 +15,23 @@
15 <ng-container *ngFor="let action of actions"> 15 <ng-container *ngFor="let action of actions">
16 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true"> 16 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
17 17
18 <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)"> 18 <ng-template #templateActionLabel let-action>
19 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon> 19 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
20 {{ action.label }} 20 <div class="d-flex flex-column">
21 <span i18n>{{ action.label }}</span>
22 <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
23 </div>
24 </ng-template>
25
26 <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''">
27 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
21 </a> 28 </a>
22 29
23 <span 30 <span
24 *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)" 31 *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
25 class="custom-action dropdown-item" role="button" 32 class="custom-action dropdown-item" role="button" [title]="action.title || ''"
26 > 33 >
27 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon> 34 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
28 {{ action.label }}
29 </span> 35 </span>
30 36
31 </ng-container> 37 </ng-container>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index e33aa8d24..442c90984 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -52,6 +52,7 @@
52 52
53.dropdown-menu { 53.dropdown-menu {
54 .dropdown-item { 54 .dropdown-item {
55 display: flex;
55 cursor: pointer; 56 cursor: pointer;
56 color: #000 !important; 57 color: #000 !important;
57 58
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 5330ca220..a8b3ab16c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -4,6 +4,8 @@ import { GlobalIconName } from '@app/shared/images/global-icon.component'
4export type DropdownAction<T> = { 4export type DropdownAction<T> = {
5 label?: string 5 label?: string
6 iconName?: GlobalIconName 6 iconName?: GlobalIconName
7 description?: string
8 title?: string
7 handler?: (a: T) => any 9 handler?: (a: T) => any
8 linkBuilder?: (a: T) => (string | number)[] 10 linkBuilder?: (a: T) => (string | number)[]
9 isDisplayed?: (a: T) => boolean 11 isDisplayed?: (a: T) => boolean