aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-06 12:00:53 +0200
committerRigel Kent <sendmemail@rigelk.eu>2018-09-06 12:00:53 +0200
commit1a00c5619f11c5faecd384b011e037a8ed5fde46 (patch)
tree82d2830d5a25089d825711c225766711dc08c99f
parent1c66c35c55eed2ffbbf97ec463a3539c35952ec3 (diff)
downloadPeerTube-1a00c5619f11c5faecd384b011e037a8ed5fde46.tar.gz
PeerTube-1a00c5619f11c5faecd384b011e037a8ed5fde46.tar.zst
PeerTube-1a00c5619f11c5faecd384b011e037a8ed5fde46.zip
refactor theme toggle into a service
-rw-r--r--client/src/app/app.component.ts11
-rw-r--r--client/src/app/core/core.module.ts2
-rw-r--r--client/src/app/core/index.ts1
-rw-r--r--client/src/app/core/theme/index.ts1
-rw-r--r--client/src/app/core/theme/theme.service.ts31
-rw-r--r--client/src/app/menu/menu.component.ts36
6 files changed, 46 insertions, 36 deletions
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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { DomSanitizer, SafeHtml } from '@angular/platform-browser' 2import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
3import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' 3import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
4import { AuthService, RedirectService, ServerService } from '@app/core' 4import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
5import { is18nPath } from '../../../shared/models/i18n' 5import { is18nPath } from '../../../shared/models/i18n'
6import { ScreenService } from '@app/shared/misc/screen.service' 6import { ScreenService } from '@app/shared/misc/screen.service'
7import { skip } from 'rxjs/operators' 7import { skip } from 'rxjs/operators'
@@ -37,7 +37,8 @@ export class AppComponent implements OnInit {
37 private domSanitizer: DomSanitizer, 37 private domSanitizer: DomSanitizer,
38 private redirectService: RedirectService, 38 private redirectService: RedirectService,
39 private screenService: ScreenService, 39 private screenService: ScreenService,
40 private hotkeysService: HotkeysService 40 private hotkeysService: HotkeysService,
41 private themeService: ThemeService
41 ) { } 42 ) { }
42 43
43 get serverVersion () { 44 get serverVersion () {
@@ -155,7 +156,11 @@ export class AppComponent implements OnInit {
155 new Hotkey('g u', (event: KeyboardEvent): boolean => { 156 new Hotkey('g u', (event: KeyboardEvent): boolean => {
156 this.router.navigate([ '/videos/upload' ]) 157 this.router.navigate([ '/videos/upload' ])
157 return false 158 return false
158 }, undefined, 'Go to the videos upload page') 159 }, undefined, 'Go to the videos upload page'),
160 new Hotkey('T', (event: KeyboardEvent): boolean => {
161 this.themeService.toggleDarkTheme()
162 return false
163 }, undefined, 'Toggle Dark theme')
159 ]) 164 ])
160 } 165 }
161 166
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'
14import { throwIfAlreadyLoaded } from './module-import-guard' 14import { throwIfAlreadyLoaded } from './module-import-guard'
15import { LoginGuard, RedirectService, UserRightGuard } from './routing' 15import { LoginGuard, RedirectService, UserRightGuard } from './routing'
16import { ServerService } from './server' 16import { ServerService } from './server'
17import { ThemeService } from './theme'
17 18
18@NgModule({ 19@NgModule({
19 imports: [ 20 imports: [
@@ -45,6 +46,7 @@ import { ServerService } from './server'
45 AuthService, 46 AuthService,
46 ConfirmService, 47 ConfirmService,
47 ServerService, 48 ServerService,
49 ThemeService,
48 LoginGuard, 50 LoginGuard,
49 UserRightGuard, 51 UserRightGuard,
50 RedirectService 52 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'
2export * from './server' 2export * from './server'
3export * from './confirm' 3export * from './confirm'
4export * from './routing' 4export * from './routing'
5export * from './theme'
5export * from './core.module' 6export * 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 @@
1import { Injectable } from '@angular/core'
2
3@Injectable()
4export class ThemeService {
5 private theme = document.querySelector('body')
6 private previousTheme = {}
7
8 constructor () {
9 // initialise the alternative theme with dark theme colors
10 this.previousTheme['mainBackgroundColor'] = '#111111'
11 this.previousTheme['mainForegroundColor'] = '#fff'
12 this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
13 this.previousTheme['inputColor'] = 'gray'
14 this.previousTheme['inputPlaceholderColor'] = '#fff'
15 }
16
17 toggleDarkTheme () {
18 // switch properties
19 this.switchProperty('mainBackgroundColor')
20 this.switchProperty('mainForegroundColor')
21 this.switchProperty('submenuColor')
22 this.switchProperty('inputColor')
23 this.switchProperty('inputPlaceholderColor')
24 }
25
26 private switchProperty (property, newValue?) {
27 const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
28 this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
29 this.previousTheme[property] = propertyOldvalue
30 }
31}
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 @@
1import { Component, OnInit, ViewChild } from '@angular/core' 1import { Component, OnInit, ViewChild } from '@angular/core'
2import { UserRight } from '../../../../shared/models/users/user-right.enum' 2import { UserRight } from '../../../../shared/models/users/user-right.enum'
3import { AuthService, AuthStatus, RedirectService, ServerService } from '../core' 3import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core'
4import { User } from '../shared/users/user.model' 4import { User } from '../shared/users/user.model'
5import { LanguageChooserComponent } from '@app/menu/language-chooser.component' 5import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
6import { Hotkey, HotkeysService } from 'angular2-hotkeys'
7 6
8@Component({ 7@Component({
9 selector: 'my-menu', 8 selector: 'my-menu',
@@ -16,7 +15,6 @@ export class MenuComponent implements OnInit {
16 user: User 15 user: User
17 isLoggedIn: boolean 16 isLoggedIn: boolean
18 userHasAdminAccess = false 17 userHasAdminAccess = false
19 hotkeys: Hotkey[]
20 18
21 private routesPerRight = { 19 private routesPerRight = {
22 [UserRight.MANAGE_USERS]: '/admin/users', 20 [UserRight.MANAGE_USERS]: '/admin/users',
@@ -24,14 +22,12 @@ export class MenuComponent implements OnInit {
24 [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', 22 [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
25 [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' 23 [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
26 } 24 }
27 private theme = document.querySelector('body')
28 private previousTheme = { }
29 25
30 constructor ( 26 constructor (
31 private authService: AuthService, 27 private authService: AuthService,
32 private serverService: ServerService, 28 private serverService: ServerService,
33 private redirectService: RedirectService, 29 private redirectService: RedirectService,
34 private hotkeysService: HotkeysService 30 private themeService: ThemeService
35 ) {} 31 ) {}
36 32
37 ngOnInit () { 33 ngOnInit () {
@@ -56,21 +52,6 @@ export class MenuComponent implements OnInit {
56 } 52 }
57 } 53 }
58 ) 54 )
59
60 // initialise the alternative theme with dark theme colors
61 this.previousTheme['mainBackgroundColor'] = '#111111'
62 this.previousTheme['mainForegroundColor'] = '#fff'
63 this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
64 this.previousTheme['inputColor'] = 'gray'
65 this.previousTheme['inputPlaceholderColor'] = '#fff'
66
67 this.hotkeys = [
68 new Hotkey('T', (event: KeyboardEvent): boolean => {
69 this.toggleDarkTheme()
70 return false
71 }, undefined, 'Toggle Dark theme')
72 ]
73 this.hotkeysService.add(this.hotkeys)
74 } 55 }
75 56
76 isRegistrationAllowed () { 57 isRegistrationAllowed () {
@@ -117,18 +98,7 @@ export class MenuComponent implements OnInit {
117 } 98 }
118 99
119 toggleDarkTheme () { 100 toggleDarkTheme () {
120 // switch properties 101 this.themeService.toggleDarkTheme()
121 this.switchProperty('mainBackgroundColor')
122 this.switchProperty('mainForegroundColor')
123 this.switchProperty('submenuColor')
124 this.switchProperty('inputColor')
125 this.switchProperty('inputPlaceholderColor')
126 }
127
128 private switchProperty (property, newValue?) {
129 const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
130 this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
131 this.previousTheme[property] = propertyOldvalue
132 } 102 }
133 103
134 private computeIsUserHasAdminAccess () { 104 private computeIsUserHasAdminAccess () {