</a>
<div class="buttons">
- <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
-
- <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
- [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)"
+ <my-edit-button
+ *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
+ [responsiveLabel]="true"
+ ></my-edit-button>
+
+ <my-button
+ class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+ [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
></my-button>
- <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
+ <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
</div>
</div>
<span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
<div class="buttons">
- <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+ <my-edit-button
+ *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
+ label="Settings" i18n-label [responsiveLabel]="true"
+ ></my-edit-button>
- <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
- label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
+ <my-button
+ class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+ [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
+ icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
></my-button>
</div>
</div>
+++ /dev/null
-@import '_variables';
-@import '_mixins';
-
-@media screen and (max-width: $small-view) {
- ::ng-deep .plugins .plugin .first-row {
- flex-wrap: wrap;
-
- .plugin-name,
- .plugin-version,
- .plugin-icon {
- margin-bottom: 10px;
- }
-
- .buttons {
- my-edit-button,
- my-delete-button,
- my-button {
- .action-button {
- padding: 0 13px;
- }
-
- .button-label {
- display: none;
- }
- }
- }
- }
-}
import { Component } from '@angular/core'
@Component({
- templateUrl: './plugins.component.html',
- styleUrls: [ './plugins.component.scss' ]
+ templateUrl: './plugins.component.html'
})
export class PluginsComponent {
}
.buttons {
margin-left: auto;
width: max-content;
+
> *:not(:last-child) {
margin-right: 10px;
}
@include peertube-button-link;
@include button-with-icon(21px, 0, -2px);
}
+
+@media screen and (max-width: $small-view) {
+ .first-row {
+ flex-wrap: wrap;
+
+ .buttons {
+ flex-basis: 100%;
+ margin-top: 10px;
+ }
+ }
+}
@import '_variables';
@import '_mixins';
+@mixin responsive-label {
+ .action-button {
+ padding: 0 13px;
+ }
+
+ .button-label {
+ display: none;
+ }
+}
+
:host {
outline: none;
}
// In a table, try to minimize the space taken by this button
@media screen and (max-width: 1400px) {
:host-context(td) {
- .action-button {
- padding: 0 13px;
- }
+ @include responsive-label;
+ }
+}
- .button-label {
- display: none;
- }
+@media screen and (max-width: $small-view) {
+ .responsive-label {
+ @include responsive-label;
}
}
@Component({
selector: 'my-button',
- styleUrls: ['./button.component.scss'],
+ styleUrls: [ './button.component.scss' ],
templateUrl: './button.component.html'
})
@Input() title: string = undefined
@Input() loading = false
@Input() disabled = false
+ @Input() responsiveLabel = false
getTitle () {
return this.title || this.label
getClasses () {
return {
[this.className]: true,
- disabled: this.disabled
+ disabled: this.disabled,
+ 'responsive-label': this.responsiveLabel
}
}
}
-<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="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>
export class DeleteButtonComponent implements OnInit {
@Input() label: string
@Input() title: string
+ @Input() responsiveLabel = false
ngOnInit () {
// <my-delete-button /> No label
-<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title">
+<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>
styleUrls: [ './button.component.scss' ],
templateUrl: './edit-button.component.html'
})
-
export class EditButtonComponent implements OnInit {
@Input() label: string
@Input() title: string
@Input() routerLink: string[] | string = []
+ @Input() responsiveLabel = false
ngOnInit () {
// <my-edit-button /> No label