aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/buttons
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/buttons')
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html23
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss17
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.ts4
3 files changed, 28 insertions, 16 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index c87ba4c82..8b7241379 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,16 +1,17 @@
1<div class="dropdown-root" dropdown container="body" dropup="true" placement="right" role="button"> 1<div class="dropdown-root" ngbDropdown [placement]="placement">
2 <div class="action-button" dropdownToggle> 2 <div class="action-button" ngbDropdownToggle role="button">
3 <span class="icon icon-action"></span> 3 <span class="icon icon-action"></span>
4 </div> 4 </div>
5 5
6 <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> 6 <div ngbDropdownMenu class="dropdown-menu">
7 <li role="menuitem" *ngFor="let action of actions"> 7 <ng-container *ngFor="let action of actions">
8 <my-delete-button *ngIf="action.type === 'delete'" [label]="action.label" (click)="action.handler(entry)"></my-delete-button> 8 <div class="dropdown-item" *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
9 <my-edit-button *ngIf="action.type === 'edit'" [label]="action.label" [routerLink]="action.linkBuilder(entry)"></my-edit-button> 9 <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
10 10
11 <a *ngIf="action.type === 'custom'" class="dropdown-item" href="#" (click)="action.handler(entry)"> 11 <span *ngIf="!action.linkBuilder" class="custom-action" class="dropdown-item" (click)="action.handler(entry)" role="button">
12 <span *ngIf="action.iconClass" class="icon" [ngClass]="action.iconClass"></span> <ng-container>{{ action.label }}</ng-container> 12 {{ action.label }}
13 </a> 13 </span>
14 </li> 14 </div>
15 </ul> 15 </ng-container>
16 </div>
16</div> \ No newline at end of file 17</div> \ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index cc459b972..615511093 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -5,17 +5,28 @@
5 @include peertube-button; 5 @include peertube-button;
6 @include grey-button; 6 @include grey-button;
7 7
8 display: inline-block;
9 padding: 0 10px;
10
11 &::after {
12 display: none;
13 }
14
8 &:hover, &:active, &:focus { 15 &:hover, &:active, &:focus {
9 background-color: $grey-color; 16 background-color: $grey-color;
10 } 17 }
11 18
12 display: inline-block;
13 padding: 0 10px;
14
15 .icon-action { 19 .icon-action {
16 @include icon(21px); 20 @include icon(21px);
17 21
18 background-image: url('../../../assets/images/video/more.svg'); 22 background-image: url('../../../assets/images/video/more.svg');
19 top: -1px; 23 top: -1px;
20 } 24 }
25}
26
27.dropdown-menu {
28 .dropdown-item {
29 cursor: pointer;
30 color: #000 !important;
31 }
21} \ No newline at end of file 32} \ No newline at end of file
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 407d24b80..17f9cc618 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -1,11 +1,10 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input } from '@angular/core'
2 2
3export type DropdownAction<T> = { 3export type DropdownAction<T> = {
4 type: 'custom' | 'delete' | 'edit'
5 label?: string 4 label?: string
6 handler?: (T) => any 5 handler?: (T) => any
7 linkBuilder?: (T) => (string | number)[] 6 linkBuilder?: (T) => (string | number)[]
8 iconClass?: string 7 isDisplayed?: (T) => boolean
9} 8}
10 9
11@Component({ 10@Component({
@@ -17,4 +16,5 @@ export type DropdownAction<T> = {
17export class ActionDropdownComponent<T> { 16export class ActionDropdownComponent<T> {
18 @Input() actions: DropdownAction<T>[] = [] 17 @Input() actions: DropdownAction<T>[] = []
19 @Input() entry: T 18 @Input() entry: T
19 @Input() placement = 'left'
20} 20}