This is an automated email from the ASF dual-hosted git repository. rshah pushed a commit to branch 8.0.x in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git
commit d496e240cc1a9f7d1d5fda8820775d5338db9399 Author: Steve Hamrick <[email protected]> AuthorDate: Fri Sep 22 13:36:17 2023 -0600 TPv2 Fix Miscellaneous issues (#7813) * Fix sidebar not covering bottom * Fix theme-manager and detect color scheme * Add wrapping * Fix tests --------- Co-authored-by: Steve Hamrick <[email protected]> (cherry picked from commit 314f906747e7ab9765a0d9e7f0129bf05ac60529) --- .../tp-sidebar/tp-sidebar.component.scss | 2 +- .../theme-manager/theme-manager.service.spec.ts | 6 +-- .../shared/theme-manager/theme-manager.service.ts | 56 ++++++++++++++-------- 3 files changed, 41 insertions(+), 23 deletions(-) diff --git a/experimental/traffic-portal/src/app/shared/navigation/tp-sidebar/tp-sidebar.component.scss b/experimental/traffic-portal/src/app/shared/navigation/tp-sidebar/tp-sidebar.component.scss index ec4176f085..3fa759df97 100644 --- a/experimental/traffic-portal/src/app/shared/navigation/tp-sidebar/tp-sidebar.component.scss +++ b/experimental/traffic-portal/src/app/shared/navigation/tp-sidebar/tp-sidebar.component.scss @@ -33,7 +33,7 @@ $actions-height: 38px; #actions-container { z-index: 10; position: absolute; - bottom: 6px; + bottom: 0; left: 0; width: 100%; height: $actions-height; diff --git a/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.spec.ts b/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.spec.ts index 676fee3ea5..3e7222a51e 100644 --- a/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.spec.ts +++ b/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.spec.ts @@ -35,7 +35,7 @@ describe("ThemeManagerService", () => { }); it("init theme manager", () => { - const theme = {fileName: "some", name: "name"} as Theme; + const theme = {fileName: "dark-default-theme.css", name: "Dark"} as Theme; service.themeChanged.subscribe((newTheme: Theme): void => { expect(newTheme.fileName).toBe(theme.fileName); expect(newTheme.name).toBe(theme.name); @@ -47,7 +47,7 @@ describe("ThemeManagerService", () => { }); it("set theme", () => { - const theme = {fileName: "some", name: "name"} as Theme; + const theme = {fileName: "dark-default-theme.css", name: "Dark"} as Theme; const sub = service.themeChanged.subscribe((newTheme: Theme): void => { expect(newTheme.fileName).toBe(theme.fileName); expect(newTheme.name).toBe(theme.name); @@ -65,7 +65,7 @@ describe("ThemeManagerService", () => { }); it("clear theme", () => { - const theme = {fileName: "some", name: "name"} as Theme; + const theme = {fileName: "dark-default-theme.css", name: "Dark"} as Theme; service.loadTheme(theme); expect(theme).toEqual(JSON.parse(localStorage["current-theme-name"] ?? "")); diff --git a/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.ts b/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.ts index 8338df1ad9..5cb43cb3cd 100644 --- a/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.ts +++ b/experimental/traffic-portal/src/app/shared/theme-manager/theme-manager.service.ts @@ -12,8 +12,8 @@ * limitations under the License. */ -import { DOCUMENT } from "@angular/common"; -import { EventEmitter, Inject, Injectable } from "@angular/core"; +import { DOCUMENT, isPlatformServer } from "@angular/common"; +import { EventEmitter, Inject, Injectable, PLATFORM_ID } from "@angular/core"; import { LoggingService } from "../logging.service"; @@ -35,6 +35,7 @@ export interface Theme { export class ThemeManagerService { private readonly storageKey = "current-theme-name"; private readonly linkClass = "themer"; + private readonly isServer: boolean = false; public themeChanged = new EventEmitter<Theme>(); @@ -51,7 +52,9 @@ export class ThemeManagerService { return null; } - constructor(@Inject(DOCUMENT) private readonly document: Document, private readonly log: LoggingService) { + constructor(@Inject(DOCUMENT) private readonly document: Document, private readonly log: LoggingService, + @Inject(PLATFORM_ID) private readonly platformId: object) { + this.isServer = isPlatformServer(this.platformId); this.initTheme(); } @@ -59,9 +62,18 @@ export class ThemeManagerService { * Initialize the theme service */ public initTheme(): void { + if (this.isServer) { + return; + } const themeName = this.loadStoredTheme(); - if(themeName) { + if (themeName) { this.loadTheme(themeName); + return; + } + // If there is no stored theme and the user has a set preference for dark theme + // load the dark theme. + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + this.loadTheme(this.themes[1]); } } @@ -80,24 +92,28 @@ export class ThemeManagerService { * @param theme Theme to load */ public loadTheme(theme: Theme): void { - if(theme.fileName === undefined) { - this.clearTheme(); - return; + if (!this.isServer) { + if (theme.fileName === undefined) { + this.clearTheme(); + return; + } + this.getThemeLinkElement().setAttribute("href", theme.fileName); + this.storeTheme(theme); + this.themeChanged.emit(theme); } - this.getThemeLinkElement().setAttribute("href", theme.fileName); - this.storeTheme(theme); - this.themeChanged.emit(theme); } /** * Revert to the default theme */ public clearTheme(): void { - const linkEl = this.getExistingThemeLinkElement(); - if(linkEl) { - this.document.head.removeChild(linkEl); - this.clearStoredTheme(); - this.themeChanged.emit(this.themes[0]); + if (!this.isServer) { + const linkEl = this.getExistingThemeLinkElement(); + if (linkEl) { + this.document.head.removeChild(linkEl); + this.clearStoredTheme(); + this.themeChanged.emit(this.themes[0]); + } } } @@ -120,10 +136,12 @@ export class ThemeManagerService { * @returns The stored theme name or null */ private loadStoredTheme(): Theme | null { - try { - return JSON.parse(this.localStorage?.getItem(this.storageKey) ?? "null"); - } catch (e) { - this.log.error(`Unable to load theme from local storage: ${e}`); + if (!this.isServer) { + try { + return JSON.parse(this.localStorage?.getItem(this.storageKey) ?? "null"); + } catch (e) { + this.log.error(`Unable to load theme from local storage: ${e}`); + } } return null; }
