4 files changed, 41 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 @@
-<div class="dropdown-root" dropdown container="body" dropup="true" placement="right" role="button">
-  <div class="action-button" dropdownToggle>
+<div class="dropdown-root" ngbDropdown [placement]="placement">
+  <div class="action-button" ngbDropdownToggle role="button">
     <span class="icon icon-action"></span>
   </div>
 
-  <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
-    <li role="menuitem" *ngFor="let action of actions">
-      <my-delete-button *ngIf="action.type === 'delete'" [label]="action.label" (click)="action.handler(entry)"></my-delete-button>
-      <my-edit-button *ngIf="action.type === 'edit'" [label]="action.label" [routerLink]="action.linkBuilder(entry)"></my-edit-button>
+  <div ngbDropdownMenu class="dropdown-menu">
+    <ng-container *ngFor="let action of actions">
+      <div class="dropdown-item" *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+        <a *ngIf="action.linkBuilder" class="dropdown-item" [routerLink]="action.linkBuilder(entry)">{{ action.label }}</a>
 
-      <a *ngIf="action.type === 'custom'" class="dropdown-item" href="#" (click)="action.handler(entry)">
-        <span *ngIf="action.iconClass" class="icon" [ngClass]="action.iconClass"></span> <ng-container>{{ action.label }}</ng-container>
-      </a>
-    </li>
-  </ul>
+        <span *ngIf="!action.linkBuilder" class="custom-action" class="dropdown-item" (click)="action.handler(entry)" role="button">
+          {{ action.label }}
+        </span>
+      </div>
+    </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 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 @@
   @include peertube-button;
   @include grey-button;
 
+  display: inline-block;
+  padding: 0 10px;
+
+  &::after {
+    display: none;
+  }
+
   &:hover, &:active, &:focus {
     background-color: $grey-color;
   }
 
-  display: inline-block;
-  padding: 0 10px;
-
   .icon-action {
     @include icon(21px);
 
     background-image: url('../../../assets/images/video/more.svg');
     top: -1px;
   }
+}
+
+.dropdown-menu {
+  .dropdown-item {
+    cursor: pointer;
+    color: #000 !important;
+  }
 }
\ 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 @@
 import { Component, Input } from '@angular/core'
 
 export type DropdownAction<T> = {
-  type: 'custom' | 'delete' | 'edit'
   label?: string
   handler?: (T) => any
   linkBuilder?: (T) => (string | number)[]
-  iconClass?: string
+  isDisplayed?: (T) => boolean
 }
 
 @Component({
@@ -17,4 +16,5 @@ export type DropdownAction<T> = {
 export class ActionDropdownComponent<T> {
   @Input() actions: DropdownAction<T>[] = []
   @Input() entry: T
+  @Input() placement = 'left'
 }
diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts
index 5edae2e38..ec9566ef3 100644
--- a/client/src/app/shared/forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts
@@ -14,6 +14,8 @@ export class UserValidatorsService {
   readonly USER_DESCRIPTION: BuildFormValidator
   readonly USER_TERMS: BuildFormValidator
 
+  readonly USER_BAN_REASON: BuildFormValidator
+
   constructor (private i18n: I18n) {
 
     this.USER_USERNAME = {
@@ -99,5 +101,16 @@ export class UserValidatorsService {
         'required': this.i18n('You must to agree with the instance terms in order to registering on it.')
       }
     }
+
+    this.USER_BAN_REASON = {
+      VALIDATORS: [
+        Validators.minLength(3),
+        Validators.maxLength(250)
+      ],
+      MESSAGES: {
+        'minlength': this.i18n('Ban reason must be at least 3 characters long.'),
+        'maxlength': this.i18n('Ban reason cannot be more than 250 characters long.')
+      }
+    }
   }
 }