Refactor my-button component

client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html

@@ -32,7 +32,7 @@ <h1 class="d-flex justify-content-between">
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="left-buttons">
-        <my-button className="orange-button" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
+        <my-button theme="orange" i18n-label label="Generate token" icon="add" (click)="generateToken()"></my-button>
       </div>
     </div>
   </ng-template>

client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html

@@ -2,11 +2,11 @@
   <ng-container *ngIf="!twoFactorEnabled">
     <p i18n>Two factor authentication adds an additional layer of security to your account by requiring a numeric code from another device (most commonly mobile phones) when you log in.</p>
 
-    <my-button [ptRouterLink]="[ '/my-account/two-factor-auth' ]" className="orange-button-link" i18n>Enable two-factor authentication</my-button>
+    <my-button [ptRouterLink]="[ '/my-account/two-factor-auth' ]" theme="orange" i18n>Enable two-factor authentication</my-button>
   </ng-container>
 
   <ng-container *ngIf="twoFactorEnabled">
-    <my-button className="orange-button" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
+    <my-button theme="orange" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
   </ng-container>
 
 </div>

client/src/app/+video-studio/edit/video-studio-edit.component.html

@@ -63,7 +63,7 @@ <h2 i18n>ADD WATERMARK</h2>
       </div>
 
       <my-button
-        className="orange-button" i18n-label label="Run video edition" icon="circle-tick"
+        theme="orange" i18n-label label="Run video edition" icon="circle-tick"
         (click)="runEdition()" (keydown.enter)="runEdition()"
         [disabled]="!form.valid || isRunningEdition || noEdition()"
       ></my-button>

client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html

@@ -59,9 +59,9 @@
   ></my-video-edit>
 
   <div class="submit-container">
-    <my-button className="orange-button" i18n-label label="Update" icon="circle-tick"
-      (click)="updateSecondStep()"
-      [disabled]="!form.valid || isUpdatingVideo === true"
+    <my-button
+      theme="orange" i18n-label label="Update" icon="circle-tick"
+      (click)="updateSecondStep()" [disabled]="!form.valid || isUpdatingVideo === true"
     ></my-button>
   </div>
 </form>

client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html

@@ -65,8 +65,8 @@
   ></my-video-edit>
 
   <div class="submit-container">
-    <my-button className="orange-button" i18n-label label="Update" icon="circle-tick"
-      (click)="updateSecondStep()"
+    <my-button
+      theme="orange" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
       [disabled]="!form.valid || isUpdatingVideo === true"
     ></my-button>
   </div>

client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html

@@ -63,8 +63,8 @@
   ></my-video-edit>
 
   <div class="submit-container">
-    <my-button className="orange-button" i18n-label label="Update" icon="circle-tick"
-      (click)="updateSecondStep()"
+    <my-button
+      theme="orange" i18n-label label="Update" icon="circle-tick" (click)="updateSecondStep()"
       [disabled]="!form.valid || isUpdatingVideo === true"
     ></my-button>
   </div>

client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html

@@ -46,13 +46,7 @@
       </div>
 
       <div class="form-group upload-audio-button">
-        <my-button
-          className="orange-button"
-          [label]="getAudioUploadLabel()"
-          icon="upload"
-          (click)="uploadAudio()"
-        >
-        </my-button>
+        <my-button theme="orange" [label]="getAudioUploadLabel()" icon="upload" (click)="uploadAudio()"></my-button>
       </div>
     </ng-container>
   </div>
@@ -80,9 +74,9 @@
   <div class="submit-container">
     <div i18n *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
 
-    <my-button className="orange-button" i18n-label label="Publish" icon="circle-tick"
-               (click)="updateSecondStep()" (keydown.enter)="updateSecondStep()"
-               [disabled]="isPublishingButtonDisabled()"
+    <my-button
+      theme="orange" i18n-label label="Publish" icon="circle-tick"
+      (click)="updateSecondStep()" (keydown.enter)="updateSecondStep()" [disabled]="isPublishingButtonDisabled()"
     ></my-button>
   </div>
 </form>

client/src/app/+videos/+video-edit/video-update.component.html

@@ -42,9 +42,9 @@
     </my-video-edit>
 
     <div class="submit-container">
-      <my-button className="orange-button" i18n-label label="Update" icon="circle-tick"
-                 (click)="update()" (keydown.enter)="update()"
-                 [disabled]="!form.valid || isUpdatingVideo === true"
+      <my-button
+        theme="orange" i18n-label label="Update" icon="circle-tick" (click)="update()" (keydown.enter)="update()"
+        [disabled]="!form.valid || isUpdatingVideo === true"
       ></my-button>
     </div>
   </form>

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

@@ -46,26 +46,6 @@ span[class$=-button] {
   }
 }
 
-.orange-button,
-.grey-button {
-  @include peertube-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;
-}
-
 .button-label {
   @include ellipsis;
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, booleanAttribute } from '@angular/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 
 @Component({
@@ -10,13 +10,13 @@ import { GlobalIconName } from '@app/shared/shared-icons'
 
 export class ButtonComponent implements OnInit, OnChanges {
   @Input() label = ''
-  @Input() className = 'grey-button'
-  @Input() icon: GlobalIconName = undefined
+  @Input() theme: 'orange' | 'grey' = 'grey'
+  @Input() icon: GlobalIconName
   @Input() ptRouterLink: string[] | string
-  @Input() title: string = undefined
-  @Input() loading = false
-  @Input() disabled = false
-  @Input() responsiveLabel = false
+  @Input() title: string
+  @Input({ transform: booleanAttribute }) loading = false
+  @Input({ transform: booleanAttribute }) disabled = false
+  @Input({ transform: booleanAttribute }) responsiveLabel = false
 
   classes: { [id: string]: boolean } = {}
 
@@ -30,7 +30,10 @@ export class ButtonComponent implements OnInit, OnChanges {
 
   private buildClasses () {
     this.classes = {
-      [this.className]: true,
+      'peertube-button': !this.ptRouterLink,
+      'peertube-button-link': !!this.ptRouterLink,
+      'orange-button': this.theme === 'orange',
+      'grey-button': this.theme === 'grey',
       'disabled': this.disabled,
       'icon-only': !this.label,
       'has-icon': !!this.icon,

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

@@ -4,8 +4,7 @@ import { Component, Input, OnInit } from '@angular/core'
   selector: 'my-edit-button',
   template: `
     <my-button
-      icon="edit" className="grey-button-link"
-      [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
+      icon="edit" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
       [ptRouterLink]="ptRouterLink"
     ></my-button>
   `