add shortcuts icon in menu

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 {
       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 @@
       <span class="language">
         <span tabindex="0" (keyup.enter)="openLanguageChooser()" (click)="openLanguageChooser()" i18n-title title="Change the language" class="icon icon-language"></span>
       </span>
+      <span class="shortcuts">
+        <span tabindex="0" (keyup.enter)="openHotkeysCheatSheet()" (click)="openHotkeysCheatSheet()" i18n-title title="Show keyboard shortcuts" class="icon icon-shortcuts"></span>
+      </span>
       <span class="color-palette">
         <span tabindex="0" (keyup.enter)="toggleDarkTheme()" (click)="toggleDarkTheme()" i18n-title title="Toggle dark interface" class="icon icon-moonsun"></span>
       </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 {
     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()
   }