From 5e93a6d142b1151d1ebc16123206f87998839108 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 16 Jun 2022 14:36:51 +0200 Subject: [PATCH] Improve theme label --- .../edit-basic-configuration.component.html | 2 +- .../edit-basic-configuration.component.ts | 12 ++++--- client/src/app/core/theme/theme.service.ts | 23 +++++++++++--- .../user-interface-settings.component.html | 6 ++-- .../user-interface-settings.component.ts | 31 ++++++++++--------- 5 files changed, 48 insertions(+), 26 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 @@
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' import { SelectOptionsItem } from 'src/types/select-options-item.model' import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core' import { FormGroup } from '@angular/forms' -import { MenuService } from '@app/core' +import { MenuService, ThemeService } from '@app/core' import { HTMLServerConfig } from '@shared/models' import { ConfigService } from '../shared/config.service' @@ -22,7 +22,8 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges { constructor ( private configService: ConfigService, - private menuService: MenuService + private menuService: MenuService, + private themeService: ThemeService ) { } ngOnInit () { @@ -49,8 +50,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges { } getAvailableThemes () { - return this.serverConfig.theme.registered - .map(t => t.name) + return this.themeService.getAvailableThemeLabels() } doesTrendingVideosAlgorithmsEnabledInclude (algorithm: string) { @@ -94,6 +94,10 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges { })) } + getDefaultThemeLabel () { + return this.themeService.getDefaultThemeLabel() + } + private checkSignupField () { const signupControl = this.form.get('signup.enabled') 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 @@ import { Injectable } from '@angular/core' +import { capitalizeFirstLetter } from '@root-helpers/string' import { UserLocalStorageKeys } from '@root-helpers/users' import { HTMLServerConfig, ServerConfigTheme } from '@shared/models' import { environment } from '../../../environments/environment' @@ -40,6 +41,19 @@ export class ThemeService { this.listenUserTheme() } + getDefaultThemeLabel () { + if (this.hasDarkTheme()) { + return $localize`Light/Orange or Dark` + } + + return $localize`Light/Orange` + } + + getAvailableThemeLabels () { + return this.serverConfig.theme.registered + .map(t => capitalizeFirstLetter(t.name)) + } + private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) { this.themes = themes @@ -81,10 +95,7 @@ export class ThemeService { if (instanceTheme !== 'default') return instanceTheme // Default to dark theme if available and wanted by the user - if ( - this.themes.find(t => t.name === 'dark') && - window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches - ) { + if (this.hasDarkTheme() && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { return 'dark' } @@ -193,4 +204,8 @@ export class ThemeService { private getTheme (name: string) { return this.themes.find(t => t.name === name) } + + private hasDarkTheme () { + return this.serverConfig.theme.registered.some(t => t.name === 'dark') + } } 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 @@
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 @@ import { Subject, Subscription } from 'rxjs' import { Component, Input, OnDestroy, OnInit } from '@angular/core' -import { AuthService, Notifier, ServerService, UserService } from '@app/core' +import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core' import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' -import { capitalizeFirstLetter } from '@root-helpers/string' import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models' @Component({ @@ -18,8 +17,6 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn formValuesWatcher: Subscription - defaultThemeLabel = $localize`Light/Orange` - private serverConfig: HTMLServerConfig constructor ( @@ -27,14 +24,14 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn private authService: AuthService, private notifier: Notifier, private userService: UserService, + private themeService: ThemeService, private serverService: ServerService ) { super() } - get availableThemes () { - return this.serverConfig.theme.registered - .map(t => t.name) + get instanceName () { + return this.serverConfig.instance.name } ngOnInit () { @@ -61,15 +58,21 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn } getDefaultThemeLabel () { - const theme = this.serverConfig.theme.default - - if (theme === 'default') return this.defaultThemeLabel - - return theme + return this.themeService.getDefaultThemeLabel() } - capitalizeFirstLetter (str: string) { - return capitalizeFirstLetter(str) + getAvailableThemes () { + return this.themeService.getAvailableThemeLabels() + } + + getDefaultInstanceThemeLabel () { + const theme = this.serverConfig.theme.default + + if (theme === 'default') { + return this.getDefaultThemeLabel() + } + + return theme } updateInterfaceSettings () {