From 791645e620fb98c6e7c32271d91d91ff7e41b892 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 8 Oct 2018 15:15:11 +0200
Subject: Add bulk actions in users table

---
 .../src/app/shared/buttons/action-dropdown.component.html  |  8 ++++++--
 .../src/app/shared/buttons/action-dropdown.component.scss  | 14 +++++++++++++-
 client/src/app/shared/buttons/action-dropdown.component.ts |  4 +++-
 3 files changed, 22 insertions(+), 4 deletions(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 8110e2515..111627424 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,6 +1,10 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement">
-  <div class="action-button" [ngClass]="{ small: buttonSize === 'small' }" ngbDropdownToggle role="button">
-    <span class="icon icon-action"></span>
+  <div
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
+    ngbDropdownToggle role="button"
+  >
+    <span *ngIf="!label" class="icon icon-action"></span>
+    <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
   <div ngbDropdownMenu class="dropdown-menu">
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 00f120fb8..0a9aa7b04 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -3,7 +3,14 @@
 
 .action-button {
   @include peertube-button;
-  @include grey-button;
+
+  &.grey {
+    @include grey-button;
+  }
+
+  &.orange {
+    @include orange-button;
+  }
 
   display: inline-block;
   padding: 0 10px;
@@ -30,6 +37,11 @@
   }
 }
 
