aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-16 14:36:51 +0200
committerChocobozzz <me@florianbigard.com>2022-06-16 14:44:14 +0200
commit5e93a6d142b1151d1ebc16123206f87998839108 (patch)
tree71dff17c1a79bb87e753216a83e317ad6efebf47 /client
parent3256771725430ab6fc716e937b88ca2b2b85263b (diff)
downloadPeerTube-5e93a6d142b1151d1ebc16123206f87998839108.tar.gz
PeerTube-5e93a6d142b1151d1ebc16123206f87998839108.tar.zst
PeerTube-5e93a6d142b1151d1ebc16123206f87998839108.zip
Improve theme label
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html2
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts12
-rw-r--r--client/src/app/core/theme/theme.service.ts23
-rw-r--r--client/src/app/shared/shared-user-settings/user-interface-settings.component.html6
-rw-r--r--client/src/app/shared/shared-user-settings/user-interface-settings.component.ts27
5 files changed, 46 insertions, 24 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index c62ea7700..68126281f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -15,7 +15,7 @@
15 15
16 <div class="peertube-select-container"> 16 <div class="peertube-select-container">
17 <select formControlName="default" id="themeDefault" class="form-control"> 17 <select formControlName="default" id="themeDefault" class="form-control">
18 <option i18n value="default">default</option> 18 <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
19 19
20 <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option> 20 <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
21 </select> 21 </select>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
index 81457bd36..f8f257671 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts
@@ -2,7 +2,7 @@ import { pairwise } from 'rxjs/operators'
2import { SelectOptionsItem } from 'src/types/select-options-item.model' 2import { SelectOptionsItem } from 'src/types/select-options-item.model'
3import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core' 3import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'
4import { FormGroup } from '@angular/forms' 4import { FormGroup } from '@angular/forms'
5import { MenuService } from '@app/core' 5import { MenuService, ThemeService } from '@app/core'
6import { HTMLServerConfig } from '@shared/models' 6import { HTMLServerConfig } from '@shared/models'
7import { ConfigService } from '../shared/config.service' 7import { ConfigService } from '../shared/config.service'
8 8
@@ -22,7 +22,8 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
22 22
23 constructor ( 23 constructor (
24 private configService: ConfigService, 24 private configService: ConfigService,
25 private menuService: MenuService 25 private menuService: MenuService,
26 private themeService: ThemeService
26 ) { } 27 ) { }
27 28
28 ngOnInit () { 29 ngOnInit () {
@@ -49,8 +50,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
49 } 50 }
50 51
51 getAvailableThemes () { 52 getAvailableThemes () {
52 return this.serverConfig.theme.registered 53 return this.themeService.getAvailableThemeLabels()
53 .map(t => t.name)
54 } 54 }
55 55
56 doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) { 56 doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) {
@@ -94,6 +94,10 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges {
94 })) 94 }))
95 } 95 }
96 96
97 getDefaultThemeLabel () {
98 return this.themeService.getDefaultThemeLabel()
99 }
100
97 private checkSignupField () { 101 private checkSignupField () {
98 const signupControl = this.form.get('signup.enabled') 102 const signupControl = this.form.get('signup.enabled')
99 103
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index e88511054..da6f2442a 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -1,4 +1,5 @@
1import { Injectable } from '@angular/core' 1import { Injectable } from '@angular/core'
2import { capitalizeFirstLetter } from '@root-helpers/string'
2import { UserLocalStorageKeys } from '@root-helpers/users' 3import { UserLocalStorageKeys } from '@root-helpers/users'
3import { HTMLServerConfig, ServerConfigTheme } from '@shared/models' 4import { HTMLServerConfig, ServerConfigTheme } from '@shared/models'
4import { environment } from '../../../environments/environment' 5import { environment } from '../../../environments/environment'
@@ -40,6 +41,19 @@ export class ThemeService {
40 this.listenUserTheme() 41 this.listenUserTheme()
41 } 42 }
42 43
44 getDefaultThemeLabel () {
45 if (this.hasDarkTheme()) {
46 return $localize`Light/Orange or Dark`
47 }
48
49 return $localize`Light/Orange`
50 }
51
52 getAvailableThemeLabels () {
53 return this.serverConfig.theme.registered
54 .map(t => capitalizeFirstLetter(t.name))
55 }
56
43 private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) { 57 private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
44 this.themes = themes 58 this.themes = themes
45 59
@@ -81,10 +95,7 @@ export class ThemeService {
81 if (instanceTheme !== 'default') return instanceTheme 95 if (instanceTheme !== 'default') return instanceTheme
82 96
83 // Default to dark theme if available and wanted by the user 97 // Default to dark theme if available and wanted by the user
84 if ( 98 if (this.hasDarkTheme() && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
85 this.themes.find(t => t.name === 'dark') &&
86 window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
87 ) {
88 return 'dark' 99 return 'dark'
89 } 100 }
90 101
@@ -193,4 +204,8 @@ export class ThemeService {
193 private getTheme (name: string) { 204 private getTheme (name: string) {
194 return this.themes.find(t => t.name === name) 205 return this.themes.find(t => t.name === name)
195 } 206 }
207
208 private hasDarkTheme () {
209 return this.serverConfig.theme.registered.some(t => t.name === 'dark')
210 }
196} 211}
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
index b739e881b..1a24641a2 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.html
@@ -5,10 +5,10 @@
5 5
6 <div class="peertube-select-container"> 6 <div class="peertube-select-container">
7 <select formControlName="theme" id="theme" class="form-control"> 7 <select formControlName="theme" id="theme" class="form-control">
8 <option i18n value="instance-default">Instance default theme ({{ getDefaultThemeLabel() }})</option> 8 <option i18n value="instance-default">{{ instanceName }} default theme ({{ getDefaultInstanceThemeLabel() }})</option>
9 <option i18n value="default">{{ defaultThemeLabel }}</option> 9 <option i18n value="default">{{ getDefaultThemeLabel() }}</option>
10 10
11 <option *ngFor="let theme of availableThemes" [value]="theme">{{ capitalizeFirstLetter(theme) }}</option> 11 <option *ngFor="let theme of getAvailableThemes()" [value]="theme">{{ theme }}</option>
12 </select> 12 </select>
13 </div> 13 </div>
14 </div> 14 </div>
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
index 932db498a..24ad54b1d 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
@@ -1,8 +1,7 @@
1import { Subject, Subscription } from 'rxjs' 1import { Subject, Subscription } from 'rxjs'
2import { Component, Input, OnDestroy, OnInit } from '@angular/core' 2import { Component, Input, OnDestroy, OnInit } from '@angular/core'
3import { AuthService, Notifier, ServerService, UserService } from '@app/core' 3import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
4import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' 4import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
5import { capitalizeFirstLetter } from '@root-helpers/string'
6import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models' 5import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
7 6
8@Component({ 7@Component({
@@ -18,8 +17,6 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
18 17
19 formValuesWatcher: Subscription 18 formValuesWatcher: Subscription
20 19
21 defaultThemeLabel = $localize`Light/Orange`
22
23 private serverConfig: HTMLServerConfig 20 private serverConfig: HTMLServerConfig
24 21
25 constructor ( 22 constructor (
@@ -27,14 +24,14 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
27 private authService: AuthService, 24 private authService: AuthService,
28 private notifier: Notifier, 25 private notifier: Notifier,
29 private userService: UserService, 26 private userService: UserService,
27 private themeService: ThemeService,
30 private serverService: ServerService 28 private serverService: ServerService
31 ) { 29 ) {
32 super() 30 super()
33 } 31 }
34 32
35 get availableThemes () { 33 get instanceName () {
36 return this.serverConfig.theme.registered 34 return this.serverConfig.instance.name
37 .map(t => t.name)
38 } 35 }
39 36
40 ngOnInit () { 37 ngOnInit () {
@@ -61,17 +58,23 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
61 } 58 }
62 59
63 getDefaultThemeLabel () { 60 getDefaultThemeLabel () {
61 return this.themeService.getDefaultThemeLabel()
62 }
63
64 getAvailableThemes () {
65 return this.themeService.getAvailableThemeLabels()
66 }
67
68 getDefaultInstanceThemeLabel () {
64 const theme = this.serverConfig.theme.default 69 const theme = this.serverConfig.theme.default
65 70
66 if (theme === 'default') return this.defaultThemeLabel 71 if (theme === 'default') {
72 return this.getDefaultThemeLabel()
73 }
67 74
68 return theme 75 return theme
69 } 76 }
70 77
71 capitalizeFirstLetter (str: string) {
72 return capitalizeFirstLetter(str)
73 }
74
75 updateInterfaceSettings () { 78 updateInterfaceSettings () {
76 const theme = this.form.value['theme'] 79 const theme = this.form.value['theme']
77 80