Refactor button components

client/src/app/shared/shared-main/buttons/button.component.html

@@ -1,8 +1,16 @@
-<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+<span *ngIf="!routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</span>
+
+<a *ngIf="routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" [routerLink]="routerLink">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</a>
+
+<ng-template #content>
   <my-small-loader [loading]="loading"></my-small-loader>
   <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
 
   <span *ngIf="label" class="button-label">{{ label }}</span>
 
   <ng-content></ng-content>
-</span>
+</ng-template>

client/src/app/shared/shared-main/buttons/button.component.scss

@@ -9,6 +9,10 @@
   .button-label {
     display: none;
   }
+
+  my-global-icon {
+    margin: 0 !important;
+  }
 }
 
 :host {
@@ -30,35 +34,34 @@ span[class$=-button] {
 }
 
 .action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px);
-
   width: 100%; // useful for ellipsis, allow to define a max-width on host component
 
-  &.icon-only {
+  &.has-icon {
-    my-global-icon {
+    @include button-with-icon(21px);
-      margin: 0;
   }
+
+  &.icon-only my-global-icon {
+    margin: 0 !important;
   }
 }
 
-.orange-button {
+.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;
 }
 
+.orange-button-link,
 .grey-button-link {
   @include peertube-button-link;
+}
+
+.orange-button,
+.orange-button-link {
+  @include orange-button;
+}
+
+.grey-button,
+.grey-button-link {
   @include grey-button;
 }
 

client/src/app/shared/shared-main/buttons/button.component.ts

@@ -11,6 +11,7 @@ export class ButtonComponent {
   @Input() label = ''
   @Input() className = 'grey-button'
   @Input() icon: GlobalIconName = undefined
+  @Input() routerLink: string[] | string
   @Input() title: string = undefined
   @Input() loading = false
   @Input() disabled = false
@@ -21,6 +22,7 @@ export class ButtonComponent {
       [this.className]: true,
       disabled: this.disabled,
       'icon-only': !this.label,
+      'has-icon': !!this.icon,
       'responsive-label': this.responsiveLabel
     }
   }

client/src/app/shared/shared-main/buttons/delete-button.component.html

@@ -1,8 +0,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>
-</span>

client/src/app/shared/shared-main/buttons/delete-button.component.ts

@@ -2,17 +2,16 @@ import { Component, Input, OnInit } from '@angular/core'
 
 @Component({
   selector: 'my-delete-button',
-  styleUrls: [ './button.component.scss' ],
+  template: `
-  templateUrl: './delete-button.component.html'
+  <my-button icon="delete" className="grey-button" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"></my-button>
+  `
 })
-
 export class DeleteButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
   @Input() responsiveLabel = false
 
   ngOnInit () {
-    // <my-delete-button /> No label
     if (this.label === undefined && !this.title) {
       this.title = $localize`Delete`
     }

client/src/app/shared/shared-main/buttons/edit-button.component.html

@@ -1,8 +0,0 @@
-<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>
-</a>

client/src/app/shared/shared-main/buttons/edit-button.component.ts

@@ -2,8 +2,13 @@ import { Component, Input, OnInit } from '@angular/core'
 
 @Component({
   selector: 'my-edit-button',
-  styleUrls: [ './button.component.scss' ],
+  template: `
-  templateUrl: './edit-button.component.html'
+    <my-button
+      icon="edit" className="grey-button-link"
+      [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
+      [routerLink]="routerLink"
+    ></my-button>
+  `
 })
 export class EditButtonComponent implements OnInit {
   @Input() label: string