From faf7eab7d9528451570a26e27093159045346064 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 29 Apr 2021 09:46:44 +0200
Subject: [PATCH] Cleanup plugins admin CSS

---
 .../plugin-list-installed.component.html      | 12 +++++---
 .../plugin-search.component.html              | 11 ++++++--
 .../app/+admin/plugins/plugins.component.scss | 28 -------------------
 .../app/+admin/plugins/plugins.component.ts   |  3 +-
 .../plugins/shared/plugin-list.component.scss | 12 ++++++++
 .../shared-main/buttons/button.component.scss | 24 +++++++++++-----
 .../shared-main/buttons/button.component.ts   |  6 ++--
 .../buttons/delete-button.component.html      |  5 +++-
 .../buttons/delete-button.component.ts        |  1 +
 .../buttons/edit-button.component.html        |  5 +++-
 .../buttons/edit-button.component.ts          |  2 +-
 11 files changed, 60 insertions(+), 49 deletions(-)
 delete mode 100644 client/src/app/+admin/plugins/plugins.component.scss

diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 9cbec03a1..bc4c2ef88 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -23,13 +23,17 @@
         </a>
 
         <div class="buttons">
-          <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button
+            *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
+            [responsiveLabel]="true"
+          ></my-edit-button>
 
-          <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
-                     [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)"
+          <my-button
+            class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+            [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
           ></my-button>
 
-          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
+          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
         </div>
       </div>
 
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 727633399..6900e8717 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -48,10 +48,15 @@
         <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
 
         <div class="buttons">
-          <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button
+            *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
+            label="Settings" i18n-label [responsiveLabel]="true"
+          ></my-edit-button>
 
-          <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
-                     label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
+          <my-button
+            class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+            [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
+            icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
           ></my-button>
         </div>
       </div>
diff --git a/client/src/app/+admin/plugins/plugins.component.scss b/client/src/app/+admin/plugins/plugins.component.scss
deleted file mode 100644
index ce9825f53..000000000
--- a/client/src/app/+admin/plugins/plugins.component.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-@media screen and (max-width: $small-view) {
-  ::ng-deep .plugins .plugin .first-row {
-    flex-wrap: wrap;
-
-    .plugin-name,
-    .plugin-version,
-    .plugin-icon {
-      margin-bottom: 10px;
-    }
-
-    .buttons {
-      my-edit-button,
-      my-delete-button,
-      my-button {
-        .action-button {
-          padding: 0 13px;
-        }
-
-        .button-label {
-          display: none;
-        }
-      }
-    }
-  }
-}
diff --git a/client/src/app/+admin/plugins/plugins.component.ts b/client/src/app/+admin/plugins/plugins.component.ts
index 6ec6fa4a1..de06c0671 100644
--- a/client/src/app/+admin/plugins/plugins.component.ts
+++ b/client/src/app/+admin/plugins/plugins.component.ts
@@ -1,8 +1,7 @@
 import { Component } from '@angular/core'
 
 @Component({
-  templateUrl: './plugins.component.html',
-  styleUrls: [ './plugins.component.scss' ]
+  templateUrl: './plugins.component.html'
 })
 export class PluginsComponent {
 }
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index e4ddc9060..47cb1e6e5 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -36,6 +36,7 @@
   .buttons {
     margin-left: auto;
     width: max-content;
+
     > *:not(:last-child) {
       margin-right: 10px;
     }
@@ -57,3 +58,14 @@
   @include peertube-button-link;
   @include button-with-icon(21px, 0, -2px);
 }
+
+@media screen and (max-width: $small-view) {
+  .first-row {
+    flex-wrap: wrap;
+
+    .buttons {
+      flex-basis: 100%;
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index f73b7b808..09b5f95d7 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,6 +1,16 @@
 @import '_variables';
 @import '_mixins';
 
+@mixin responsive-label {
+  .action-button {
+    padding: 0 13px;
+  }
+
+  .button-label {
+    display: none;
+  }
+}
+
 :host {
   outline: none;
 }
@@ -46,12 +56,12 @@ span[class$=-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;
-    }
+    @include responsive-label;
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .responsive-label {
+    @include responsive-label;
   }
 }
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 1d2be0bf9..ee74b3d12 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -3,7 +3,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
 
 @Component({
   selector: 'my-button',
-  styleUrls: ['./button.component.scss'],
+  styleUrls: [ './button.component.scss' ],
   templateUrl: './button.component.html'
 })
 
@@ -14,6 +14,7 @@ export class ButtonComponent {
   @Input() title: string = undefined
   @Input() loading = false
   @Input() disabled = false
+  @Input() responsiveLabel = false
 
   getTitle () {
     return this.title || this.label
@@ -22,7 +23,8 @@ export class ButtonComponent {
   getClasses () {
     return {
       [this.className]: true,
-      disabled: this.disabled
+      disabled: this.disabled,
+      'responsive-label': this.responsiveLabel
     }
   }
 }
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
index c94d8d0c9..d7a6702a7 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -1,4 +1,7 @@
-<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="0">
+<span
+  class="action-button action-button-delete grey-button"
+  [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
+>
   <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</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
index 18995422a..c091f5309 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.ts
@@ -9,6 +9,7 @@ import { Component, Input, OnInit } from '@angular/core'
 export class DeleteButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
+  @Input() responsiveLabel = false
 
   ngOnInit () {
     // <my-delete-button /> No label
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
index ecb709be1..8beeee6c4 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -1,4 +1,7 @@
-<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title">
+<a
+  class="action-button action-button-edit grey-button"
+  [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
+>
   <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>
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
index 4b76551ca..24c8625ff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -5,11 +5,11 @@ import { Component, Input, OnInit } from '@angular/core'
   styleUrls: [ './button.component.scss' ],
   templateUrl: './edit-button.component.html'
 })
-
 export class EditButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
   @Input() routerLink: string[] | string = []
+  @Input() responsiveLabel = false
 
   ngOnInit () {
     // <my-edit-button /> No label