From: Chocobozzz <me@florianbigard.com>
Date: Fri, 10 Jun 2022 08:04:23 +0000 (+0200)
Subject: Fix button icon margin
X-Git-Tag: v4.2.1~19
X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=db129781cabca2c66d18cd1dcdfe40f87e9ec030;p=github%2FChocobozzz%2FPeerTube.git

Fix button icon margin
---

diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 11c8ffedd..d1a4215e6 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,6 +1,6 @@
 <span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
-  <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
   <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>
 
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 c782ac3ef..c53b8f2e5 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -34,6 +34,12 @@ span[class$=-button] {
   @include button-with-icon(21px);
 
   width: 100%; // useful for ellipsis, allow to define a max-width on host component
+
+  &.icon-only {
+    my-global-icon {
+      margin: 0;
+    }
+  }
 }
 
 .orange-button {
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 b97012d9a..52936a4d4 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -20,6 +20,7 @@ export class ButtonComponent {
     return {
       [this.className]: true,
       disabled: this.disabled,
+      'icon-only': !this.label,
       'responsive-label': this.responsiveLabel
     }
   }