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 {
- @include peertube-button;
- @include orange-button;
-}
-
-.orange-button-link {
- @include peertube-button-link;
- @include orange-button;
-}
-
+.orange-button,
.grey-button {
@include peertube-button;
- @include grey-button;
}
+.orange-button-link,
.grey-button-link {
@include peertube-button-link;
+}
+
+.orange-button,
+.orange-button-link {
+ @include orange-button;
+}
+
+.grey-button,
+.grey-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