Refactor plugin card

4 files changed, 54 insertions, 4 deletions

diff --git a/client/src/app/+admin/plugins/shared/index.ts b/client/src/app/+admin/plugins/shared/index.ts
new file mode 100644
index 000000000..de037c437
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/index.ts
@@ -0,0 +1,2 @@
+export * from './plugin-api.service'
+export * from './plugin-card.component'
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.html b/client/src/app/+admin/plugins/shared/plugin-card.component.html
new file mode 100644
index 000000000..c9fe6201c
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.html
@@ -0,0 +1,27 @@
+<div class="card plugin">
+  <div class="card-body">
+    <div class="first-row">
+      <span class="plugin-name">{{ plugin.name }}</span>
+
+      <span class="plugin-version">{{ version }}</span>
+
+      <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
+        <my-global-icon iconName="home"></my-global-icon>
+      </a>
+
+      <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
+        <my-global-icon iconName="npm"></my-global-icon>
+      </a>
+
+      <ng-content select="badges"></ng-content>
+
+      <div class="buttons">
+        <ng-content select="buttons"></ng-content>
+      </div>
+    </div>
+
+    <div class="second-row">
+      <div class="description">{{ plugin.description }}</div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
index 01c6ee64d..608064722 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -36,11 +36,8 @@
 
   .buttons {
     @include margin-left(auto);
-    width: max-content;
 
-    > *:not(:last-child) {
-      @include margin-right(10px);
-    }
+    width: max-content;
   }
 }
 
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.ts b/client/src/app/+admin/plugins/shared/plugin-card.component.ts
new file mode 100644
index 000000000..462a6c213
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core'
+import { PeerTubePlugin, PeerTubePluginIndex, PluginType } from '@shared/models'
+import { PluginApiService } from './plugin-api.service'
+
+@Component({
+  selector: 'my-plugin-card',
+  templateUrl: './plugin-card.component.html',
+  styleUrls: [ './plugin-card.component.scss' ]
+})
+
+export class PluginCardComponent {
+  @Input() plugin: PeerTubePluginIndex | PeerTubePlugin
+  @Input() version: string
+  @Input() pluginType: PluginType
+
+  constructor (
+    private pluginApiService: PluginApiService
+  ) {
+  }
+
+  getPluginOrThemeHref (name: string) {
+    return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
+  }
+}