diff options
Diffstat (limited to 'client/src')
-rw-r--r-- | client/src/app/core/hotkeys/hotkeys.component.ts | 6 | ||||
-rw-r--r-- | client/src/app/menu/menu.component.html | 3 | ||||
-rw-r--r-- | client/src/app/menu/menu.component.scss | 13 | ||||
-rw-r--r-- | client/src/app/menu/menu.component.ts | 13 | ||||
-rw-r--r-- | client/src/assets/images/menu/keyboard.png | bin | 0 -> 815 bytes |
5 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' | |||
3 | import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core' | 3 | import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core' |
4 | import { User } from '../shared/users/user.model' | 4 | import { User } from '../shared/users/user.model' |
5 | import { LanguageChooserComponent } from '@app/menu/language-chooser.component' | 5 | import { LanguageChooserComponent } from '@app/menu/language-chooser.component' |
6 | import { 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 | } |
diff --git a/client/src/assets/images/menu/keyboard.png b/client/src/assets/images/menu/keyboard.png new file mode 100644 index 000000000..ef9de868c --- /dev/null +++ b/client/src/assets/images/menu/keyboard.png | |||
Binary files differ | |||