This is an automated email from the ASF dual-hosted git repository.
zrhoffman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git
The following commit(s) were added to refs/heads/master by this push:
new 314f906747 TPv2 Fix Miscellaneous issues (#7813)
314f906747 is described below
commit 314f906747e7ab9765a0d9e7f0129bf05ac60529
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]>
---
.../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;
}
