From e01b7f8fe1e5b45fa2ffde343f9888a4c8886e94 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 9 Nov 2021 16:09:21 +0300 Subject: [PATCH 1/3] fix(core-theming): CB-1412 get default theme id value from a config --- .../packages/core-bootstrap/src/manifest.ts | 3 +- .../core-settings/src/SettingsService.ts | 2 +- .../packages/core-theming/src/ThemeService.ts | 39 ++++++++++--------- .../core-theming/src/ThemeSettingsService.ts | 21 ++++++++++ webapp/packages/core-theming/src/index.ts | 1 + 5 files changed, 46 insertions(+), 20 deletions(-) create mode 100644 webapp/packages/core-theming/src/ThemeSettingsService.ts diff --git a/webapp/packages/core-bootstrap/src/manifest.ts b/webapp/packages/core-bootstrap/src/manifest.ts index cb9186f5be..f67ac5c9d5 100644 --- a/webapp/packages/core-bootstrap/src/manifest.ts +++ b/webapp/packages/core-bootstrap/src/manifest.ts @@ -78,7 +78,7 @@ import { import { RouterService, ScreenService } from '@cloudbeaver/core-routing'; import { EnvironmentService, GraphQLService } from '@cloudbeaver/core-sdk'; import { LocalStorageSaveService, SettingsService } from '@cloudbeaver/core-settings'; -import { ThemeService } from '@cloudbeaver/core-theming'; +import { ThemeService, ThemeSettingsService } from '@cloudbeaver/core-theming'; import { coreUIManifest } from '@cloudbeaver/core-ui'; import { coreViewManifest } from '@cloudbeaver/core-view'; @@ -158,6 +158,7 @@ export const coreManifests: PluginManifest[] = [ SessionService, SettingsMenuService, SettingsService, + ThemeSettingsService, ThemeService, ServerService, ], diff --git a/webapp/packages/core-settings/src/SettingsService.ts b/webapp/packages/core-settings/src/SettingsService.ts index f875f50938..71e24fc78b 100644 --- a/webapp/packages/core-settings/src/SettingsService.ts +++ b/webapp/packages/core-settings/src/SettingsService.ts @@ -19,7 +19,7 @@ export class SettingsService { * @param key * @param settings - observable object expected */ - registerSettings>(settings: T, key: string): void { + registerSettings>(settings: T, key: string): void { this.localStorageSaveService.withAutoSave(settings, key); } } diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index 1b0681244c..b3cdbb465f 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -18,9 +18,11 @@ import { DbeaverError, NotificationService } from '@cloudbeaver/core-events'; import { SettingsService } from '@cloudbeaver/core-settings'; import { themes } from './themes'; +import { ThemeSettingsService } from './ThemeSettingsService'; import type { ClassCollection } from './themeUtils'; const COMMON_STYLES: any[] = []; +const THEME_SETTINGS_KEY = 'themeSettings'; export interface ITheme { name: string; @@ -29,8 +31,9 @@ export interface ITheme { loader: () => Promise; } -const THEME_SETTINGS_KEY = 'themeSettings'; -const DEFAULT_THEME_ID = 'light'; +interface ISettings { + currentThemeId?: string; +} @injectable() export class ThemeService extends Bootstrap { @@ -38,33 +41,32 @@ export class ThemeService extends Bootstrap { return Array.from(this.themeMap.values()); } - get currentThemeId() { - return this.settings.currentThemeId; + get defaultTheme(): string { + return this.themeSettingsService.settings.getValue('defaultTheme'); + } + + get currentThemeId(): string { + return this.settings.currentThemeId || this.defaultTheme; } get currentTheme(): ITheme { - let theme = this.themeMap.get(this.settings.currentThemeId); - if (!theme) { - theme = this.themeMap.get(DEFAULT_THEME_ID)!; - } - - return theme; + return this.themeMap.get(this.currentThemeId)!; } - private themeMap: Map = new Map(); - private settings = { - currentThemeId: DEFAULT_THEME_ID, - }; + private readonly themeMap: Map = new Map(); + private readonly settings: ISettings = {}; constructor( - private notificationService: NotificationService, - private settingsService: SettingsService + private readonly notificationService: NotificationService, + private readonly settingsService: SettingsService, + private readonly themeSettingsService: ThemeSettingsService, ) { super(); makeObservable(this, { themes: computed, currentTheme: computed, + defaultTheme: computed, themeMap: observable.shallow, settings: observable, setCurrentThemeId: action, @@ -76,6 +78,7 @@ export class ThemeService extends Bootstrap { } async load(): Promise { + this.setCurrentThemeId(this.defaultTheme); this.settingsService.registerSettings(this.settings, THEME_SETTINGS_KEY); await this.changeThemeAsync(this.currentThemeId); } @@ -94,8 +97,8 @@ export class ThemeService extends Bootstrap { try { await this.loadThemeStylesAsync(themeId); } catch (e) { - if (themeId !== DEFAULT_THEME_ID) { - return this.changeThemeAsync(DEFAULT_THEME_ID); // try to fallback to default theme + if (themeId !== this.defaultTheme) { + return this.changeThemeAsync(this.defaultTheme); // try to fallback to default theme } throw e; } diff --git a/webapp/packages/core-theming/src/ThemeSettingsService.ts b/webapp/packages/core-theming/src/ThemeSettingsService.ts new file mode 100644 index 0000000000..0b09f69a92 --- /dev/null +++ b/webapp/packages/core-theming/src/ThemeSettingsService.ts @@ -0,0 +1,21 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import { injectable } from '@cloudbeaver/core-di'; +import { PluginManagerService } from '@cloudbeaver/core-plugin'; + +const defaultSettings = { + defaultTheme: 'light', +}; + +@injectable() +export class ThemeSettingsService { + readonly settings = this.pluginManagerService.getPluginSettings('core.user', defaultSettings); + + constructor(private readonly pluginManagerService: PluginManagerService) { } +} diff --git a/webapp/packages/core-theming/src/index.ts b/webapp/packages/core-theming/src/index.ts index 04c8861a8e..82d7de56e7 100644 --- a/webapp/packages/core-theming/src/index.ts +++ b/webapp/packages/core-theming/src/index.ts @@ -1,3 +1,4 @@ export * from './ThemeService'; export * from './themeUtils'; export * from './useStyles'; +export * from './ThemeSettingsService'; From a53e22f07eb6408bf591bf26e741e12b275fed38 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 9 Nov 2021 18:38:11 +0300 Subject: [PATCH 2/3] fix(core-theming): CB-1412 make sure config value is valid --- .../packages/core-theming/src/ThemeService.ts | 27 ++++++++++++------- .../core-theming/src/ThemeSettingsService.ts | 12 ++++++--- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index b3cdbb465f..d4078fd7e2 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -18,6 +18,7 @@ import { DbeaverError, NotificationService } from '@cloudbeaver/core-events'; import { SettingsService } from '@cloudbeaver/core-settings'; import { themes } from './themes'; +import { defaultThemeSettings } from './ThemeSettingsService'; import { ThemeSettingsService } from './ThemeSettingsService'; import type { ClassCollection } from './themeUtils'; @@ -32,7 +33,7 @@ export interface ITheme { } interface ISettings { - currentThemeId?: string; + currentThemeId: string; } @injectable() @@ -41,20 +42,28 @@ export class ThemeService extends Bootstrap { return Array.from(this.themeMap.values()); } - get defaultTheme(): string { + get defaultThemeId(): string { return this.themeSettingsService.settings.getValue('defaultTheme'); } get currentThemeId(): string { - return this.settings.currentThemeId || this.defaultTheme; + return this.settings.currentThemeId; } get currentTheme(): ITheme { - return this.themeMap.get(this.currentThemeId)!; + let theme = this.themeMap.get(this.currentThemeId); + + if (!theme) { + theme = this.themeMap.get(defaultThemeSettings.defaultTheme)!; + } + + return theme; } private readonly themeMap: Map = new Map(); - private readonly settings: ISettings = {}; + private readonly settings: ISettings = { + currentThemeId: defaultThemeSettings.defaultTheme, + }; constructor( private readonly notificationService: NotificationService, @@ -66,7 +75,7 @@ export class ThemeService extends Bootstrap { makeObservable(this, { themes: computed, currentTheme: computed, - defaultTheme: computed, + defaultThemeId: computed, themeMap: observable.shallow, settings: observable, setCurrentThemeId: action, @@ -78,7 +87,7 @@ export class ThemeService extends Bootstrap { } async load(): Promise { - this.setCurrentThemeId(this.defaultTheme); + this.setCurrentThemeId(this.defaultThemeId); this.settingsService.registerSettings(this.settings, THEME_SETTINGS_KEY); await this.changeThemeAsync(this.currentThemeId); } @@ -97,8 +106,8 @@ export class ThemeService extends Bootstrap { try { await this.loadThemeStylesAsync(themeId); } catch (e) { - if (themeId !== this.defaultTheme) { - return this.changeThemeAsync(this.defaultTheme); // try to fallback to default theme + if (themeId !== this.defaultThemeId) { + return this.changeThemeAsync(this.defaultThemeId); // try to fallback to default theme } throw e; } diff --git a/webapp/packages/core-theming/src/ThemeSettingsService.ts b/webapp/packages/core-theming/src/ThemeSettingsService.ts index 0b09f69a92..e5955cef3c 100644 --- a/webapp/packages/core-theming/src/ThemeSettingsService.ts +++ b/webapp/packages/core-theming/src/ThemeSettingsService.ts @@ -9,13 +9,19 @@ import { injectable } from '@cloudbeaver/core-di'; import { PluginManagerService } from '@cloudbeaver/core-plugin'; -const defaultSettings = { - defaultTheme: 'light', +import { themes } from './themes'; + +interface IDefaultSettings { + defaultTheme: string; +} + +export const defaultThemeSettings: IDefaultSettings = { + defaultTheme: themes[0].id, }; @injectable() export class ThemeSettingsService { - readonly settings = this.pluginManagerService.getPluginSettings('core.user', defaultSettings); + readonly settings = this.pluginManagerService.getPluginSettings('core.user', defaultThemeSettings); constructor(private readonly pluginManagerService: PluginManagerService) { } } From bd3cf1ed8d896591a53437bca78e4bc21c60625e Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 9 Nov 2021 19:05:04 +0300 Subject: [PATCH 3/3] fix(core-theming): CB-1412 use defaultThemeSettings.defaultTheme instead of defaultThemeId --- webapp/packages/core-theming/src/ThemeService.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/packages/core-theming/src/ThemeService.ts b/webapp/packages/core-theming/src/ThemeService.ts index d4078fd7e2..af582d8fdc 100644 --- a/webapp/packages/core-theming/src/ThemeService.ts +++ b/webapp/packages/core-theming/src/ThemeService.ts @@ -106,8 +106,8 @@ export class ThemeService extends Bootstrap { try { await this.loadThemeStylesAsync(themeId); } catch (e) { - if (themeId !== this.defaultThemeId) { - return this.changeThemeAsync(this.defaultThemeId); // try to fallback to default theme + if (themeId !== defaultThemeSettings.defaultTheme) { + return this.changeThemeAsync(defaultThemeSettings.defaultTheme); // try to fallback to default theme } throw e; }