Better use of space and icons in plugins administration interface

CREDITS.md

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

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

@@ -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>
 
-        <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>
+        <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">
           <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>

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

@@ -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>
 
-        <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>
+        <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
 
+        <div class="buttons">
           <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>

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

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

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

@@ -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 {

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

@@ -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

client/src/assets/images/global/npm.svg

@@ -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>