From 1a00c5619f11c5faecd384b011e037a8ed5fde46 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 6 Sep 2018 12:00:53 +0200 Subject: [PATCH] refactor theme toggle into a service --- client/src/app/app.component.ts | 11 +++++-- client/src/app/core/core.module.ts | 2 ++ client/src/app/core/index.ts | 1 + client/src/app/core/theme/index.ts | 1 + client/src/app/core/theme/theme.service.ts | 31 +++++++++++++++++++ client/src/app/menu/menu.component.ts | 36 ++-------------------- 6 files changed, 46 insertions(+), 36 deletions(-) create mode 100644 client/src/app/core/theme/index.ts create mode 100644 client/src/app/core/theme/theme.service.ts diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 5086384f4..d4841a69b 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core' import { DomSanitizer, SafeHtml } from '@angular/platform-browser' import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' -import { AuthService, RedirectService, ServerService } from '@app/core' +import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core' import { is18nPath } from '../../../shared/models/i18n' import { ScreenService } from '@app/shared/misc/screen.service' import { skip } from 'rxjs/operators' @@ -37,7 +37,8 @@ export class AppComponent implements OnInit { private domSanitizer: DomSanitizer, private redirectService: RedirectService, private screenService: ScreenService, - private hotkeysService: HotkeysService + private hotkeysService: HotkeysService, + private themeService: ThemeService ) { } get serverVersion () { @@ -155,7 +156,11 @@ export class AppComponent implements OnInit { new Hotkey('g u', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/upload' ]) return false - }, undefined, 'Go to the videos upload page') + }, undefined, 'Go to the videos upload page'), + new Hotkey('T', (event: KeyboardEvent): boolean => { + this.themeService.toggleDarkTheme() + return false + }, undefined, 'Toggle Dark theme') ]) } diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index 30ac10119..d4917f902 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -14,6 +14,7 @@ import { ConfirmComponent, ConfirmService } from './confirm' import { throwIfAlreadyLoaded } from './module-import-guard' import { LoginGuard, RedirectService, UserRightGuard } from './routing' import { ServerService } from './server' +import { ThemeService } from './theme' @NgModule({ imports: [ @@ -45,6 +46,7 @@ import { ServerService } from './server' AuthService, ConfirmService, ServerService, + ThemeService, LoginGuard, UserRightGuard, RedirectService diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts index 3c01e05aa..521afc29c 100644 --- a/client/src/app/core/index.ts +++ b/client/src/app/core/index.ts @@ -2,4 +2,5 @@ export * from './auth' export * from './server' export * from './confirm' export * from './routing' +export * from './theme' export * from './core.module' diff --git a/client/src/app/core/theme/index.ts b/client/src/app/core/theme/index.ts new file mode 100644 index 000000000..713f4747b --- /dev/null +++ b/client/src/app/core/theme/index.ts @@ -0,0 +1 @@ +export * from './theme.service' diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts new file mode 100644 index 000000000..d8e02e2e5 --- /dev/null +++ b/client/src/app/core/theme/theme.service.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core' + +@Injectable() +export class ThemeService { + private theme = document.querySelector('body') + private previousTheme = {} + + constructor () { + // initialise the alternative theme with dark theme colors + this.previousTheme['mainBackgroundColor'] = '#111111' + this.previousTheme['mainForegroundColor'] = '#fff' + this.previousTheme['submenuColor'] = 'rgb(32,32,32)' + this.previousTheme['inputColor'] = 'gray' + this.previousTheme['inputPlaceholderColor'] = '#fff' + } + + toggleDarkTheme () { + // switch properties + this.switchProperty('mainBackgroundColor') + this.switchProperty('mainForegroundColor') + this.switchProperty('submenuColor') + this.switchProperty('inputColor') + this.switchProperty('inputPlaceholderColor') + } + + private switchProperty (property, newValue?) { + const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property) + this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property]) + this.previousTheme[property] = propertyOldvalue + } +} diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 22ddfad02..24cd5aa28 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit, ViewChild } from '@angular/core' import { UserRight } from '../../../../shared/models/users/user-right.enum' -import { AuthService, AuthStatus, RedirectService, ServerService } from '../core' +import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core' import { User } from '../shared/users/user.model' import { LanguageChooserComponent } from '@app/menu/language-chooser.component' -import { Hotkey, HotkeysService } from 'angular2-hotkeys' @Component({ selector: 'my-menu', @@ -16,7 +15,6 @@ export class MenuComponent implements OnInit { user: User isLoggedIn: boolean userHasAdminAccess = false - hotkeys: Hotkey[] private routesPerRight = { [UserRight.MANAGE_USERS]: '/admin/users', @@ -24,14 +22,12 @@ export class MenuComponent implements OnInit { [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' } - private theme = document.querySelector('body') - private previousTheme = { } constructor ( private authService: AuthService, private serverService: ServerService, private redirectService: RedirectService, - private hotkeysService: HotkeysService + private themeService: ThemeService ) {} ngOnInit () { @@ -56,21 +52,6 @@ export class MenuComponent implements OnInit { } } ) - - // initialise the alternative theme with dark theme colors - this.previousTheme['mainBackgroundColor'] = '#111111' - this.previousTheme['mainForegroundColor'] = '#fff' - this.previousTheme['submenuColor'] = 'rgb(32,32,32)' - this.previousTheme['inputColor'] = 'gray' - this.previousTheme['inputPlaceholderColor'] = '#fff' - - this.hotkeys = [ - new Hotkey('T', (event: KeyboardEvent): boolean => { - this.toggleDarkTheme() - return false - }, undefined, 'Toggle Dark theme') - ] - this.hotkeysService.add(this.hotkeys) } isRegistrationAllowed () { @@ -117,18 +98,7 @@ export class MenuComponent implements OnInit { } toggleDarkTheme () { - // switch properties - this.switchProperty('mainBackgroundColor') - this.switchProperty('mainForegroundColor') - this.switchProperty('submenuColor') - this.switchProperty('inputColor') - this.switchProperty('inputPlaceholderColor') - } - - private switchProperty (property, newValue?) { - const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property) - this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property]) - this.previousTheme[property] = propertyOldvalue + this.themeService.toggleDarkTheme() } private computeIsUserHasAdminAccess () {