refactor theme toggle into a service

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 5086384f46e0c86abe842e1c0fe5ca65e0949a25..d4841a69b0d9fcff5d10f803d99d14813c01b509 100644 (file)
--- 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 30ac101191780e9e79bcb3d5404258c69fce9660..d4917f902b8dd85303737048a1334408e04effa8 100644 (file)
--- 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 3c01e05aafc55e70b2af9fcca6a1e3d67a216918..521afc29cf8a6062feed4809ebc4109ded94d471 100644 (file)
--- 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 (file)
index 0000000..713f474
--- /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 (file)
index 0000000..d8e02e2
--- /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 22ddfad0226ab61c0ae035f806fdd6fdff7d812d..24cd5aa28225ad4710a49ede2855d7673f3bfb8a 100644 (file)
--- 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 () {