Add video miniature dropdown

3 files changed, 55 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 6999474d6..cc244dc76 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,9 +1,11 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement">
   <div
-    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
     ngbDropdownToggle role="button"
   >
-    <my-global-icon *ngIf="!label" class="more-icon" iconName="more-horizontal"></my-global-icon>
+    <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>
 
@@ -12,15 +14,24 @@
 
       <ng-container *ngFor="let action of actions">
         <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
-          <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
 
-          <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
+          <a *ngIf="action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
+            {{ action.label }}
+          </a>
+
+          <span
+            *ngIf="!action.linkBuilder" [ngClass]="{ 'with-icon': !!action.iconName }" (click)="action.handler(entry)"
+            class="custom-action dropdown-item" role="button"
+          >
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon>
             {{ action.label }}
           </span>
+
         </ng-container>
       </ng-container>
 
-      <div class="dropdown-divider"></div>
+      <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
 
     </ng-container>
   </div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 985b2ca88..5073190b0 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -8,12 +8,19 @@
 .action-button {
   @include peertube-button;
 
-  &.grey {
-    @include grey-button;
-  }
+  &.button-styled {
+
+    &.grey {
+      @include grey-button;
+    }
+
+    &.orange {
+      @include orange-button;
+    }
 
-  &.orange {
-    @include orange-button;
+    &:hover, &:active, &:focus {
+      background-color: $grey-background-color;
+    }
   }
 
   display: inline-block;
@@ -23,10 +30,6 @@
     display: none;
   }
 
-  &:hover, &:active, &:focus {
-    background-color: $grey-background-color;
-  }
-
   .more-icon {
     width: 21px;
   }
@@ -48,6 +51,10 @@
     cursor: pointer;
     color: #000 !important;
 
+    &.with-icon {
+      @include dropdown-with-icon-item;
+    }
+
     a, span {
       display: block;
       width: 100%;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 275e2b51e..f5345831b 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -1,12 +1,18 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 
 export type DropdownAction<T> = {
   label?: string
+  iconName?: GlobalIconName
   handler?: (a: T) => any
   linkBuilder?: (a: T) => (string | number)[]
   isDisplayed?: (a: T) => boolean
 }
 
+export type DropdownButtonSize = 'normal' | 'small'
+export type DropdownTheme = 'orange' | 'grey'
+export type DropdownDirection = 'horizontal' | 'vertical'
+
 @Component({
   selector: 'my-action-dropdown',
   styleUrls: [ './action-dropdown.component.scss' ],
@@ -16,14 +22,29 @@ export type DropdownAction<T> = {
 export class ActionDropdownComponent<T> {
   @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
   @Input() entry: T
+
   @Input() placement = 'bottom-left'
-  @Input() buttonSize: 'normal' | 'small' = 'normal'
+
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'horizontal'
+  @Input() buttonStyled = true
+
   @Input() label: string
-  @Input() theme: 'orange' | 'grey' = 'grey'
+  @Input() theme: DropdownTheme = 'grey'
 
   getActions () {
     if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
 
     return [ this.actions ]
   }
+
+  areActionsDisplayed (actions: DropdownAction<T>[], entry: T) {
+    return actions.some(a => a.isDisplayed === undefined || a.isDisplayed(entry))
+  }
+
+  handleClick (event: Event, action: DropdownAction<T>) {
+    event.preventDefault()
+
+    // action.handler(entry)
+  }
 }