From db66f3914bad31a21df5d7ffb3452b80655d6794 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 10 Jun 2022 10:46:20 +0200
Subject: Refactor button components
---
.../shared-main/buttons/button.component.html | 12 ++++++--
.../shared-main/buttons/button.component.scss | 33 ++++++++++++----------
.../shared/shared-main/buttons/button.component.ts | 2 ++
.../buttons/delete-button.component.html | 8 ------
.../shared-main/buttons/delete-button.component.ts | 7 ++---
.../shared-main/buttons/edit-button.component.html | 8 ------
.../shared-main/buttons/edit-button.component.ts | 9 ++++--
7 files changed, 40 insertions(+), 39 deletions(-)
delete mode 100644 client/src/app/shared/shared-main/buttons/delete-button.component.html
delete mode 100644 client/src/app/shared/shared-main/buttons/edit-button.component.html
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 d1a4215e6..c0a4b21b8 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/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>
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 c53b8f2e5..776f6622e 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/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 {
- my-global-icon {
- margin: 0;
- }
+ &.has-icon {
+ @include button-with-icon(21px);
+ }
+
+ &.icon-only my-global-icon {
+ margin: 0 !important;
}
}
-.orange-button {
+.orange-button,
+.grey-button {
@include peertube-button;
- @include orange-button;
}
-.orange-button-link {
+.orange-button-link,
+.grey-button-link {
@include peertube-button-link;
- @include orange-button;
}
-.grey-button {
- @include peertube-button;
- @include grey-button;
+.orange-button,
+.orange-button-link {
+ @include orange-button;
}
+.grey-button,
.grey-button-link {
- @include peertube-button-link;
@include grey-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 52936a4d4..476057823 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/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
}
}
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
deleted file mode 100644
index d7a6702a7..000000000
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ /dev/null
@@ -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>
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 90735852c..1cab10803 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
@@ -2,17 +2,16 @@ import { Component, Input, OnInit } from '@angular/core'
@Component({
selector: 'my-delete-button',
- styleUrls: [ './button.component.scss' ],
- templateUrl: './delete-button.component.html'
+ template: `
+ <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`
}
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
deleted file mode 100644
index 8beeee6c4..000000000
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ /dev/null
@@ -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>
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 24c8625ff..0049dfa64 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
@@ -2,8 +2,13 @@ import { Component, Input, OnInit } from '@angular/core'
@Component({
selector: 'my-edit-button',
- styleUrls: [ './button.component.scss' ],
- templateUrl: './edit-button.component.html'
+ template: `
+ <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
--
cgit v1.2.3