From 2accfdd8ecd092de7e8c71fbd1235e139ad29832 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 29 Dec 2021 12:14:06 +0100 Subject: [PATCH] Refactor admin plugins --- client/angular.json | 8 +++-- client/src/app/+admin/admin.module.ts | 6 ++-- client/src/app/+admin/plugins/index.ts | 2 -- .../plugin-list-installed.component.html | 4 +-- .../plugin-list-installed.component.ts | 26 +++++++------- .../plugin-search.component.html | 19 +++++----- .../plugin-search.component.scss | 24 ++++++------- .../plugin-search/plugin-search.component.ts | 34 +++++++++--------- .../app/+admin/plugins/plugins.component.html | 9 ----- .../app/+admin/plugins/plugins.component.ts | 7 ---- .../src/app/+admin/plugins/plugins.routes.ts | 2 -- client/src/app/+admin/plugins/shared/index.ts | 1 + .../plugins/shared/plugin-api.service.ts | 13 ------- .../shared/plugin-navigation.component.html | 11 ++++++ ....scss => plugin-navigation.component.scss} | 7 ++-- .../shared/plugin-navigation.component.ts | 11 ++++++ client/src/sass/application.scss | 35 ------------------- client/src/sass/bootstrap.scss | 28 +++++++++++++++ 18 files changed, 116 insertions(+), 131 deletions(-) delete mode 100644 client/src/app/+admin/plugins/plugins.component.html delete mode 100644 client/src/app/+admin/plugins/plugins.component.ts create mode 100644 client/src/app/+admin/plugins/shared/plugin-navigation.component.html rename client/src/app/+admin/plugins/shared/{toggle-plugin-type.scss => plugin-navigation.component.scss} (56%) create mode 100644 client/src/app/+admin/plugins/shared/plugin-navigation.component.ts diff --git a/client/angular.json b/client/angular.json index 6434c30cc..a5f7ce170 100644 --- a/client/angular.json +++ b/client/angular.json @@ -302,11 +302,13 @@ "defaultProject": "PeerTube", "schematics": { "@schematics/angular:component": { - "prefix": "app", - "style": "scss" + "prefix": "my", + "style": "scss", + "skipTests": true, + "flat": true }, "@schematics/angular:directive": { - "prefix": "app" + "prefix": "my" } } } diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts index dbced0e86..e0dea3ba5 100644 --- a/client/src/app/+admin/admin.module.ts +++ b/client/src/app/+admin/admin.module.ts @@ -1,5 +1,4 @@ import { ChartModule } from 'primeng/chart' -import { SelectButtonModule } from 'primeng/selectbutton' import { TableModule } from 'primeng/table' import { NgModule } from '@angular/core' import { SharedAbuseListModule } from '@app/shared/shared-abuse-list' @@ -45,7 +44,7 @@ import { PluginApiService, PluginCardComponent, PluginListInstalledComponent, - PluginsComponent, + PluginNavigationComponent, PluginSearchComponent, PluginShowInstalledComponent } from './plugins' @@ -70,7 +69,6 @@ import { JobsComponent } from './system/jobs/jobs.component' SharedTablesModule, TableModule, - SelectButtonModule, ChartModule ], @@ -98,11 +96,11 @@ import { JobsComponent } from './system/jobs/jobs.component' InstanceServerBlocklistComponent, InstanceAccountBlocklistComponent, - PluginsComponent, PluginListInstalledComponent, PluginSearchComponent, PluginShowInstalledComponent, PluginCardComponent, + PluginNavigationComponent, JobsComponent, LogsComponent, diff --git a/client/src/app/+admin/plugins/index.ts b/client/src/app/+admin/plugins/index.ts index c70b6568e..30de8dc8f 100644 --- a/client/src/app/+admin/plugins/index.ts +++ b/client/src/app/+admin/plugins/index.ts @@ -1,6 +1,4 @@ -export * from './plugins.component' export * from './shared' export * from './plugin-list-installed' export * from './plugin-search' export * from './plugin-show-installed' - 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 2591c9a50..c5d440c8c 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 @@ -1,6 +1,4 @@ -
- -
+
{{ getNoResultMessage() }} 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 6fd238848..6d66869dd 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 @@ -10,14 +10,10 @@ import { PeerTubePlugin, PluginType } from '@shared/models' @Component({ selector: 'my-plugin-list-installed', templateUrl: './plugin-list-installed.component.html', - styleUrls: [ - '../shared/toggle-plugin-type.scss', - './plugin-list-installed.component.scss' - ] + styleUrls: [ './plugin-list-installed.component.scss' ] }) export class PluginListInstalledComponent implements OnInit { - pluginTypeOptions: { label: string, value: PluginType }[] = [] - pluginType: PluginType = PluginType.PLUGIN + pluginType: PluginType pagination: ComponentPagination = { currentPage: 1, @@ -39,22 +35,28 @@ export class PluginListInstalledComponent implements OnInit { private router: Router, private route: ActivatedRoute ) { - this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions() } ngOnInit () { - const query = this.route.snapshot.queryParams - if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) + if (!this.route.snapshot.queryParams['pluginType']) { + const queryParams = { pluginType: PluginType.PLUGIN } - this.reloadPlugins() + this.router.navigate([], { queryParams }) + } + + this.route.queryParams.subscribe(query => { + if (!query['pluginType']) return + + this.pluginType = parseInt(query['pluginType'], 10) + + this.reloadPlugins() + }) } reloadPlugins () { this.pagination.currentPage = 1 this.plugins = [] - this.router.navigate([], { queryParams: { pluginType: this.pluginType } }) - this.loadMorePlugins() } 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 14f28f7ef..33575ef52 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 @@ -1,28 +1,27 @@ -
- -
- -
- -
+
To load your new installed plugins or themes, refresh the page.
-
+
- Popular + Popular plugins + Popular themes - + {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}" + +
+ +
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss index 16b838682..8bb710fc2 100644 --- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss +++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss @@ -1,24 +1,24 @@ @use '_variables' as *; @use '_mixins' as *; -.search-bar { +.result-and-search { + font-size: 22px; + font-weight: 600; + margin: 30px 0 15px; display: flex; - justify-content: center; - margin: 30px 0; - input { - @include peertube-input-text(60%); - height: 35px; + my-global-icon { + @include margin-right(5px); } } -.result-title { - font-size: 22px; - font-weight: 600; - margin-bottom: 15px; +.search-bar { + margin-left: auto; - my-global-icon { - @include margin-right(5px); + input { + @include peertube-input-text(500px); + + height: 35px; } } 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 ef704c83b..d39c2ea1c 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 @@ -9,14 +9,10 @@ import { PeerTubePluginIndex, PluginType } from '@shared/models' @Component({ selector: 'my-plugin-search', templateUrl: './plugin-search.component.html', - styleUrls: [ - '../shared/toggle-plugin-type.scss', - './plugin-search.component.scss' - ] + styleUrls: [ './plugin-search.component.scss' ] }) export class PluginSearchComponent implements OnInit { - pluginTypeOptions: { label: string, value: PluginType }[] = [] - pluginType: PluginType = PluginType.PLUGIN + pluginType: PluginType pagination: ComponentPagination = { currentPage: 1, @@ -44,24 +40,30 @@ export class PluginSearchComponent implements OnInit { private router: Router, private route: ActivatedRoute ) { - this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions() } ngOnInit () { - const query = this.route.snapshot.queryParams - if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) + if (!this.route.snapshot.queryParams['pluginType']) { + const queryParams = { pluginType: PluginType.PLUGIN } + + this.router.navigate([], { queryParams }) + } + + this.route.queryParams.subscribe(query => { + if (!query['pluginType']) return + + this.pluginType = parseInt(query['pluginType'], 10) + this.search = query['search'] || '' + + this.reloadPlugins() + }) this.searchSubject.asObservable() .pipe( debounceTime(400), distinctUntilChanged() ) - .subscribe(search => { - this.search = search - this.reloadPlugins() - }) - - this.reloadPlugins() + .subscribe(search => this.router.navigate([], { queryParams: { search }, queryParamsHandling: 'merge' })) } onSearchChange (event: Event) { @@ -74,8 +76,6 @@ export class PluginSearchComponent implements OnInit { this.pagination.currentPage = 1 this.plugins = [] - this.router.navigate([], { queryParams: { pluginType: this.pluginType } }) - this.loadMorePlugins() } diff --git a/client/src/app/+admin/plugins/plugins.component.html b/client/src/app/+admin/plugins/plugins.component.html deleted file mode 100644 index 199ae12cf..000000000 --- a/client/src/app/+admin/plugins/plugins.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- Installed - - Search -
-
- - diff --git a/client/src/app/+admin/plugins/plugins.component.ts b/client/src/app/+admin/plugins/plugins.component.ts deleted file mode 100644 index de06c0671..000000000 --- a/client/src/app/+admin/plugins/plugins.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core' - -@Component({ - templateUrl: './plugins.component.html' -}) -export class PluginsComponent { -} diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts index 4cf55dda2..f735a490b 100644 --- a/client/src/app/+admin/plugins/plugins.routes.ts +++ b/client/src/app/+admin/plugins/plugins.routes.ts @@ -2,14 +2,12 @@ import { Routes } from '@angular/router' import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component' import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component' import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component' -import { PluginsComponent } from '@app/+admin/plugins/plugins.component' import { UserRightGuard } from '@app/core' import { UserRight } from '@shared/models' export const PluginsRoutes: Routes = [ { path: 'plugins', - component: PluginsComponent, canActivate: [ UserRightGuard ], data: { userRight: UserRight.MANAGE_PLUGINS diff --git a/client/src/app/+admin/plugins/shared/index.ts b/client/src/app/+admin/plugins/shared/index.ts index de037c437..6d616b372 100644 --- a/client/src/app/+admin/plugins/shared/index.ts +++ b/client/src/app/+admin/plugins/shared/index.ts @@ -1,2 +1,3 @@ export * from './plugin-api.service' export * from './plugin-card.component' +export * from './plugin-navigation.component' diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts index b95ee0c9d..fbfdaea18 100644 --- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts +++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts @@ -25,19 +25,6 @@ export class PluginApiService { private pluginService: PluginService ) { } - getPluginTypeOptions () { - return [ - { - label: $localize`Plugins`, - value: PluginType.PLUGIN - }, - { - label: $localize`Themes`, - value: PluginType.THEME - } - ] - } - getPluginTypeLabel (type: PluginType) { if (type === PluginType.PLUGIN) { return $localize`plugin` diff --git a/client/src/app/+admin/plugins/shared/plugin-navigation.component.html b/client/src/app/+admin/plugins/shared/plugin-navigation.component.html new file mode 100644 index 000000000..fd298d145 --- /dev/null +++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.html @@ -0,0 +1,11 @@ +
+
+ Installed + Search +
+ +
+ Plugins + Themes +
+
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/plugin-navigation.component.scss similarity index 56% rename from client/src/app/+admin/plugins/shared/toggle-plugin-type.scss rename to client/src/app/+admin/plugins/shared/plugin-navigation.component.scss index 67213ea72..5802acd56 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.scss @@ -1,8 +1,11 @@ @use '_variables' as *; @use '_mixins' as *; -.toggle-plugin-type { +.root { display: flex; justify-content: center; - margin-bottom: 30px; +} + +.btn-group:not(:last-child) { + @include margin-right(15px); } diff --git a/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts b/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts new file mode 100644 index 000000000..1c963f521 --- /dev/null +++ b/client/src/app/+admin/plugins/shared/plugin-navigation.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core' +import { PluginType } from '@shared/models/plugins' + +@Component({ + selector: 'my-plugin-navigation', + templateUrl: './plugin-navigation.component.html', + styleUrls: [ './plugin-navigation.component.scss' ] +}) +export class PluginNavigationComponent { + @Input() pluginType: PluginType +} diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 87a21543d..9f64f7426 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -261,28 +261,6 @@ my-input-toggle-hidden ::ng-deep input { display: flex; align-items: center; margin-bottom: 30px; - - .admin-sub-nav a { - @include disable-default-a-behaviour; - - font-size: 16px; - color: pvar(--mainForegroundColor); - padding: 5px 15px; - border-radius: 0.25rem; - font-weight: $font-semibold; - opacity: 0.6; - - &.active { - background-color: pvar(--submenuBackgroundColor); - } - - &.active, - &:hover, - &:active, - &:focus { - opacity: 1; - } - } } // In tables, don't have a hover different background @@ -402,19 +380,6 @@ ngx-loading-bar { .admin-sub-header { flex-direction: column; - - .admin-sub-nav { - display: block; - overflow-x: auto; - white-space: nowrap; - height: 50px; - padding: 10px 0; - width: 100%; - - a { - @include margin-left(5px); - } - } } my-markdown-textarea { diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 4e88d9706..b6aeb8ca2 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -334,6 +334,34 @@ ngb-tooltip-window { } } +.btn-group { + font-weight: $font-semibold; + + .active { + @include orange-button; + } + + :not(.active) { + @include grey-button; + } + + > * { + @include peertube-button-link; + + box-shadow: none !important; + + &:not(:first-child) { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + &:not(:last-child) { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + } +} + // input box-shadow on focus .form-control { font-size: 15px; -- 2.41.0