aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html3
-rw-r--r--client/src/app/menu/menu.component.scss16
-rw-r--r--client/src/app/menu/menu.component.ts24
3 files changed, 40 insertions, 3 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 8fe6797d6..d9e75adea 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -87,6 +87,9 @@
87 <span class="language"> 87 <span class="language">
88 <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span> 88 <span (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
89 </span> 89 </span>
90 <span class="color-palette">
91 <span (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
92 </span>
90 </div> 93 </div>
91 </menu> 94 </menu>
92</div> 95</div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 941c208e2..4ef330b2f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,7 +9,7 @@
9} 9}
10 10
11menu { 11menu {
12 background-color: $black-background; 12 background-color: $menu-background;
13 margin: 0; 13 margin: 0;
14 padding: 0; 14 padding: 0;
15 height: 100%; 15 height: 100%;
@@ -190,10 +190,10 @@ menu {
190 } 190 }
191 191
192 .footer { 192 .footer {
193 margin-bottom: 15px; 193 padding-bottom: 15px;
194 padding-left: $menu-left-padding; 194 padding-left: $menu-left-padding;
195 195
196 .language { 196 .language, .color-palette {
197 display: inline-block; 197 display: inline-block;
198 color: $menu-bottom-color; 198 color: $menu-bottom-color;
199 cursor: pointer; 199 cursor: pointer;
@@ -213,6 +213,16 @@ menu {
213 background-image: url('../../assets/images/menu/language.png'); 213 background-image: url('../../assets/images/menu/language.png');
214 } 214 }
215 215
216 &.icon-moonsun {
217 margin-left: 10px;
218 position: relative;
219 top: -1px;
220 width: 24px;
221 height: 24px;
222
223 background-image: url('../../assets/images/menu/moonsun.svg');
224 }
225
216 &:hover { 226 &:hover {
217 opacity: 1; 227 opacity: 1;
218 } 228 }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index dded6b4d5..3de4a78af 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -22,6 +22,8 @@ export class MenuComponent implements OnInit {
22 [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', 22 [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses',
23 [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' 23 [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist'
24 } 24 }
25 private theme = document.querySelector('body')
26 private previousTheme = { }
25 27
26 constructor ( 28 constructor (
27 private authService: AuthService, 29 private authService: AuthService,
@@ -51,6 +53,13 @@ export class MenuComponent implements OnInit {
51 } 53 }
52 } 54 }
53 ) 55 )
56
57 // initialise the alternative theme with dark theme colors
58 this.previousTheme['mainBackgroundColor'] = '#111111'
59 this.previousTheme['mainForegroundColor'] = '#fff'
60 this.previousTheme['submenuColor'] = 'rgb(32,32,32)'
61 this.previousTheme['inputColor'] = 'gray'
62 this.previousTheme['inputPlaceholderColor'] = '#fff'
54 } 63 }
55 64
56 isRegistrationAllowed () { 65 isRegistrationAllowed () {
@@ -96,6 +105,21 @@ export class MenuComponent implements OnInit {
96 this.languageChooserModal.show() 105 this.languageChooserModal.show()
97 } 106 }
98 107
108 toggleDarkTheme () {
109 // switch properties
110 this.switchProperty('mainBackgroundColor')
111 this.switchProperty('mainForegroundColor')
112 this.switchProperty('submenuColor')
113 this.switchProperty('inputColor')
114 this.switchProperty('inputPlaceholderColor')
115 }
116
117 private switchProperty (property, newValue?) {
118 const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property)
119 this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property])
120 this.previousTheme[property] = propertyOldvalue
121 }
122
99 private computeIsUserHasAdminAccess () { 123 private computeIsUserHasAdminAccess () {
100 const right = this.getFirstAdminRightAvailable() 124 const right = this.getFirstAdminRightAvailable()
101 125