add shortcuts icon in menu

diff --git a/client/src/app/core/hotkeys/hotkeys.component.ts b/client/src/app/core/hotkeys/hotkeys.component.ts
index fd62289fa256ea54e342554b9caa1777eb22f890..512a2399a545677f5a991fd0a06665b02192bcfc 100644 (file)
--- 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 139664534e03afc54cbbf46ccc052ec4fb8a263d..e04bdf3d644bdbcb1958b2540f2868b797f6599f 100644 (file)
--- 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 3e072279f1b66bd603c38679fbaff3b636d0c114..a842765ba089615c5619d13987dbfc9775babaec 100644 (file)
--- 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 f13ecc2c7be8bc85fae47a2dcc8d676d3aba8691..9b3608b156594311553833561ec49dfe452632a9 100644 (file)
--- 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 (file)
index 0000000..ef9de86
Binary files /dev/null and b/client/src/assets/images/menu/keyboard.png differ