interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Better use of space and icons in plugins administration interface

This commit is contained in:
Rigel Kent 2020-03-10 23:42:52 +01:00
parent 9b3078581f
commit 03efb1419d
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
7 changed files with 56 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CREDITS.md
View File

@ -336,3 +336,4 @@
* [Fork-Awesome](https://github.com/ForkAwesome/Fork-Awesome)
* `playlist add` by Material UI
* `language` by Aaron Jin
* `npm` by Boboss74

23
client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
View File

@ -10,22 +10,19 @@
<div class="card plugin" *ngFor="let plugin of plugins">
<div class="card-body">
<div class="first-row">
<a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" i18n-title title="Show plugin settings">{{ plugin.name }}</a>
<span class="plugin-name">{{ plugin.name }}</span>
<span class="plugin-version">{{ plugin.version }}</span>
</div>
<div class="second-row">
<div class="description">{{ plugin.description }}</div>
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Go to the plugin homepage">
<my-global-icon iconName="home"></my-global-icon>
</a>
<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">
<my-global-icon iconName="npm"></my-global-icon>
</a>
<div class="buttons">
<a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
[href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
>
<my-global-icon iconName="go"></my-global-icon>
<span i18n class="button-label">Homepage</span>
</a>
<my-edit-button *ngIf="pluginType !== PluginType.THEME" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
<my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
@ -35,6 +32,10 @@
<my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
</div>
</div>
<div class="second-row">
<div class="description">{{ plugin.description }}</div>
</div>
</div>
</div>
</div>

23
client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
View File

@ -37,25 +37,26 @@
<span class="plugin-version">{{ plugin.latestVersion }}</span>
<span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
</div>
<a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Go to the plugin homepage">
<my-global-icon iconName="home"></my-global-icon>
</a>
<div class="second-row">
<div class="description">{{ plugin.description }}</div>
<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">
<my-global-icon iconName="npm"></my-global-icon>
</a>
<span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
<div class="buttons">
<a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
[href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
>
<my-global-icon iconName="go"></my-global-icon>
<span i18n class="button-label">Homepage</span>
</a>
<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>
</div>
</div>
<div class="second-row">
<div class="description">{{ plugin.description }}</div>
</div>
</div>
</div>
</div>

2
client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
View File

@ -25,5 +25,5 @@
.badge {
font-size: 13px;
font-weight: $font-semibold;
margin-left: 5px;
margin-left: 15px;
}

29
client/src/app/+admin/plugins/shared/plugin-list.component.scss
View File

@ -7,6 +7,8 @@
}
.first-row {
display: flex;
align-items: center;
margin-bottom: 10px;
.plugin-name {
@ -18,6 +20,26 @@
.plugin-version {
opacity: 0.6;
}
.plugin-icon {
margin-left: 10px;
my-global-icon {
@include apply-svg-color($grey-foreground-color);
&[iconName="npm"] {
@include fill-svg-color($grey-foreground-color);
}
}
}
.buttons {
margin-left: auto;
width: max-content;
> *:not(:last-child) {
margin-right: 10px;
}
}
}
.second-row {
@ -29,13 +51,6 @@
.description {
opacity: 0.8
}
.buttons {
margin-left: 10px;
> *:not(:last-child) {
margin-right: 10px;
}
}
}
.action-button {

3
client/src/app/shared/images/global-icon.component.ts
View File

@ -53,7 +53,8 @@ const icons = {
'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg'),
'users': require('!!raw-loader?!../../../assets/images/global/users.svg'),
'search': require('!!raw-loader?!../../../assets/images/global/search.svg'),
'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg')
'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg'),
'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg')
}
export type GlobalIconName = keyof typeof icons

6
client/src/assets/images/global/npm.svg Normal file
View File

@ -0,0 +1,6 @@
<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);">
<path fill="#00000" d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z"/>
<polygon fill="#FFFFFF" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 "/>
<polygon fill="#FFFFFF" d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z"/>
<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 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 546 B