aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-12-29 10:41:48 +0100
committerChocobozzz <me@florianbigard.com>2021-12-29 10:41:48 +0100
commit29aedac8dcfc98ff67680d91d6f0f848e86fa4db (patch)
treeea72e501d88f34b566f0ddd231110d5766fcdfeb /client
parent087fc5dadec95061c05bd0b6c86197a32ec4f23c (diff)
downloadPeerTube-29aedac8dcfc98ff67680d91d6f0f848e86fa4db.tar.gz
PeerTube-29aedac8dcfc98ff67680d91d6f0f848e86fa4db.tar.zst
PeerTube-29aedac8dcfc98ff67680d91d6f0f848e86fa4db.zip
Refactor plugin card
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+admin/admin.module.ts14
-rw-r--r--client/src/app/+admin/plugins/index.ts5
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/index.ts1
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html50
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss5
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts1
-rw-r--r--client/src/app/+admin/plugins/plugin-search/index.ts1
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html52
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts5
-rw-r--r--client/src/app/+admin/plugins/plugin-show-installed/index.ts1
-rw-r--r--client/src/app/+admin/plugins/shared/index.ts2
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-card.component.html27
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-card.component.scss (renamed from client/src/app/+admin/plugins/shared/plugin-list.component.scss)5
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-card.component.ts24
14 files changed, 110 insertions, 83 deletions
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 36a68ba91..dbced0e86 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -41,11 +41,14 @@ import {
41 VideoAdminService, 41 VideoAdminService,
42 VideoListComponent 42 VideoListComponent
43} from './overview' 43} from './overview'
44import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component' 44import {
45import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component' 45 PluginApiService,
46import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component' 46 PluginCardComponent,
47import { PluginsComponent } from './plugins/plugins.component' 47 PluginListInstalledComponent,
48import { PluginApiService } from './plugins/shared/plugin-api.service' 48 PluginsComponent,
49 PluginSearchComponent,
50 PluginShowInstalledComponent
51} from './plugins'
49import { JobService, LogsComponent, LogsService } from './system' 52import { JobService, LogsComponent, LogsService } from './system'
50import { DebugComponent, DebugService } from './system/debug' 53import { DebugComponent, DebugService } from './system/debug'
51import { JobsComponent } from './system/jobs/jobs.component' 54import { JobsComponent } from './system/jobs/jobs.component'
@@ -99,6 +102,7 @@ import { JobsComponent } from './system/jobs/jobs.component'
99 PluginListInstalledComponent, 102 PluginListInstalledComponent,
100 PluginSearchComponent, 103 PluginSearchComponent,
101 PluginShowInstalledComponent, 104 PluginShowInstalledComponent,
105 PluginCardComponent,
102 106
103 JobsComponent, 107 JobsComponent,
104 LogsComponent, 108 LogsComponent,
diff --git a/client/src/app/+admin/plugins/index.ts b/client/src/app/+admin/plugins/index.ts
index b75a94556..c70b6568e 100644
--- a/client/src/app/+admin/plugins/index.ts
+++ b/client/src/app/+admin/plugins/index.ts
@@ -1 +1,6 @@
1export * from './plugins.component' 1export * from './plugins.component'
2export * from './shared'
3export * from './plugin-list-installed'
4export * from './plugin-search'
5export * from './plugin-show-installed'
6
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/index.ts b/client/src/app/+admin/plugins/plugin-list-installed/index.ts
new file mode 100644
index 000000000..0704fd22e
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-list-installed/index.ts
@@ -0,0 +1 @@
export * from './plugin-list-installed.component'
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 b42bd27c5..2591c9a50 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
@@ -7,39 +7,21 @@
7</div> 7</div>
8 8
9<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> 9<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
10 <div class="card plugin" *ngFor="let plugin of plugins"> 10 <ng-container *ngFor="let plugin of plugins">
11 <div class="card-body"> 11 <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
12 <div class="first-row"> 12 <div ngProjectAs="buttons">
13 <span class="plugin-name">{{ plugin.name }}</span> 13 <my-edit-button
14 14 *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
15 <span class="plugin-version">{{ plugin.version }}</span> 15 [responsiveLabel]="true"
16 16 ></my-edit-button>
17 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)"> 17
18 <my-global-icon iconName="home"></my-global-icon> 18 <my-button
19 </a> 19 class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
20 20 [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
21 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)"> 21 ></my-button>
22 <my-global-icon iconName="npm"></my-global-icon> 22
23 </a> 23 <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
24
25 <div class="buttons">
26 <my-edit-button
27 *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
28 [responsiveLabel]="true"
29 ></my-edit-button>
30
31 <my-button
32 class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
33 [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
34 ></my-button>
35
36 <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
37 </div>
38 </div>
39
40 <div class="second-row">
41 <div class="description">{{ plugin.description }}</div>
42 </div> 24 </div>
43 </div> 25 </my-plugin-card>
44 </div> 26 </ng-container>
45</div> 27</div>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 5fa117d51..4039f2a02 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -4,3 +4,8 @@
4.update-button[disabled=true] ::ng-deep .action-button { 4.update-button[disabled=true] ::ng-deep .action-button {
5 cursor: default !important; 5 cursor: default !important;
6} 6}
7
8my-edit-button,
9my-button {
10 @include margin-right(10px);
11}
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 85f9879bf..6fd238848 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -12,7 +12,6 @@ import { PeerTubePlugin, PluginType } from '@shared/models'
12 templateUrl: './plugin-list-installed.component.html', 12 templateUrl: './plugin-list-installed.component.html',
13 styleUrls: [ 13 styleUrls: [
14 '../shared/toggle-plugin-type.scss', 14 '../shared/toggle-plugin-type.scss',
15 '../shared/plugin-list.component.scss',
16 './plugin-list-installed.component.scss' 15 './plugin-list-installed.component.scss'
17 ] 16 ]
18}) 17})
diff --git a/client/src/app/+admin/plugins/plugin-search/index.ts b/client/src/app/+admin/plugins/plugin-search/index.ts
new file mode 100644
index 000000000..5bb90a62f
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-search/index.ts
@@ -0,0 +1 @@
export * from './plugin-search.component'
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 a0d228702..14f28f7ef 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
@@ -30,45 +30,29 @@
30</div> 30</div>
31 31
32<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> 32<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
33 <div class="card plugin" *ngFor="let plugin of plugins"> 33 <ng-container *ngFor="let plugin of plugins" >
34 <div class="card-body"> 34 <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
35 <div class="first-row"> 35 <div ngProjectAs="badges">
36 <span class="plugin-name">{{ plugin.name }}</span> 36 <span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span>
37
38 <span class="plugin-version">{{ plugin.latestVersion }}</span>
39
40 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
41 <my-global-icon iconName="home"></my-global-icon>
42 </a>
43
44 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin npm package (new window)">
45 <my-global-icon iconName="npm"></my-global-icon>
46 </a>
47
48 <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
49
50 37
51 <span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft"> 38 <span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
52 Official 39 Official
53 </span> 40 </span>
54
55 <div class="buttons">
56 <my-edit-button
57 *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
58 label="Settings" i18n-label [responsiveLabel]="true"
59 ></my-edit-button>
60
61 <my-button
62 class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
63 [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
64 icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
65 ></my-button>
66 </div>
67 </div> 41 </div>
68 42
69 <div class="second-row"> 43 <div ngProjectAs="buttons">
70 <div class="description">{{ plugin.description }}</div> 44 <my-edit-button
45 *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
46 label="Settings" i18n-label [responsiveLabel]="true"
47 ></my-edit-button>
48
49 <my-button
50 class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
51 [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
52 icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
53 ></my-button>
71 </div> 54 </div>
72 </div> 55
73 </div> 56 </my-plugin-card>
57 </ng-container>
74</div> 58</div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index 803777eb3..ef704c83b 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -11,7 +11,6 @@ import { PeerTubePluginIndex, PluginType } from '@shared/models'
11 templateUrl: './plugin-search.component.html', 11 templateUrl: './plugin-search.component.html',
12 styleUrls: [ 12 styleUrls: [
13 '../shared/toggle-plugin-type.scss', 13 '../shared/toggle-plugin-type.scss',
14 '../shared/plugin-list.component.scss',
15 './plugin-search.component.scss' 14 './plugin-search.component.scss'
16 ] 15 ]
17}) 16})
@@ -115,10 +114,6 @@ export class PluginSearchComponent implements OnInit {
115 return !!this.installing[plugin.npmName] 114 return !!this.installing[plugin.npmName]
116 } 115 }
117 116
118 getPluginOrThemeHref (name: string) {
119 return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
120 }
121
122 getShowRouterLink (plugin: PeerTubePluginIndex) { 117 getShowRouterLink (plugin: PeerTubePluginIndex) {
123 return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ] 118 return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
124 } 119 }
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/index.ts b/client/src/app/+admin/plugins/plugin-show-installed/index.ts
new file mode 100644
index 000000000..8aeceb90f
--- /dev/null
+++ b/client/src/app/+admin/plugins/plugin-show-installed/index.ts
@@ -0,0 +1 @@
export * from './plugin-show-installed.component'
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 @@
1export * from './plugin-api.service'
2export * 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 @@
1<div class="card plugin">
2 <div class="card-body">
3 <div class="first-row">
4 <span class="plugin-name">{{ plugin.name }}</span>
5
6 <span class="plugin-version">{{ version }}</span>
7
8 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
9 <my-global-icon iconName="home"></my-global-icon>
10 </a>
11
12 <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
13 <my-global-icon iconName="npm"></my-global-icon>
14 </a>
15
16 <ng-content select="badges"></ng-content>
17
18 <div class="buttons">
19 <ng-content select="buttons"></ng-content>
20 </div>
21 </div>
22
23 <div class="second-row">
24 <div class="description">{{ plugin.description }}</div>
25 </div>
26 </div>
27</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 @@
36 36
37 .buttons { 37 .buttons {
38 @include margin-left(auto); 38 @include margin-left(auto);
39 width: max-content;
40 39
41 > *:not(:last-child) { 40 width: max-content;
42 @include margin-right(10px);
43 }
44 } 41 }
45} 42}
46 43
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 @@
1import { Component, Input } from '@angular/core'
2import { PeerTubePlugin, PeerTubePluginIndex, PluginType } from '@shared/models'
3import { PluginApiService } from './plugin-api.service'
4
5@Component({
6 selector: 'my-plugin-card',
7 templateUrl: './plugin-card.component.html',
8 styleUrls: [ './plugin-card.component.scss' ]
9})
10
11export class PluginCardComponent {
12 @Input() plugin: PeerTubePluginIndex | PeerTubePlugin
13 @Input() version: string
14 @Input() pluginType: PluginType
15
16 constructor (
17 private pluginApiService: PluginApiService
18 ) {
19 }
20
21 getPluginOrThemeHref (name: string) {
22 return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
23 }
24}