From db66f3914bad31a21df5d7ffb3452b80655d6794 Mon Sep 17 00:00:00 2001 From: Chocobozzz 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 (limited to 'client') 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 @@ - + + + + + + + + + {{ label }} - + 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 @@ - - - - {{ label }} - 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: ` + + ` }) - export class DeleteButtonComponent implements OnInit { @Input() label: string @Input() title: string @Input() responsiveLabel = false ngOnInit () { - // 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 @@ - - - - {{ label }} - 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: ` + + ` }) export class EditButtonComponent implements OnInit { @Input() label: string -- cgit v1.2.3