From 67ed6552b831df66713bac9e672738796128d33f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 23 Jun 2020 14:10:17 +0200
Subject: Reorganize client shared modules

---
 .../buttons/action-dropdown.component.html         | 55 +++++++++++++++++
 .../buttons/action-dropdown.component.scss         | 72 ++++++++++++++++++++++
 .../buttons/action-dropdown.component.ts           | 52 ++++++++++++++++
 .../shared-main/buttons/button.component.html      |  6 ++
 .../shared-main/buttons/button.component.scss      | 46 ++++++++++++++
 .../shared/shared-main/buttons/button.component.ts | 20 ++++++
 .../buttons/delete-button.component.html           |  6 ++
 .../shared-main/buttons/delete-button.component.ts | 20 ++++++
 .../shared-main/buttons/edit-button.component.html |  6 ++
 .../shared-main/buttons/edit-button.component.ts   | 12 ++++
 client/src/app/shared/shared-main/buttons/index.ts |  4 ++
 11 files changed, 299 insertions(+)
 create mode 100644 client/src/app/shared/shared-main/buttons/action-dropdown.component.html
 create mode 100644 client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
 create mode 100644 client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
 create mode 100644 client/src/app/shared/shared-main/buttons/button.component.html
 create mode 100644 client/src/app/shared/shared-main/buttons/button.component.scss
 create mode 100644 client/src/app/shared/shared-main/buttons/button.component.ts
 create mode 100644 client/src/app/shared/shared-main/buttons/delete-button.component.html
 create mode 100644 client/src/app/shared/shared-main/buttons/delete-button.component.ts
 create mode 100644 client/src/app/shared/shared-main/buttons/edit-button.component.html
 create mode 100644 client/src/app/shared/shared-main/buttons/edit-button.component.ts
 create mode 100644 client/src/app/shared/shared-main/buttons/index.ts

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

diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
new file mode 100644
index 000000000..12933d4ca
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -0,0 +1,55 @@
+<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
+  <button
+    class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
+    ngbDropdownToggle role="button"
+  >
+    <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>
+</button>
+
+  <div ngbDropdownMenu class="dropdown-menu">
+    <ng-container *ngFor="let actions of getActions()">
+
+      <ng-container *ngFor="let action of actions">
+        <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
+
+          <ng-template #templateActionLabel let-action>
+            <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
+
+            <div class="d-flex flex-column">
+              <span i18n>{{ action.label }}</span>
+              <small class="text-muted" *ngIf="action.description">{{ action.description }}</small>
+            </div>
+          </ng-template>
+
+          <a
+            *ngIf="action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-item"  [routerLink]="action.linkBuilder(entry)" [title]="action.title || ''"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </a>
+
+          <span
+            *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </span>
+
+          <h6
+            *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
+            class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
+          >
+            <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
+          </h6>
+
+        </ng-container>
+      </ng-container>
+
+      <div *ngIf="areActionsDisplayed(actions, entry)" class="dropdown-divider"></div>
+
+    </ng-container>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
new file mode 100644
index 000000000..724a04efc
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -0,0 +1,72 @@
+@import '_variables';
+@import '_mixins';
+
+.dropdown-divider:last-child {
+  display: none;
+}
+
+.action-button {
+  @include peertube-button;
+
+  &.button-styled {
+
+    &.grey {
+      @include grey-button;
+    }
+
+    &.orange {
+      @include orange-button;
+    }
+
+    &:hover, &:active, &:focus {
+      background-color: $grey-background-color;
+    }
+  }
+
+  display: inline-block;
+  padding: 0 10px;
+
+  &::after {
+    display: none;
+  }
+
+  .more-icon {
+    width: 21px;
+
+    ::ng-deep {
+      @include apply-svg-color(pvar(--actionButtonColor));
+    }
+  }
+
+  &.small {
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.dropdown-toggle::after {
+  position: relative;
+  top: 1px;
+}
+
+.dropdown-menu {
+  .dropdown-header {
+    padding: 0.2rem 1rem;
+  }
+
+  .dropdown-item {
+    display: flex;
+    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/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
new file mode 100644
index 000000000..36d7d6229
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+
+export type DropdownAction<T> = {
+  label?: string
+  iconName?: GlobalIconName
+  description?: string
+  title?: string
+  handler?: (a: T) => any
+  linkBuilder?: (a: T) => (string | number)[]
+  isDisplayed?: (a: T) => boolean
+  isHeader?: 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' ],
+  templateUrl: './action-dropdown.component.html'
+})
+
+export class ActionDropdownComponent<T> {
+  @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
+  @Input() entry: T
+
+  @Input() placement = 'bottom-left auto'
+  @Input() container: null | 'body'
+
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'horizontal'
+  @Input() buttonStyled = true
+
+  @Input() label: string
+  @Input() theme: DropdownTheme = 'grey'
+
+  getActions (): DropdownAction<T>[][] {
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
+
+    return [ this.actions as DropdownAction<T>[] ]
+  }
+
+  areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
+    return actions.some(a => {
+      if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
+
+      return a.isDisplayed === undefined || a.isDisplayed(entry)
+    })
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
new file mode 100644
index 000000000..d2b0eb81a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -0,0 +1,6 @@
+<span class="action-button" [ngClass]="className" [title]="getTitle()">
+  <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
+  <my-small-loader [loading]="loading"></my-small-loader>
+
+  <span class="button-label">{{ label }}</span>
+</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
new file mode 100644
index 000000000..3ccfefd7e
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -0,0 +1,46 @@
+@import '_variables';
+@import '_mixins';
+
+my-small-loader ::ng-deep .root {
+  display: inline-block;
+  margin: 0 3px 0 0;
+  width: 20px;
+}
+
+.action-button {
+  @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
+}
+
+.orange-button {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
+}
+
+// In a table, try to minimize the space taken by this button
+@media screen and (max-width: 1400px) {
+  :host-context(td) {
+    .action-button {
+      padding: 0 13px;
+    }
+
+    .button-label {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
new file mode 100644
index 000000000..e23b90945
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+
+@Component({
+  selector: 'my-button',
+  styleUrls: ['./button.component.scss'],
+  templateUrl: './button.component.html'
+})
+
+export class ButtonComponent {
+  @Input() label = ''
+  @Input() className = 'grey-button'
+  @Input() icon: GlobalIconName = undefined
+  @Input() title: string = undefined
+  @Input() loading = false
+
+  getTitle () {
+    return this.title || this.label
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.html b/client/src/app/shared/shared-main/buttons/delete-button.component.html
new file mode 100644
index 000000000..398b6db1e
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -0,0 +1,6 @@
+<span class="action-button action-button-delete grey-button" [title]="title" role="button">
+  <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span class="button-label" i18n *ngIf="!label">Delete</span>
+</span>
diff --git a/client/src/app/shared/shared-main/buttons/delete-button.component.ts b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
new file mode 100644
index 000000000..39e31900f
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-delete-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './delete-button.component.html'
+})
+
+export class DeleteButtonComponent implements OnInit {
+  @Input() label: string
+
+  title: string
+
+  constructor (private i18n: I18n) { }
+
+  ngOnInit () {
+    this.title = this.label || this.i18n('Delete')
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.html b/client/src/app/shared/shared-main/buttons/edit-button.component.html
new file mode 100644
index 000000000..b852bb38a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -0,0 +1,6 @@
+<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" i18n-title title="Edit">
+  <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
+
+  <span class="button-label" *ngIf="label">{{ label }}</span>
+  <span i18n class="button-label" *ngIf="!label">Edit</span>
+</a>
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
new file mode 100644
index 000000000..9cfe1a3bb
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-edit-button',
+  styleUrls: [ './button.component.scss' ],
+  templateUrl: './edit-button.component.html'
+})
+
+export class EditButtonComponent {
+  @Input() label: string
+  @Input() routerLink: string[] | string = []
+}
diff --git a/client/src/app/shared/shared-main/buttons/index.ts b/client/src/app/shared/shared-main/buttons/index.ts
new file mode 100644
index 000000000..775a47a39
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/index.ts
@@ -0,0 +1,4 @@
+export * from './action-dropdown.component'
+export * from './button.component'
+export * from './delete-button.component'
+export * from './edit-button.component'
-- 
cgit v1.2.3