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 {
if (isOpen === false) {
this.helpVisible = false
} else {
- this.toggleCheatSheet()
+ this.toggleHelpVisible()
}
})
}
@@ -41,6 +41,10 @@ export class CheatSheetComponent implements OnInit, OnDestroy {
}
public toggleCheatSheet (): void {
+ this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
+ }
+
+ public toggleHelpVisible (): void {
this.helpVisible = !this.helpVisible
}
}
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 @@
+
+
+
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 {
padding-right: $menu-lateral-padding;
width: $menu-width;
- .language, .color-palette {
+ .language, .shortcuts, .color-palette {
display: inline-block;
color: $menu-bottom-color;
cursor: pointer;
@@ -217,6 +217,17 @@ menu {
background-image: url('../../assets/images/menu/language.png');
}
+ &.icon-shortcuts {
+ position: relative;
+ top: -1px;
+ width: 24px;
+ height: 24px;
+
+ background-image: url('../../assets/images/menu/keyboard.png');
+ background-color: #fff;
+ filter: invert(100%);
+ }
+
&.icon-moonsun {
margin-left: 10px;
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'
import { AuthService, AuthStatus, RedirectService, ServerService, ThemeService } from '../core'
import { User } from '../shared/users/user.model'
import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
+import { HotkeysService } from 'angular2-hotkeys'
@Component({
selector: 'my-menu',
@@ -15,6 +16,7 @@ export class MenuComponent implements OnInit {
user: User
isLoggedIn: boolean
userHasAdminAccess = false
+ helpVisible = false
private routesPerRight = {
[UserRight.MANAGE_USERS]: '/admin/users',
@@ -29,7 +31,8 @@ export class MenuComponent implements OnInit {
private authService: AuthService,
private serverService: ServerService,
private redirectService: RedirectService,
- private themeService: ThemeService
+ private themeService: ThemeService,
+ private hotkeysService: HotkeysService
) {}
ngOnInit () {
@@ -54,6 +57,10 @@ export class MenuComponent implements OnInit {
}
}
)
+
+ this.hotkeysService.cheatSheetToggle.subscribe(isOpen => {
+ this.helpVisible = isOpen
+ })
}
isRegistrationAllowed () {
@@ -101,6 +108,10 @@ export class MenuComponent implements OnInit {
this.languageChooserModal.show()
}
+ openHotkeysCheatSheet () {
+ this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
+ }
+
toggleDarkTheme () {
this.themeService.toggleDarkTheme()
}
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
Binary files /dev/null and b/client/src/assets/images/menu/keyboard.png differ