aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-10 23:42:52 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-03-10 23:48:12 +0100
commit03efb1419d33627939ee9593633fc703b957199d (patch)
tree99836915c70594e9aabe0d8dd28cea3d45826cac /client/src
parent9b3078581f2767c7aa2ed5766e1a588ebc0cb875 (diff)
downloadPeerTube-03efb1419d33627939ee9593633fc703b957199d.tar.gz
PeerTube-03efb1419d33627939ee9593633fc703b957199d.tar.zst
PeerTube-03efb1419d33627939ee9593633fc703b957199d.zip
Better use of space and icons in plugins administration interface
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html23
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html23
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss2
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss29
-rw-r--r--client/src/app/shared/images/global-icon.component.ts3
-rw-r--r--client/src/assets/images/global/npm.svg6
6 files changed, 55 insertions, 31 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 1a177de72..a2d0fde08 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
@@ -10,22 +10,19 @@
10 <div class="card plugin" *ngFor="let plugin of plugins"> 10 <div class="card plugin" *ngFor="let plugin of plugins">
11 <div class="card-body"> 11 <div class="card-body">
12 <div class="first-row"> 12 <div class="first-row">
13 <a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" i18n-title title="Show plugin settings">{{ plugin.name }}</a> 13 <span class="plugin-name">{{ plugin.name }}</span>
14 14
15 <span class="plugin-version">{{ plugin.version }}</span> 15 <span class="plugin-version">{{ plugin.version }}</span>
16 </div>
17 16
18 <div class="second-row"> 17 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Go to the plugin homepage">
19 <div class="description">{{ plugin.description }}</div> 18 <my-global-icon iconName="home"></my-global-icon>
19 </a>
20 20
21 <div class="buttons"> 21 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="'https://www.npmjs.com/package/peertube-plugin-' + plugin.name" i18n-title title="Go to the plugin homepage">
22 <a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer" 22 <my-global-icon iconName="npm"></my-global-icon>
23 [href]="plugin.homepage" i18n-title title="Go to the plugin homepage" 23 </a>
24 >
25 <my-global-icon iconName="go"></my-global-icon>
26 <span i18n class="button-label">Homepage</span>
27 </a>
28 24
25 <div class="buttons">
29 <my-edit-button *ngIf="pluginType !== PluginType.THEME" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button> 26 <my-edit-button *ngIf="pluginType !== PluginType.THEME" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
30 27
31 <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)" 28 <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
@@ -35,6 +32,10 @@
35 <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button> 32 <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
36 </div> 33 </div>
37 </div> 34 </div>
35
36 <div class="second-row">
37 <div class="description">{{ plugin.description }}</div>
38 </div>
38 </div> 39 </div>
39 </div> 40 </div>
40</div> 41</div>
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 5f18028c9..fac81bd26 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
@@ -37,25 +37,26 @@
37 37
38 <span class="plugin-version">{{ plugin.latestVersion }}</span> 38 <span class="plugin-version">{{ plugin.latestVersion }}</span>
39 39
40 <span *ngIf="plugin.installed" class="badge badge-success">Installed</span> 40 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Go to the plugin homepage">
41 </div> 41 <my-global-icon iconName="home"></my-global-icon>
42 </a>
42 43
43 <div class="second-row"> 44 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="'https://www.npmjs.com/package/peertube-plugin-' + plugin.name" i18n-title title="Go to the plugin homepage">
44 <div class="description">{{ plugin.description }}</div> 45 <my-global-icon iconName="npm"></my-global-icon>
46 </a>
45 47
46 <div class="buttons"> 48 <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
47 <a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
48 [href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
49 >
50 <my-global-icon iconName="go"></my-global-icon>
51 <span i18n class="button-label">Homepage</span>
52 </a>
53 49
50 <div class="buttons">
54 <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)" 51 <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
55 label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)" 52 label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
56 ></my-button> 53 ></my-button>
57 </div> 54 </div>
58 </div> 55 </div>
56
57 <div class="second-row">
58 <div class="description">{{ plugin.description }}</div>
59 </div>
59 </div> 60 </div>
60 </div> 61 </div>
61</div> 62</div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index ed06825c8..20f169e13 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -25,5 +25,5 @@
25.badge { 25.badge {
26 font-size: 13px; 26 font-size: 13px;
27 font-weight: $font-semibold; 27 font-weight: $font-semibold;
28 margin-left: 5px; 28 margin-left: 15px;
29} 29}
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 87a709b00..3f4fad7b9 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -7,6 +7,8 @@
7} 7}
8 8
9.first-row { 9.first-row {
10 display: flex;
11 align-items: center;
10 margin-bottom: 10px; 12 margin-bottom: 10px;
11 13
12 .plugin-name { 14 .plugin-name {
@@ -18,6 +20,26 @@
18 .plugin-version { 20 .plugin-version {
19 opacity: 0.6; 21 opacity: 0.6;
20 } 22 }
23
24 .plugin-icon {
25 margin-left: 10px;
26
27 my-global-icon {
28 @include apply-svg-color($grey-foreground-color);
29
30 &[iconName="npm"] {
31 @include fill-svg-color($grey-foreground-color);
32 }
33 }
34 }
35
36 .buttons {
37 margin-left: auto;
38 width: max-content;
39 > *:not(:last-child) {
40 margin-right: 10px;
41 }
42 }
21} 43}
22 44
23.second-row { 45.second-row {
@@ -29,13 +51,6 @@
29 .description { 51 .description {
30 opacity: 0.8 52 opacity: 0.8
31 } 53 }
32
33 .buttons {
34 margin-left: 10px;
35 > *:not(:last-child) {
36 margin-right: 10px;
37 }
38 }
39} 54}
40 55
41.action-button { 56.action-button {
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index e83daf077..a2e2b719d 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -53,7 +53,8 @@ const icons = {
53 'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg'), 53 'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg'),
54 'users': require('!!raw-loader?!../../../assets/images/global/users.svg'), 54 'users': require('!!raw-loader?!../../../assets/images/global/users.svg'),
55 'search': require('!!raw-loader?!../../../assets/images/global/search.svg'), 55 'search': require('!!raw-loader?!../../../assets/images/global/search.svg'),
56 'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg') 56 'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg'),
57 'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg')
57} 58}
58 59
59export type GlobalIconName = keyof typeof icons 60export type GlobalIconName = keyof typeof icons
diff --git a/client/src/assets/images/global/npm.svg b/client/src/assets/images/global/npm.svg
new file mode 100644
index 000000000..ec8f41243
--- /dev/null
+++ b/client/src/assets/images/global/npm.svg
@@ -0,0 +1,6 @@
1<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 18 7" style="transform: scale(1.3) translateY(1px);">
2 <path fill="#00000" d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z"/>
3 <polygon fill="#FFFFFF" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 "/>
4 <polygon fill="#FFFFFF" d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z"/>
5 <polygon fill="#FFFFFF" points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 "/>
6</svg>