aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-29 09:46:44 +0200
committerChocobozzz <me@florianbigard.com>2021-04-29 09:50:31 +0200
commitfaf7eab7d9528451570a26e27093159045346064 (patch)
treeb09356d0272ca75be203057cb47984ab20381c2f /client/src
parentf6e98f0a4e812cd7de3227faaa9555c6a03bbd4e (diff)
downloadPeerTube-faf7eab7d9528451570a26e27093159045346064.tar.gz
PeerTube-faf7eab7d9528451570a26e27093159045346064.tar.zst
PeerTube-faf7eab7d9528451570a26e27093159045346064.zip
Cleanup plugins admin CSS
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html14
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html11
-rw-r--r--client/src/app/+admin/plugins/plugins.component.scss28
-rw-r--r--client/src/app/+admin/plugins/plugins.component.ts3
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss12
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss22
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.ts6
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.html5
-rw-r--r--client/src/app/shared/shared-main/buttons/delete-button.component.ts1
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.html5
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.ts2
11 files changed, 60 insertions, 49 deletions
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 9cbec03a1..bc4c2ef88 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -23,13 +23,17 @@
23 </a> 23 </a>
24 24
25 <div class="buttons"> 25 <div class="buttons">
26 <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button> 26 <my-edit-button
27 27 *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
28 <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)" 28 [responsiveLabel]="true"
29 [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" 29 ></my-edit-button>
30
31 <my-button
32 class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
33 [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
30 ></my-button> 34 ></my-button>
31 35
32 <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button> 36 <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
33 </div> 37 </div>
34 </div> 38 </div>
35 39
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 727633399..6900e8717 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -48,10 +48,15 @@
48 <span *ngIf="plugin.installed" class="badge badge-success">Installed</span> 48 <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
49 49
50 <div class="buttons"> 50 <div class="buttons">
51 <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button> 51 <my-edit-button
52 *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
53 label="Settings" i18n-label [responsiveLabel]="true"
54 ></my-edit-button>
52 55
53 <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)" 56 <my-button
54 label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)" 57 class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
58 [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
59 icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
55 ></my-button> 60 ></my-button>
56 </div> 61 </div>
57 </div> 62 </div>
diff --git a/client/src/app/+admin/plugins/plugins.component.scss b/client/src/app/+admin/plugins/plugins.component.scss
deleted file mode 100644
index ce9825f53..000000000
--- a/client/src/app/+admin/plugins/plugins.component.scss
+++ /dev/null
@@ -1,28 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4@media screen and (max-width: $small-view) {
5 ::ng-deep .plugins .plugin .first-row {
6 flex-wrap: wrap;
7
8 .plugin-name,
9 .plugin-version,
10 .plugin-icon {
11 margin-bottom: 10px;
12 }
13
14 .buttons {
15 my-edit-button,
16 my-delete-button,
17 my-button {
18 .action-button {
19 padding: 0 13px;
20 }
21
22 .button-label {
23 display: none;
24 }
25 }
26 }
27 }
28}
diff --git a/client/src/app/+admin/plugins/plugins.component.ts b/client/src/app/+admin/plugins/plugins.component.ts
index 6ec6fa4a1..de06c0671 100644
--- a/client/src/app/+admin/plugins/plugins.component.ts
+++ b/client/src/app/+admin/plugins/plugins.component.ts
@@ -1,8 +1,7 @@
1import { Component } from '@angular/core' 1import { Component } from '@angular/core'
2 2
3@Component({ 3@Component({
4 templateUrl: './plugins.component.html', 4 templateUrl: './plugins.component.html'
5 styleUrls: [ './plugins.component.scss' ]
6}) 5})
7export class PluginsComponent { 6export class PluginsComponent {
8} 7}
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index e4ddc9060..47cb1e6e5 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -36,6 +36,7 @@
36 .buttons { 36 .buttons {
37 margin-left: auto; 37 margin-left: auto;
38 width: max-content; 38 width: max-content;
39
39 > *:not(:last-child) { 40 > *:not(:last-child) {
40 margin-right: 10px; 41 margin-right: 10px;
41 } 42 }
@@ -57,3 +58,14 @@
57 @include peertube-button-link; 58 @include peertube-button-link;
58 @include button-with-icon(21px, 0, -2px); 59 @include button-with-icon(21px, 0, -2px);
59} 60}
61
62@media screen and (max-width: $small-view) {
63 .first-row {
64 flex-wrap: wrap;
65
66 .buttons {
67 flex-basis: 100%;
68 margin-top: 10px;
69 }
70 }
71}
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 f73b7b808..09b5f95d7 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,6 +1,16 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4@mixin responsive-label {
5 .action-button {
6 padding: 0 13px;
7 }
8
9 .button-label {
10 display: none;
11 }
12}
13
4:host { 14:host {
5 outline: none; 15 outline: none;
6} 16}
@@ -46,12 +56,12 @@ span[class$=-button] {
46// In a table, try to minimize the space taken by this button 56// In a table, try to minimize the space taken by this button
47@media screen and (max-width: 1400px) { 57@media screen and (max-width: 1400px) {
48 :host-context(td) { 58 :host-context(td) {
49 .action-button { 59 @include responsive-label;
50 padding: 0 13px; 60 }
51 } 61}
52 62
53 .button-label { 63@media screen and (max-width: $small-view) {
54 display: none; 64 .responsive-label {
55 } 65 @include responsive-label;
56 } 66 }
57} 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 1d2be0bf9..ee74b3d12 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -3,7 +3,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
3 3
4@Component({ 4@Component({
5 selector: 'my-button', 5 selector: 'my-button',
6 styleUrls: ['./button.component.scss'], 6 styleUrls: [ './button.component.scss' ],
7 templateUrl: './button.component.html' 7 templateUrl: './button.component.html'
8}) 8})
9 9
@@ -14,6 +14,7 @@ export class ButtonComponent {
14 @Input() title: string = undefined 14 @Input() title: string = undefined
15 @Input() loading = false 15 @Input() loading = false
16 @Input() disabled = false 16 @Input() disabled = false
17 @Input() responsiveLabel = false
17 18
18 getTitle () { 19 getTitle () {
19 return this.title || this.label 20 return this.title || this.label
@@ -22,7 +23,8 @@ export class ButtonComponent {
22 getClasses () { 23 getClasses () {
23 return { 24 return {
24 [this.className]: true, 25 [this.className]: true,
25 disabled: this.disabled 26 disabled: this.disabled,
27 'responsive-label': this.responsiveLabel
26 } 28 }
27 } 29 }
28} 30}
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
index c94d8d0c9..d7a6702a7 100644
--- a/client/src/app/shared/shared-main/buttons/delete-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/delete-button.component.html
@@ -1,4 +1,7 @@
1<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="0"> 1<span
2 class="action-button action-button-delete grey-button"
3 [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
4>
2 <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon> 5 <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
3 6
4 <span class="button-label" *ngIf="label">{{ label }}</span> 7 <span class="button-label" *ngIf="label">{{ label }}</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 18995422a..c091f5309 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
@@ -9,6 +9,7 @@ import { Component, Input, OnInit } from '@angular/core'
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 13
13 ngOnInit () { 14 ngOnInit () {
14 // <my-delete-button /> No label 15 // <my-delete-button /> No label
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
index ecb709be1..8beeee6c4 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.html
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.html
@@ -1,4 +1,7 @@
1<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title"> 1<a
2 class="action-button action-button-edit grey-button"
3 [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
4>
2 <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon> 5 <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
3 6
4 <span class="button-label" *ngIf="label">{{ label }}</span> 7 <span class="button-label" *ngIf="label">{{ label }}</span>
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 4b76551ca..24c8625ff 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
@@ -5,11 +5,11 @@ import { Component, Input, OnInit } from '@angular/core'
5 styleUrls: [ './button.component.scss' ], 5 styleUrls: [ './button.component.scss' ],
6 templateUrl: './edit-button.component.html' 6 templateUrl: './edit-button.component.html'
7}) 7})
8
9export class EditButtonComponent implements OnInit { 8export class EditButtonComponent implements OnInit {
10 @Input() label: string 9 @Input() label: string
11 @Input() title: string 10 @Input() title: string
12 @Input() routerLink: string[] | string = [] 11 @Input() routerLink: string[] | string = []
12 @Input() responsiveLabel = false
13 13
14 ngOnInit () { 14 ngOnInit () {
15 // <my-edit-button /> No label 15 // <my-edit-button /> No label