aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-10 10:46:20 +0200
committerChocobozzz <me@florianbigard.com>2022-06-10 13:51:12 +0200
commitdb66f3914bad31a21df5d7ffb3452b80655d6794 (patch)
tree36991e8b93b1b660222a432d00c256aa6f707d9c /client/src/app
parentac30ddd739d32ee69ce048656c0ffcf444b91513 (diff)
downloadPeerTube-db66f3914bad31a21df5d7ffb3452b80655d6794.tar.gz
PeerTube-db66f3914bad31a21df5d7ffb3452b80655d6794.tar.zst
PeerTube-db66f3914bad31a21df5d7ffb3452b80655d6794.zip
Refactor button components
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.html12
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss33
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.ts2
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.html8
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.ts7
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.html8
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.ts9
7 files changed, 40 insertions, 39 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 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 @@
1<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0"> 1<span *ngIf="!routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
2 <ng-container *ngTemplateOutlet="content"></ng-container>
3</span>
4
5<a *ngIf="routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" [routerLink]="routerLink">
6 <ng-container *ngTemplateOutlet="content"></ng-container>
7</a>
8
9<ng-template #content>
2 <my-small-loader [loading]="loading"></my-small-loader> 10 <my-small-loader [loading]="loading"></my-small-loader>
3 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon> 11 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
4 12
5 <span *ngIf="label" class="button-label">{{ label }}</span> 13 <span *ngIf="label" class="button-label">{{ label }}</span>
6 14
7 <ng-content></ng-content> 15 <ng-content></ng-content>
8</span> 16</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 @@
9 .button-label { 9 .button-label {
10 display: none; 10 display: none;
11 } 11 }
12
13 my-global-icon {
14 margin: 0 !important;
15 }
12} 16}
13 17
14:host { 18:host {
@@ -30,35 +34,34 @@ span[class$=-button] {
30} 34}
31 35
32.action-button { 36.action-button {
33 @include peertube-button-link;
34 @include button-with-icon(21px);
35
36 width: 100%; // useful for ellipsis, allow to define a max-width on host component 37 width: 100%; // useful for ellipsis, allow to define a max-width on host component
37 38
38 &.icon-only { 39 &.has-icon {
39 my-global-icon { 40 @include button-with-icon(21px);
40 margin: 0; 41 }
41 } 42
43 &.icon-only my-global-icon {
44 margin: 0 !important;
42 } 45 }
43} 46}
44 47
45.orange-button { 48.orange-button,
49.grey-button {
46 @include peertube-button; 50 @include peertube-button;
47 @include orange-button;
48} 51}
49 52
50.orange-button-link { 53.orange-button-link,
54.grey-button-link {
51 @include peertube-button-link; 55 @include peertube-button-link;
52 @include orange-button;
53} 56}
54 57
55.grey-button { 58.orange-button,
56 @include peertube-button; 59.orange-button-link {
57 @include grey-button; 60 @include orange-button;
58} 61}
59 62
63.grey-button,
60.grey-button-link { 64.grey-button-link {
61 @include peertube-button-link;
62 @include grey-button; 65 @include grey-button;
63} 66}
64 67
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 {
11 @Input() label = '' 11 @Input() label = ''
12 @Input() className = 'grey-button' 12 @Input() className = 'grey-button'
13 @Input() icon: GlobalIconName = undefined 13 @Input() icon: GlobalIconName = undefined
14 @Input() routerLink: string[] | string
14 @Input() title: string = undefined 15 @Input() title: string = undefined
15 @Input() loading = false 16 @Input() loading = false
16 @Input() disabled = false 17 @Input() disabled = false
@@ -21,6 +22,7 @@ export class ButtonComponent {
21 [this.className]: true, 22 [this.className]: true,
22 disabled: this.disabled, 23 disabled: this.disabled,
23 'icon-only': !this.label, 24 'icon-only': !this.label,
25 'has-icon': !!this.icon,
24 'responsive-label': this.responsiveLabel 26 'responsive-label': this.responsiveLabel
25 } 27 }
26 } 28 }
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 @@
1<span
2 class="action-button action-button-delete grey-button"
3 [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
4>
5 <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
6
7 <span class="button-label" *ngIf="label">{{ label }}</span>
8</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'
2 2
3@Component({ 3@Component({
4 selector: 'my-delete-button', 4 selector: 'my-delete-button',
5 styleUrls: [ './button.component.scss' ], 5 template: `
6 templateUrl: './delete-button.component.html' 6 <my-button icon="delete" className="grey-button" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"></my-button>
7 `
7}) 8})
8
9export class DeleteButtonComponent implements OnInit { 9export class DeleteButtonComponent implements OnInit {
10 @Input() label: string 10 @Input() label: string
11 @Input() title: string 11 @Input() title: string
12 @Input() responsiveLabel = false 12 @Input() responsiveLabel = false
13 13
14 ngOnInit () { 14 ngOnInit () {
15 // <my-delete-button /> No label
16 if (this.label === undefined && !this.title) { 15 if (this.label === undefined && !this.title) {
17 this.title = $localize`Delete` 16 this.title = $localize`Delete`
18 } 17 }
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 @@
1<a
2 class="action-button action-button-edit grey-button"
3 [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
4>
5 <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
6
7 <span class="button-label" *ngIf="label">{{ label }}</span>
8</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'
2 2
3@Component({ 3@Component({
4 selector: 'my-edit-button', 4 selector: 'my-edit-button',
5 styleUrls: [ './button.component.scss' ], 5 template: `
6 templateUrl: './edit-button.component.html' 6 <my-button
7 icon="edit" className="grey-button-link"
8 [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"
9 [routerLink]="routerLink"
10 ></my-button>
11 `
7}) 12})
8export class EditButtonComponent implements OnInit { 13export class EditButtonComponent implements OnInit {
9 @Input() label: string 14 @Input() label: string