aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.ts6
-rw-r--r--client/src/app/menu/menu.component.html3
-rw-r--r--client/src/app/menu/menu.component.scss13
-rw-r--r--client/src/app/menu/menu.component.ts13
4 files changed, 32 insertions, 3 deletions
diff --git a/client/src/app/core/hotkeys/hotkeys.component.ts b/client/src/app/core/hotkeys/hotkeys.component.ts
index fd62289fa..512a2399a 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.ts
+++ b/client/src/app/core/hotkeys/hotkeys.component.ts
@@ -29,7 +29,7 @@ export class CheatSheetComponent implements OnInit, OnDestroy {
29 if (isOpen === false) { 29 if (isOpen === false) {
30 this.helpVisible = false 30 this.helpVisible = false
31 } else { 31 } else {
32 this.toggleCheatSheet() 32 this.toggleHelpVisible()
33 } 33 }
34 }) 34 })
35 } 35 }
@@ -41,6 +41,10 @@ export class CheatSheetComponent implements OnInit, OnDestroy {
41 } 41 }
42 42
43 public toggleCheatSheet (): void { 43 public toggleCheatSheet (): void {
44 this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
45 }
46
47 public toggleHelpVisible (): void {
44 this.helpVisible = !this.helpVisible 48 this.helpVisible = !this.helpVisible
45 } 49 }
46} 50}
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 139664534..e04bdf3d6 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 tabindex="0" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span> 88 <span tabindex="0" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
89 </span> 89 </span>
90 <span class="shortcuts">
91 <span tabindex="0" (keyup.enter)="openHotkeysCheatSheet()" (click)="openHotkeysCheatSheet()" i18n-title title="Show keyboard shortcuts" class="icon icon-shortcuts"></span>
92 </span>
90 <span class="color-palette"> 93 <span class="color-palette">
91 <span tabindex="0" (keyup.enter)="toggleDarkTheme()" (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span> 94 <span tabindex="0" (keyup.enter)="toggleDarkTheme()" (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
92 </span> 95 </span>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 3e072279f..a842765ba 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -196,7 +196,7 @@ menu {
196 padding-right: $menu-lateral-padding; 196 padding-right: $menu-lateral-padding;
197 width: $menu-width; 197 width: $menu-width;
198 198
199 .language, .color-palette { 199 .language, .shortcuts, .color-palette {
200 display: inline-block; 200 display: inline-block;
201 color: $menu-bottom-color; 201 color: $menu-bottom-color;
202 cursor: pointer; 202 cursor: pointer;
@@ -217,6 +217,17 @@ menu {
217 background-image: url('../../assets/images/menu/language.png'); 217 background-image: url('../../assets/images/menu/language.png');
218 } 218 }
219 219
220 &.icon-shortcuts {
221 position: relative;
222 top: -1px;
223 width: 24px;
224 height: 24px;
225
226 background-image: url('../../assets/images/menu/keyboard.png');
227 background-color: #fff;
228 filter: invert(100%);
229 }
230
220 &.icon-moonsun { 231 &.icon-moonsun {
221 margin-left: 10px; 232 margin-left: 10px;
222 position: relative; 233 position: relative;
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index f13ecc2c7..9b3608b15 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -3,6 +3,7 @@ import { UserRight } from '../../../../shared/models/users/user-right.enum'
3import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } 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 { HotkeysService } from 'angular2-hotkeys'
6 7
7@Component({ 8@Component({
8 selector: 'my-menu', 9 selector: 'my-menu',
@@ -15,6 +16,7 @@ export class MenuComponent implements OnInit {
15 user: User 16 user: User
16 isLoggedIn: boolean 17 isLoggedIn: boolean
17 userHasAdminAccess = false 18 userHasAdminAccess = false
19 helpVisible = false
18 20
19 private routesPerRight = { 21 private routesPerRight = {
20 [UserRight.MANAGE_USERS]: '/admin/users', 22 [UserRight.MANAGE_USERS]: '/admin/users',
@@ -29,7 +31,8 @@ export class MenuComponent implements OnInit {
29 private authService: AuthService, 31 private authService: AuthService,
30 private serverService: ServerService, 32 private serverService: ServerService,
31 private redirectService: RedirectService, 33 private redirectService: RedirectService,
32 private themeService: ThemeService 34 private themeService: ThemeService,
35 private hotkeysService: HotkeysService
33 ) {} 36 ) {}
34 37
35 ngOnInit () { 38 ngOnInit () {
@@ -54,6 +57,10 @@ export class MenuComponent implements OnInit {
54 } 57 }
55 } 58 }
56 ) 59 )
60
61 this.hotkeysService.cheatSheetToggle.subscribe(isOpen => {
62 this.helpVisible = isOpen
63 })
57 } 64 }
58 65
59 isRegistrationAllowed () { 66 isRegistrationAllowed () {
@@ -101,6 +108,10 @@ export class MenuComponent implements OnInit {
101 this.languageChooserModal.show() 108 this.languageChooserModal.show()
102 } 109 }
103 110
111 openHotkeysCheatSheet () {
112 this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
113 }
114
104 toggleDarkTheme () { 115 toggleDarkTheme () {
105 this.themeService.toggleDarkTheme() 116 this.themeService.toggleDarkTheme()
106 } 117 }