Add bulk actions in users table

3 files changed, 22 insertions, 4 deletions

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'
 }