aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-12-29 12:14:06 +0100
committerChocobozzz <me@florianbigard.com>2021-12-29 12:17:11 +0100
commit2accfdd8ecd092de7e8c71fbd1235e139ad29832 (patch)
tree24b5bb7da7192fa11054a48ac0e4384b8ec8fb72
parent9744bb2ae8284c4589b66055c1d99997abf18748 (diff)
downloadPeerTube-2accfdd8ecd092de7e8c71fbd1235e139ad29832.tar.gz
PeerTube-2accfdd8ecd092de7e8c71fbd1235e139ad29832.tar.zst
PeerTube-2accfdd8ecd092de7e8c71fbd1235e139ad29832.zip
Refactor admin plugins
-rw-r--r--client/angular.json8
-rw-r--r--client/src/app/+admin/admin.module.ts6
-rw-r--r--client/src/app/+admin/plugins/index.ts2
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html4
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts26
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html19
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss24
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts34
-rw-r--r--client/src/app/+admin/plugins/plugins.component.html9
-rw-r--r--client/src/app/+admin/plugins/plugins.component.ts7
-rw-r--r--client/src/app/+admin/plugins/plugins.routes.ts2
-rw-r--r--client/src/app/+admin/plugins/shared/index.ts1
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-api.service.ts13
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-navigation.component.html11
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-navigation.component.scss (renamed from client/src/app/+admin/plugins/shared/toggle-plugin-type.scss)7
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-navigation.component.ts11
-rw-r--r--client/src/sass/application.scss35
-rw-r--r--client/src/sass/bootstrap.scss28
18 files changed, 116 insertions, 131 deletions
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 @@
302 "defaultProject": "PeerTube", 302 "defaultProject": "PeerTube",
303 "schematics": { 303 "schematics": {
304 "@schematics/angular:component": { 304 "@schematics/angular:component": {
305 "prefix": "app", 305 "prefix": "my",
306 "style": "scss" 306 "style": "scss",
307 "skipTests": true,
308 "flat": true
307 }, 309 },
308 "@schematics/angular:directive": { 310 "@schematics/angular:directive": {
309 "prefix": "app" 311 "prefix": "my"
310 } 312 }
311 } 313 }
312} 314}
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 @@
1import { ChartModule } from 'primeng/chart' 1import { ChartModule } from 'primeng/chart'
2import { SelectButtonModule } from 'primeng/selectbutton'
3import { TableModule } from 'primeng/table' 2import { TableModule } from 'primeng/table'
4import { NgModule } from '@angular/core' 3import { NgModule } from '@angular/core'
5import { SharedAbuseListModule } from '@app/shared/shared-abuse-list' 4import { SharedAbuseListModule } from '@app/shared/shared-abuse-list'
@@ -45,7 +44,7 @@ import {
45 PluginApiService, 44 PluginApiService,
46 PluginCardComponent, 45 PluginCardComponent,
47 PluginListInstalledComponent, 46 PluginListInstalledComponent,
48 PluginsComponent, 47 PluginNavigationComponent,
49 PluginSearchComponent, 48 PluginSearchComponent,
50 PluginShowInstalledComponent 49 PluginShowInstalledComponent
51} from './plugins' 50} from './plugins'
@@ -70,7 +69,6 @@ import { JobsComponent } from './system/jobs/jobs.component'
70 SharedTablesModule, 69 SharedTablesModule,
71 70
72 TableModule, 71 TableModule,
73 SelectButtonModule,
74 ChartModule 72 ChartModule
75 ], 73 ],
76 74
@@ -98,11 +96,11 @@ import { JobsComponent } from './system/jobs/jobs.component'
98 InstanceServerBlocklistComponent, 96 InstanceServerBlocklistComponent,
99 InstanceAccountBlocklistComponent, 97 InstanceAccountBlocklistComponent,
100 98
101 PluginsComponent,
102 PluginListInstalledComponent, 99 PluginListInstalledComponent,
103 PluginSearchComponent, 100 PluginSearchComponent,
104 PluginShowInstalledComponent, 101 PluginShowInstalledComponent,
105 PluginCardComponent, 102 PluginCardComponent,
103 PluginNavigationComponent,
106 104
107 JobsComponent, 105 JobsComponent,
108 LogsComponent, 106 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 @@
1export * from './plugins.component'
2export * from './shared' 1export * from './shared'
3export * from './plugin-list-installed' 2export * from './plugin-list-installed'
4export * from './plugin-search' 3export * from './plugin-search'
5export * from './plugin-show-installed' 4export * from './plugin-show-installed'
6
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 @@
1<div class="toggle-plugin-type"> 1<my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
2 <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
3</div>
4 2
5<div class="no-results" *ngIf="pagination.totalItems === 0"> 3<div class="no-results" *ngIf="pagination.totalItems === 0">
6 {{ getNoResultMessage() }} 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'
10@Component({ 10@Component({
11 selector: 'my-plugin-list-installed', 11 selector: 'my-plugin-list-installed',
12 templateUrl: './plugin-list-installed.component.html', 12 templateUrl: './plugin-list-installed.component.html',
13 styleUrls: [ 13 styleUrls: [ './plugin-list-installed.component.scss' ]
14 '../shared/toggle-plugin-type.scss',
15 './plugin-list-installed.component.scss'
16 ]
17}) 14})
18export class PluginListInstalledComponent implements OnInit { 15export class PluginListInstalledComponent implements OnInit {
19 pluginTypeOptions: { label: string, value: PluginType }[] = [] 16 pluginType: PluginType
20 pluginType: PluginType = PluginType.PLUGIN
21 17
22 pagination: ComponentPagination = { 18 pagination: ComponentPagination = {
23 currentPage: 1, 19 currentPage: 1,
@@ -39,22 +35,28 @@ export class PluginListInstalledComponent implements OnInit {
39 private router: Router, 35 private router: Router,
40 private route: ActivatedRoute 36 private route: ActivatedRoute
41 ) { 37 ) {
42 this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions()
43 } 38 }
44 39
45 ngOnInit () { 40 ngOnInit () {
46 const query = this.route.snapshot.queryParams 41 if (!this.route.snapshot.queryParams['pluginType']) {
47 if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) 42 const queryParams = { pluginType: PluginType.PLUGIN }
48 43
49 this.reloadPlugins() 44 this.router.navigate([], { queryParams })
45 }
46
47 this.route.queryParams.subscribe(query => {
48 if (!query['pluginType']) return
49
50 this.pluginType = parseInt(query['pluginType'], 10)
51
52 this.reloadPlugins()
53 })
50 } 54 }
51 55
52 reloadPlugins () { 56 reloadPlugins () {
53 this.pagination.currentPage = 1 57 this.pagination.currentPage = 1
54 this.plugins = [] 58 this.plugins = []
55 59
56 this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
57
58 this.loadMorePlugins() 60 this.loadMorePlugins()
59 } 61 }
60 62
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 @@
1<div class="toggle-plugin-type"> 1<my-plugin-navigation [pluginType]="pluginType"></my-plugin-navigation>
2 <p-selectButton [options]="pluginTypeOptions" [(ngModel)]="pluginType" (ngModelChange)="reloadPlugins()"></p-selectButton>
3</div>
4
5<div class="search-bar">
6 <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
7</div>
8 2
9<div class="alert alert-info" i18n *ngIf="pluginInstalled"> 3<div class="alert alert-info" i18n *ngIf="pluginInstalled">
10 To load your new installed plugins or themes, refresh the page. 4 To load your new installed plugins or themes, refresh the page.
11</div> 5</div>
12 6
13<div class="result-title" *ngIf="!isSearching"> 7<div class="result-and-search">
14 <ng-container *ngIf="!search"> 8 <ng-container *ngIf="!search">
15 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon> 9 <my-global-icon iconName="trending" aria-hidden="true"></my-global-icon>
16 <ng-container i18n>Popular</ng-container> 10 <ng-container *ngIf="!isThemeSearch()" i18n>Popular plugins</ng-container>
11 <ng-container *ngIf="isThemeSearch()" i18n>Popular themes</ng-container>
17 </ng-container> 12 </ng-container>
18 13
19 <ng-container *ngIf="!!search"> 14 <ng-container *ngIf="search && !isSearching">
20 <my-global-icon iconName="search"></my-global-icon> 15 <my-global-icon iconName="search"></my-global-icon>
21 16
22 <ng-container i18n> 17 <ng-container i18n>
23 {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}" 18 {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
24 </ng-container> 19 </ng-container>
25 </ng-container> 20 </ng-container>
21
22 <div class="search-bar">
23 <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..." myAutofocus />
24 </div>
26</div> 25</div>
27 26
28<div class="no-results" i18n *ngIf="pagination.totalItems === 0"> 27<div class="no-results" i18n *ngIf="pagination.totalItems === 0">
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 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.search-bar { 4.result-and-search {
5 font-size: 22px;
6 font-weight: 600;
7 margin: 30px 0 15px;
5 display: flex; 8 display: flex;
6 justify-content: center;
7 margin: 30px 0;
8 9
9 input { 10 my-global-icon {
10 @include peertube-input-text(60%); 11 @include margin-right(5px);
11 height: 35px;
12 } 12 }
13} 13}
14 14
15.result-title { 15.search-bar {
16 font-size: 22px; 16 margin-left: auto;
17 font-weight: 600;
18 margin-bottom: 15px;
19 17
20 my-global-icon { 18 input {
21 @include margin-right(5px); 19 @include peertube-input-text(500px);
20
21 height: 35px;
22 } 22 }
23} 23}
24 24
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'
9@Component({ 9@Component({
10 selector: 'my-plugin-search', 10 selector: 'my-plugin-search',
11 templateUrl: './plugin-search.component.html', 11 templateUrl: './plugin-search.component.html',
12 styleUrls: [ 12 styleUrls: [ './plugin-search.component.scss' ]
13 '../shared/toggle-plugin-type.scss',
14 './plugin-search.component.scss'
15 ]
16}) 13})
17export class PluginSearchComponent implements OnInit { 14export class PluginSearchComponent implements OnInit {
18 pluginTypeOptions: { label: string, value: PluginType }[] = [] 15 pluginType: PluginType
19 pluginType: PluginType = PluginType.PLUGIN
20 16
21 pagination: ComponentPagination = { 17 pagination: ComponentPagination = {
22 currentPage: 1, 18 currentPage: 1,
@@ -44,24 +40,30 @@ export class PluginSearchComponent implements OnInit {
44 private router: Router, 40 private router: Router,
45 private route: ActivatedRoute 41 private route: ActivatedRoute
46 ) { 42 ) {
47 this.pluginTypeOptions = this.pluginApiService.getPluginTypeOptions()
48 } 43 }
49 44
50 ngOnInit () { 45 ngOnInit () {
51 const query = this.route.snapshot.queryParams 46 if (!this.route.snapshot.queryParams['pluginType']) {
52 if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10) 47 const queryParams = { pluginType: PluginType.PLUGIN }
48
49 this.router.navigate([], { queryParams })
50 }
51
52 this.route.queryParams.subscribe(query => {
53 if (!query['pluginType']) return
54
55 this.pluginType = parseInt(query['pluginType'], 10)
56 this.search = query['search'] || ''
57
58 this.reloadPlugins()
59 })
53 60
54 this.searchSubject.asObservable() 61 this.searchSubject.asObservable()
55 .pipe( 62 .pipe(
56 debounceTime(400), 63 debounceTime(400),
57 distinctUntilChanged() 64 distinctUntilChanged()
58 ) 65 )
59 .subscribe(search => { 66 .subscribe(search => this.router.navigate([], { queryParams: { search }, queryParamsHandling: 'merge' }))
60 this.search = search
61 this.reloadPlugins()
62 })
63
64 this.reloadPlugins()
65 } 67 }
66 68
67 onSearchChange (event: Event) { 69 onSearchChange (event: Event) {
@@ -74,8 +76,6 @@ export class PluginSearchComponent implements OnInit {
74 this.pagination.currentPage = 1 76 this.pagination.currentPage = 1
75 this.plugins = [] 77 this.plugins = []
76 78
77 this.router.navigate([], { queryParams: { pluginType: this.pluginType } })
78
79 this.loadMorePlugins() 79 this.loadMorePlugins()
80 } 80 }
81 81
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 @@
1<div class="admin-sub-header">
2 <div class="admin-sub-nav">
3 <a i18n routerLink="list-installed" routerLinkActive="active">Installed</a>
4
5 <a i18n routerLink="search" routerLinkActive="active">Search</a>
6 </div>
7</div>
8
9<router-outlet></router-outlet>
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 @@
1import { Component } from '@angular/core'
2
3@Component({
4 templateUrl: './plugins.component.html'
5})
6export class PluginsComponent {
7}
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'
2import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component' 2import { PluginListInstalledComponent } from '@app/+admin/plugins/plugin-list-installed/plugin-list-installed.component'
3import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component' 3import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-search.component'
4import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component' 4import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component'
5import { PluginsComponent } from '@app/+admin/plugins/plugins.component'
6import { UserRightGuard } from '@app/core' 5import { UserRightGuard } from '@app/core'
7import { UserRight } from '@shared/models' 6import { UserRight } from '@shared/models'
8 7
9export const PluginsRoutes: Routes = [ 8export const PluginsRoutes: Routes = [
10 { 9 {
11 path: 'plugins', 10 path: 'plugins',
12 component: PluginsComponent,
13 canActivate: [ UserRightGuard ], 11 canActivate: [ UserRightGuard ],
14 data: { 12 data: {
15 userRight: UserRight.MANAGE_PLUGINS 13 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 @@
1export * from './plugin-api.service' 1export * from './plugin-api.service'
2export * from './plugin-card.component' 2export * from './plugin-card.component'
3export * 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 {
25 private pluginService: PluginService 25 private pluginService: PluginService
26 ) { } 26 ) { }
27 27
28 getPluginTypeOptions () {
29 return [
30 {
31 label: $localize`Plugins`,
32 value: PluginType.PLUGIN
33 },
34 {
35 label: $localize`Themes`,
36 value: PluginType.THEME
37 }
38 ]
39 }
40
41 getPluginTypeLabel (type: PluginType) { 28 getPluginTypeLabel (type: PluginType) {
42 if (type === PluginType.PLUGIN) { 29 if (type === PluginType.PLUGIN) {
43 return $localize`plugin` 30 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 @@
1<div class="root">
2 <div class="btn-group" role="group" i18n-aria-label aria-label="Navigate between installed plugins and themes or find new ones">
3 <a i18n routerLink="/admin/plugins/list-installed" [queryParams]="{ pluginType: pluginType }" routerLinkActive="active">Installed</a>
4 <a i18n routerLink="/admin/plugins/search" [queryParams]="{ pluginType: pluginType }" routerLinkActive="active">Search</a>
5 </div>
6
7 <div class="btn-group" role="group" i18n-aria-label aria-label="Navigate between plugins and themes">
8 <a [ngClass]="{ active: pluginType === 1 }" routerLink="." [queryParams]="{ pluginType: 1 }" queryParamsHandling="merge" class="">Plugins</a>
9 <a [ngClass]="{ active: pluginType === 2 }" routerLink="." [queryParams]="{ pluginType: 2 }" queryParamsHandling="merge" class="">Themes</a>
10 </div>
11</div>
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/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 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.toggle-plugin-type { 4.root {
5 display: flex; 5 display: flex;
6 justify-content: center; 6 justify-content: center;
7 margin-bottom: 30px; 7}
8
9.btn-group:not(:last-child) {
10 @include margin-right(15px);
8} 11}
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 @@
1import { Component, Input } from '@angular/core'
2import { PluginType } from '@shared/models/plugins'
3
4@Component({
5 selector: 'my-plugin-navigation',
6 templateUrl: './plugin-navigation.component.html',
7 styleUrls: [ './plugin-navigation.component.scss' ]
8})
9export class PluginNavigationComponent {
10 @Input() pluginType: PluginType
11}
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 {
261 display: flex; 261 display: flex;
262 align-items: center; 262 align-items: center;
263 margin-bottom: 30px; 263 margin-bottom: 30px;
264
265 .admin-sub-nav a {
266 @include disable-default-a-behaviour;
267
268 font-size: 16px;
269 color: pvar(--mainForegroundColor);
270 padding: 5px 15px;
271 border-radius: 0.25rem;
272 font-weight: $font-semibold;
273 opacity: 0.6;
274
275 &.active {
276 background-color: pvar(--submenuBackgroundColor);
277 }
278
279 &.active,
280 &:hover,
281 &:active,
282 &:focus {
283 opacity: 1;
284 }
285 }
286} 264}
287 265
288// In tables, don't have a hover different background 266// In tables, don't have a hover different background
@@ -402,19 +380,6 @@ ngx-loading-bar {
402 380
403 .admin-sub-header { 381 .admin-sub-header {
404 flex-direction: column; 382 flex-direction: column;
405
406 .admin-sub-nav {
407 display: block;
408 overflow-x: auto;
409 white-space: nowrap;
410 height: 50px;
411 padding: 10px 0;
412 width: 100%;
413
414 a {
415 @include margin-left(5px);
416 }
417 }
418 } 383 }
419 384
420 my-markdown-textarea { 385 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 {
334 } 334 }
335} 335}
336 336
337.btn-group {
338 font-weight: $font-semibold;
339
340 .active {
341 @include orange-button;
342 }
343
344 :not(.active) {
345 @include grey-button;
346 }
347
348 > * {
349 @include peertube-button-link;
350
351 box-shadow: none !important;
352
353 &:not(:first-child) {
354 border-top-left-radius: 0 !important;
355 border-bottom-left-radius: 0 !important;
356 }
357
358 &:not(:last-child) {
359 border-top-right-radius: 0 !important;
360 border-bottom-right-radius: 0 !important;
361 }
362 }
363}
364
337// input box-shadow on focus 365// input box-shadow on focus
338.form-control { 366.form-control {
339 font-size: 15px; 367 font-size: 15px;