Merge branch 'release/3.1.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / plugins / plugin-search / plugin-search.component.html

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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8edf03a89946083e5da6a4ec30f9c8c66f9cac72 100644 (file)
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -0,0 +1,62 @@
+<div class="toggle-plugin-type">
+  <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
+</div>
+
+<div class="search-bar">
+  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." autofocus />
+</div>
+
+<div class="alert alert-info" i18n *ngIf="pluginInstalled">
+  To load your new installed plugins or themes, refresh the page.
+</div>
+
+<div class="result-title" *ngIf="!isSearching">
+  <ng-container *ngIf="!search">
+    <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>Popular</ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="!!search">
+    <my-global-icon iconName="search"></my-global-icon>
+
+    <ng-container i18n>
+      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for {{ search }}"
+    </ng-container>
+  </ng-container>
+</div>
+
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">
+  No results.
+</div>
+
+<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
+  <div class="card plugin" *ngFor="let plugin of plugins">
+    <div class="card-body">
+      <div class="first-row">
+        <span class="plugin-name">{{ plugin.name }}</span>
+
+        <span class="plugin-version">{{ plugin.latestVersion }}</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 npm package (new window)">
+          <my-global-icon iconName="npm"></my-global-icon>
+        </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>