From b03af0ddcfa7c7b08ea32f1b246994b3d6ae95bc Mon Sep 17 00:00:00 2001 From: Marcin Czachurski Date: Thu, 31 Oct 2024 16:30:16 +0100 Subject: [PATCH] Add theme switcher before user sign in --- .../core/footer/footer.component.html | 2 +- .../core/header/header.component.html | 3 +++ .../core/header/header.component.ts | 12 ++++++++- src/app/pages/preferences/preferences.page.ts | 15 ++--------- .../services/common/preferences.service.ts | 26 +++++++++++++++++-- src/index.html | 2 +- 6 files changed, 42 insertions(+), 18 deletions(-) diff --git a/src/app/components/core/footer/footer.component.html b/src/app/components/core/footer/footer.component.html index 06cc9cc..5622308 100644 --- a/src/app/components/core/footer/footer.component.html +++ b/src/app/components/core/footer/footer.component.html @@ -7,6 +7,6 @@
© {{ currentDate.getFullYear() }} {{ apiService }}
·
-
Powered by Vernissage
+
Powered by Vernissage
\ No newline at end of file diff --git a/src/app/components/core/header/header.component.html b/src/app/components/core/header/header.component.html index dee1ee7..ce51d66 100644 --- a/src/app/components/core/header/header.component.html +++ b/src/app/components/core/header/header.component.html @@ -101,6 +101,9 @@ } @if(!user || !isLoggedIn) { + } diff --git a/src/app/components/core/header/header.component.ts b/src/app/components/core/header/header.component.ts index 80ae6b2..9bf524c 100644 --- a/src/app/components/core/header/header.component.ts +++ b/src/app/components/core/header/header.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core'; import { RouteReuseStrategy, Router } from '@angular/router'; import { Subscription } from 'rxjs'; @@ -13,6 +13,7 @@ import { CustomReuseStrategy } from 'src/app/common/custom-reuse-strategy'; import { SwPush } from '@angular/service-worker'; import { UserDisplayService } from 'src/app/services/common/user-display.service'; import { SettingsService } from 'src/app/services/http/settings.service'; +import { PreferencesService } from 'src/app/services/common/preferences.service'; @Component({ selector: 'app-header', @@ -30,6 +31,7 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe public showTrending = false; public showEditorsChoice = false; public showCategories = false; + public isLightTheme = false; private userChangeSubscription?: Subscription; private notificationChangeSubscription?: Subscription; @@ -44,6 +46,8 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe private routeReuseStrategy: RouteReuseStrategy, private router: Router, private swPushService: SwPush, + private preferencesService: PreferencesService, + private renderer: Renderer2, breakpointObserver: BreakpointObserver ) { super(breakpointObserver) @@ -55,6 +59,7 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe this.user = this.authorizationService.getUser(); this.isLoggedIn = await this.authorizationService.isLoggedIn(); this.avatarUrl = this.user?.avatarUrl ?? 'assets/avatar.svg'; + this.isLightTheme = this.preferencesService.isLightTheme; this.userChangeSubscription = this.authorizationService.changes.subscribe(async (user) => { this.user = user; @@ -115,6 +120,11 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe return this.instanceService.instance?.registrationOpened === false && this.instanceService.instance?.registrationByInvitationsOpened === true; } + onThemeToggle(): void { + this.preferencesService.toggleTheme(this.renderer); + this.isLightTheme = this.preferencesService.isLightTheme; + } + private async loadNotificationCount(): Promise { try { if (this.user) { diff --git a/src/app/pages/preferences/preferences.page.ts b/src/app/pages/preferences/preferences.page.ts index 491cada..d96b97f 100644 --- a/src/app/pages/preferences/preferences.page.ts +++ b/src/app/pages/preferences/preferences.page.ts @@ -1,13 +1,11 @@ -import { Component, Inject, Renderer2, OnInit } from '@angular/core'; +import { Component, OnInit, Renderer2 } from '@angular/core'; import { fadeInAnimation } from "../../animations/fade-in.animation"; import { EventType } from 'src/app/models/event-type'; import { ResponsiveComponent } from 'src/app/common/responsive'; import { BreakpointObserver } from '@angular/cdk/layout'; -import { DOCUMENT } from '@angular/common'; import { PreferencesService } from 'src/app/services/common/preferences.service'; import { RouteReuseStrategy } from '@angular/router'; import { CustomReuseStrategy } from 'src/app/common/custom-reuse-strategy'; -import { WindowService } from 'src/app/services/common/window.service'; @Component({ selector: 'app-preferences', @@ -32,11 +30,9 @@ export class PreferencesPage extends ResponsiveComponent implements OnInit { alwaysShowSdrPhoto = false; constructor( - @Inject(DOCUMENT) private document: Document, private preferencesService: PreferencesService, private routeReuseStrategy: RouteReuseStrategy, private renderer: Renderer2, - private windowService: WindowService, breakpointObserver: BreakpointObserver ) { super(breakpointObserver); @@ -60,14 +56,7 @@ export class PreferencesPage extends ResponsiveComponent implements OnInit { onThemeChange(): void { this.preferencesService.isLightTheme = this.isLightTheme; - - if (this.isLightTheme) { - this.renderer.removeClass(this.document.body, 'dark-theme'); - this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#fafafa"); - } else { - this.renderer.addClass(this.document.body, 'dark-theme'); - this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#303030"); - } + this.preferencesService.applyTheme(this.renderer); } onAvatarChange(): void { diff --git a/src/app/services/common/preferences.service.ts b/src/app/services/common/preferences.service.ts index 7f1aa43..7d18712 100644 --- a/src/app/services/common/preferences.service.ts +++ b/src/app/services/common/preferences.service.ts @@ -1,5 +1,7 @@ -import { Injectable } from '@angular/core'; +import { Inject, Injectable, Renderer2 } from '@angular/core'; import { SsrCookieService } from './ssr-cookie.service'; +import { WindowService } from './window.service'; +import { DOCUMENT } from '@angular/common'; // We are storing preferences in the cookies instead of local storage because of // Server Side Rendering. The cookies are send to server even with the first browser @@ -11,7 +13,10 @@ import { SsrCookieService } from './ssr-cookie.service'; export class PreferencesService { private readonly longFuture = new Date('Sat, 01 Jan 2050 00:00:00 GMT'); - constructor(private cookieService: SsrCookieService) { + constructor( + @Inject(DOCUMENT) private document: Document, + private cookieService: SsrCookieService, + private windowService: WindowService) { } public get isLightTheme(): boolean { @@ -85,4 +90,21 @@ export class PreferencesService { public set alwaysShowSdrPhoto(alwaysShowSdrPhoto: boolean) { this.cookieService.set('alwaysShowSdrPhoto', alwaysShowSdrPhoto ? 'true' : 'false', { expires: this.longFuture }); } + + public toggleTheme(renderer: Renderer2): void { + const isLightThemeInternal = this.isLightTheme; + this.isLightTheme = !isLightThemeInternal; + + this.applyTheme(renderer); + } + + public applyTheme(renderer: Renderer2): void { + if (this.isLightTheme) { + renderer.removeClass(this.document.body, 'dark-theme'); + this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#fafafa"); + } else { + renderer.addClass(this.document.body, 'dark-theme'); + this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#303030"); + } + } } diff --git a/src/index.html b/src/index.html index 64f7758..8c42f4b 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,7 @@ - +