Verified Commit faf7eab7 authored by Chocobozzz's avatar Chocobozzz
Browse files

Cleanup plugins admin CSS

parent f6e98f0a
Pipeline #411556 passed with stages
in 15 minutes and 14 seconds
......@@ -23,13 +23,17 @@
</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>
......
......@@ -48,10 +48,15 @@
<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>
......
@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 {
}
......@@ -36,6 +36,7 @@
.buttons {
margin-left: auto;
width: max-content;
> *:not(:last-child) {
margin-right: 10px;
}
......@@ -57,3 +58,14 @@
@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;
}
......@@ -46,12 +56,12 @@ span[class$=-button] {
// 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;
}
}
......@@ -3,7 +3,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
@Component({
selector: 'my-button',
styleUrls: ['./button.component.scss'],
styleUrls: [ './button.component.scss' ],
templateUrl: './button.component.html'
})
......@@ -14,6 +14,7 @@ export class ButtonComponent {
@Input() title: string = undefined
@Input() loading = false
@Input() disabled = false
@Input() responsiveLabel = false
getTitle () {
return this.title || this.label
......@@ -22,7 +23,8 @@ export class ButtonComponent {
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>
......
......@@ -9,6 +9,7 @@ import { Component, Input, OnInit } from '@angular/core'
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>
......
......@@ -5,11 +5,11 @@ import { Component, Input, OnInit } from '@angular/core'
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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment