-<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>
.button-label {
display: none;
}
+
+ my-global-icon {
+ margin: 0 !important;
+ }
}
:host {
}
.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;
}
@Input() label = ''
@Input() className = 'grey-button'
@Input() icon: GlobalIconName = undefined
+ @Input() routerLink: string[] | string
@Input() title: string = undefined
@Input() loading = false
@Input() disabled = false
[this.className]: true,
disabled: this.disabled,
'icon-only': !this.label,
+ 'has-icon': !!this.icon,
'responsive-label': this.responsiveLabel
}
}
+++ /dev/null
-<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>
@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`
}
+++ /dev/null
-<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>
@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