+.dropdown-toggle::after {
+  position: relative;
+  top: 1px;
+}
+
 .dropdown-menu {
   .dropdown-item {
     cursor: pointer;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 1838ff697..022ab5ee8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -16,6 +16,8 @@ export type DropdownAction<T> = {
 export class ActionDropdownComponent<T> {
   @Input() actions: DropdownAction<T>[] = []
   @Input() entry: T
-  @Input() placement = 'left'
+  @Input() placement = 'bottom-left'
   @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() label: string
+  @Input() theme: 'orange' | 'grey' = 'grey'
 }
-- 
cgit v1.2.3


From af5767ffae41b2d5604e41ba9a7225c623dd6735 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 12 Oct 2018 17:26:40 +0200
Subject: Add user/instance block by users in the client

---
 client/src/app/shared/buttons/action-dropdown.component.html | 6 +++---
 client/src/app/shared/buttons/action-dropdown.component.scss | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 111627424..48230d6d8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -9,13 +9,13 @@
 
   <div ngbDropdownMenu class="dropdown-menu">
     <ng-container *ngFor="let action of actions">
-      <div class="dropdown-item" *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+      <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" class="dropdown-item" (click)="action.handler(entry)" role="button">
+        <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
           {{ action.label }}
         </span>
-      </div>
+      </ng-container>
     </ng-container>
   </div>
 </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 0a9aa7b04..92c4d1d2c 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -46,5 +46,10 @@
   .dropdown-item {
     cursor: pointer;
     color: #000 !important;
+
+    a, span {
+      display: block;
+      width: 100%;
+    }
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 244b4ae3973bc1511464a08158a123767f83179c Mon Sep 17 00:00:00 2001
From: BO41 <lukasw41@gmail.com>
Date: Thu, 18 Oct 2018 09:08:59 +0200
Subject: NoImplicitAny flag true (#1157)

this enables the `noImplicitAny` flag in the Typescript compiler

> When the noImplicitAny flag is true and the TypeScript compiler cannot infer the type, it still generates the JavaScript files, but it also reports an error. Many seasoned developers prefer this stricter setting because type checking catches more unintentional errors at compile time.

closes: #1131
replaces #1137
---
 client/src/app/shared/buttons/action-dropdown.component.ts | 6 +++---
 client/src/app/shared/buttons/button.component.ts          | 6 +++---
 client/src/app/shared/buttons/edit-button.component.ts     | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 022ab5ee8..9877f639d 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -2,9 +2,9 @@ import { Component, Input } from '@angular/core'
 
 export type DropdownAction<T> = {
   label?: string
-  handler?: (T) => any
-  linkBuilder?: (T) => (string | number)[]
-  isDisplayed?: (T) => boolean
+  handler?: (T: any) => any
+  linkBuilder?: (T: any) => (string | number)[]
+  isDisplayed?: (T: any) => boolean
 }
 
 @Component({
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index 967cb1409..cccf98bc3 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -8,9 +8,9 @@ import { Component, Input } from '@angular/core'
 
 export class ButtonComponent {
   @Input() label = ''
-  @Input() className = undefined
-  @Input() icon = undefined
-  @Input() title = undefined
+  @Input() className: any = undefined
+  @Input() icon: any = undefined
+  @Input() title: any = undefined
 
   getTitle () {
     return this.title || this.label
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index 7abaacc26..ea552663a 100644
--- a/client/src/app/shared/buttons/edit-button.component.ts
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -8,5 +8,5 @@ import { Component, Input } from '@angular/core'
 
 export class EditButtonComponent {
   @Input() label: string
-  @Input() routerLink = []
+  @Input() routerLink: any = []
 }
-- 
cgit v1.2.3


From c199c427d4ae586339822320f20f512a7a19dc3f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 18 Oct 2018 14:35:31 +0200
Subject: Better typings

---
 client/src/app/shared/buttons/action-dropdown.component.ts | 6 +++---
 client/src/app/shared/buttons/button.component.ts          | 6 +++---
 client/src/app/shared/buttons/edit-button.component.ts     | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 9877f639d..d8026ef41 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -2,9 +2,9 @@ import { Component, Input } from '@angular/core'
 
 export type DropdownAction<T> = {
   label?: string
-  handler?: (T: any) => any
-  linkBuilder?: (T: any) => (string | number)[]
-  isDisplayed?: (T: any) => boolean
+  handler?: (a: T) => any
+  linkBuilder?: (a: T) => (string | number)[]
+  isDisplayed?: (a: T) => boolean
 }
 
 @Component({
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index cccf98bc3..1a1162f09 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -8,9 +8,9 @@ import { Component, Input } from '@angular/core'
 
 export class ButtonComponent {
   @Input() label = ''
-  @Input() className: any = undefined
-  @Input() icon: any = undefined
-  @Input() title: any = undefined
+  @Input() className: string = undefined
+  @Input() icon: string = undefined
+  @Input() title: string = undefined
 
   getTitle () {
     return this.title || this.label
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index ea552663a..1fe4f7b30 100644
--- a/client/src/app/shared/buttons/edit-button.component.ts
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -8,5 +8,5 @@ import { Component, Input } from '@angular/core'
 
 export class EditButtonComponent {
   @Input() label: string
-  @Input() routerLink: any = []
+  @Input() routerLink: string[] = []
 }
-- 
cgit v1.2.3


From f97c91f7ec4afc26ab790fbefa63d11b3060f40f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 21 Nov 2018 17:05:31 +0100
Subject: Add separators in user moderation dropdown

---
 .../shared/buttons/action-dropdown.component.html    | 20 +++++++++++++-------
 .../shared/buttons/action-dropdown.component.scss    |  6 +++++-
 .../app/shared/buttons/action-dropdown.component.ts  |  8 +++++++-
 3 files changed, 25 insertions(+), 9 deletions(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 48230d6d8..90651f217 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -8,14 +8,20 @@
   </div>
 
   <div ngbDropdownMenu class="dropdown-menu">
-    <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>
+    <ng-container *ngFor="let actions of getActions()">
 
-        <span *ngIf="!action.linkBuilder" class="custom-action dropdown-item" (click)="action.handler(entry)" role="button">
-          {{ action.label }}
-        </span>
+      <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">
+            {{ action.label }}
+          </span>
+        </ng-container>
       </ng-container>
+
+      <div class="dropdown-divider"></div>
+
     </ng-container>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 92c4d1d2c..a4fcceeee 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -1,6 +1,10 @@
 @import '_variables';
 @import '_mixins';
 
+.dropdown-divider:last-child {
+  display: none;
+}
+
 .action-button {
   @include peertube-button;
 
@@ -52,4 +56,4 @@
       width: 100%;
     }
   }
-}
\ 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 d8026ef41..275e2b51e 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -14,10 +14,16 @@ export type DropdownAction<T> = {
 })
 
 export class ActionDropdownComponent<T> {
-  @Input() actions: DropdownAction<T>[] = []
+  @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
   @Input() entry: T
   @Input() placement = 'bottom-left'
   @Input() buttonSize: 'normal' | 'small' = 'normal'
   @Input() label: string
   @Input() theme: 'orange' | 'grey' = 'grey'
+
+  getActions () {
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+
+    return [ this.actions ]
+  }
 }
-- 
cgit v1.2.3


From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 16 Jan 2019 16:05:40 +0100
Subject: Refactor how we use icons

Inject them in an angular component so we can easily change their color
---
 .../shared/buttons/action-dropdown.component.html  |  2 +-
 .../shared/buttons/action-dropdown.component.scss  |  9 ++----
 .../src/app/shared/buttons/button.component.html   |  2 +-
 .../src/app/shared/buttons/button.component.scss   | 34 ++++------------------
 client/src/app/shared/buttons/button.component.ts  |  3 +-
 .../shared/buttons/delete-button.component.html    |  2 +-
 .../app/shared/buttons/edit-button.component.html  |  2 +-
 7 files changed, 15 insertions(+), 39 deletions(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 90651f217..114b1d71f 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -3,7 +3,7 @@
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
     ngbDropdownToggle role="button"
   >
-    <span *ngIf="!label" class="icon icon-action"></span>
+    <my-global-icon *ngIf="!label" class="more-icon" iconName="more"></my-global-icon>
     <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
   </div>
 
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index a4fcceeee..985b2ca88 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -24,14 +24,11 @@
   }
 
   &:hover, &:active, &:focus {
-    background-color: $grey-color;
+    background-color: $grey-background-color;
   }
 
-  .icon-action {
-    @include icon(21px);
-
-    background-image: url('../../../assets/images/video/more.svg');
-    top: -1px;
+  .more-icon {
+    width: 21px;
   }
 
   &.small {
diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
index 87a8daccf..b6df67102 100644
--- a/client/src/app/shared/buttons/button.component.html
+++ b/client/src/app/shared/buttons/button.component.html
@@ -1,4 +1,4 @@
 <span class="action-button" [ngClass]="className" [title]="getTitle()">
-  <span class="icon" [ngClass]="icon"></span>
+  <my-global-icon [iconName]="icon"></my-global-icon>
   <span class="button-label">{{ label }}</span>
 </span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 168102f09..be41669cd 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -3,41 +3,19 @@
 
 .action-button {
   @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
 
   font-size: 15px;
   font-weight: $font-semibold;
-  color: #585858;
-  background-color: #E5E5E5;
+  color: $grey-foreground-color;
+  background-color: $grey-background-color;
 
   &:hover {
-    background-color: #EFEFEF;
+    background-color: $grey-background-hover-color;
   }
 
-  .icon {
-    @include icon(21px);
-
-    position: relative;
-    top: -2px;
-
-    &.icon-edit {
-      background-image: url('../../../assets/images/global/edit-grey.svg');
-    }
-
-    &.icon-delete-grey {
-      background-image: url('../../../assets/images/global/delete-grey.svg');
-    }
-
-    &.icon-im-with-her {
-      background-image: url('../../../assets/images/global/im-with-her.svg');
-    }
-
-    &.icon-tick {
-      background-image: url('../../../assets/images/global/tick.svg');
-    }
-
-    &.icon-cross {
-      background-image: url('../../../assets/images/global/cross.svg');
-    }
+  my-global-icon {
+    @include apply-svg-color($grey-foreground-color);
   }
 }
 
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index 1a1162f09..a91e9c7eb 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/icons/global-icon.component'
 
 @Component({
   selector: 'my-button',
@@ -9,7 +10,7 @@ import { Component, Input } from '@angular/core'
 export class ButtonComponent {
   @Input() label = ''
   @Input() className: string = undefined
-  @Input() icon: string = undefined
+  @Input() icon: GlobalIconName = undefined
   @Input() title: string = undefined
 
   getTitle () {
diff --git a/client/src/app/shared/buttons/delete-button.component.html b/client/src/app/shared/buttons/delete-button.component.html
index 6c55d8104..4d12a84c0 100644
--- a/client/src/app/shared/buttons/delete-button.component.html
+++ b/client/src/app/shared/buttons/delete-button.component.html
@@ -1,5 +1,5 @@
 <span class="action-button action-button-delete" [title]="getTitle()" role="button">
-  <span class="icon icon-delete-grey"></span>
+  <my-global-icon iconName="delete"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span class="button-label" i18n *ngIf="!label">Delete</span>
diff --git a/client/src/app/shared/buttons/edit-button.component.html b/client/src/app/shared/buttons/edit-button.component.html
index cecb780f3..da3addbae 100644
--- a/client/src/app/shared/buttons/edit-button.component.html
+++ b/client/src/app/shared/buttons/edit-button.component.html
@@ -1,5 +1,5 @@
 <a class="action-button action-button-edit" [routerLink]="routerLink" i18n-title title="Edit">
-  <span class="icon icon-edit"></span>
+  <my-global-icon iconName="edit"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
   <span i18n class="button-label" *ngIf="!label">Edit</span>
-- 
cgit v1.2.3


From 17bb716bc49b30cc8f22e32f73b9b53ab9ae560d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 17 Jan 2019 11:16:08 +0100
Subject: Fix some styles

Video edit tags, dropdown actions font ...
---
 client/src/app/shared/buttons/button.component.scss | 1 -
 1 file changed, 1 deletion(-)

(limited to 'client/src/app/shared/buttons')

diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index be41669cd..04199a2a9 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -5,7 +5,6 @@
   @include peertube-button-link;
   @include button-with-icon(21px, 0, -2px);
 
-  font-size: 15px;
   font-weight: $font-semibold;
   color: $grey-foreground-color;
   background-color: $grey-background-color;
-- 
cgit v1.2.3