aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-10 10:04:23 +0200
committerChocobozzz <me@florianbigard.com>2022-06-10 10:04:23 +0200
commitdb129781cabca2c66d18cd1dcdfe40f87e9ec030 (patch)
treeb92ce8eaa2d5662dd53d5f84bc30bb138fbdf515
parent60ab5b99c76103d14c0f3ce7b3bba6d7451e2220 (diff)
downloadPeerTube-db129781cabca2c66d18cd1dcdfe40f87e9ec030.tar.gz
PeerTube-db129781cabca2c66d18cd1dcdfe40f87e9ec030.tar.zst
PeerTube-db129781cabca2c66d18cd1dcdfe40f87e9ec030.zip
Fix button icon margin
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.html2
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss6
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.ts1
3 files changed, 8 insertions, 1 deletions
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 @@
1<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0"> 1<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
2 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
3 <my-small-loader [loading]="loading"></my-small-loader> 2 <my-small-loader [loading]="loading"></my-small-loader>
3 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
4 4
5 <span *ngIf="label" class="button-label">{{ label }}</span> 5 <span *ngIf="label" class="button-label">{{ label }}</span>
6 6
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] {
34 @include button-with-icon(21px); 34 @include button-with-icon(21px);
35 35
36 width: 100%; // useful for ellipsis, allow to define a max-width on host component 36 width: 100%; // useful for ellipsis, allow to define a max-width on host component
37
38 &.icon-only {
39 my-global-icon {
40 margin: 0;
41 }
42 }
37} 43}
38 44
39.orange-button { 45.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 {
20 return { 20 return {
21 [this.className]: true, 21 [this.className]: true,
22 disabled: this.disabled, 22 disabled: this.disabled,
23 'icon-only': !this.label,
23 'responsive-label': this.responsiveLabel 24 'responsive-label': this.responsiveLabel
24 } 25 }
25 } 26 }