add modal and shortcut for keyboard shortcuts

Signed-off-by: Wayne Witzel III <wayne@riotousliving.com>
vmware-archive · Sep 3, 2020 · dce87c2 · dce87c2
1 parent f9b116b
commit dce87c2
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 5 deletions.
diff --git a/changelogs/unreleased/1319-wwitzel3 b/changelogs/unreleased/1319-wwitzel3
@@ -0,0 +1 @@
+add Ctrl+/ keyboard shortcut and list of keyboard shortcuts
diff --git a/web/src/app/modules/shared/components/smart/helper/helper.component.html b/web/src/app/modules/shared/components/smart/helper/helper.component.html
@@ -7,15 +7,26 @@
       <div
         aria-label="Dropdown header About Octant"
         clrDropdownItem
-        (click)="isModalOpen = true"
+        (click)="isBuildModalOpen = true"
       >
         About Octant
       </div>
+      <div
+        aria-label="Dropdown header About Octant"
+        clrDropdownItem
+        (click)="isShortcutModalOpen = true"
+      >
+        Keyboard Shortcuts
+        <span class="label">
+          Ctrl
+          <span class="badge">/</span>
+        </span>
+      </div>
     </clr-dropdown-menu>
   </clr-dropdown>
 </div>
 
-<clr-modal [(clrModalOpen)]="isModalOpen" [clrModalStaticBackdrop]="false">
+<clr-modal [(clrModalOpen)]="isBuildModalOpen" [clrModalStaticBackdrop]="false">
   <h3 class="modal-title">Build Information</h3>
   <div class="modal-body">
     <table class="table table-vertical table-noborder">
@@ -36,8 +47,81 @@ <h3 class="modal-title">Build Information</h3>
     </table>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-primary" (click)="isModalOpen = false">
+    <button
+      type="button"
+      class="btn btn-primary"
+      (click)="isBuildModalOpen = false"
+    >
       Close
     </button>
   </div>
 </clr-modal>
+
+<clr-modal
+  [(clrModalOpen)]="isShortcutModalOpen"
+  [clrModalStaticBackdrop]="false"
+>
+  <h3 class="modal-title">Keyboard Shortcuts</h3>
+  <div class="modal-body">
+    <clr-stack-view>
+      <clr-stack-block
+        [clrSbExpandable]="false"
+        [clrSbExpanded]="true"
+        [clrStackViewLevel]="1"
+        [clrStackViewSetsize]="2"
+        [clrStackViewPosinset]="1"
+      >
+        <clr-stack-label>Global</clr-stack-label>
+        <clr-stack-block
+          [clrStackViewLevel]="2"
+          [clrStackViewSetsize]="0"
+          [clrStackViewPosinset]="1"
+        >
+          <clr-stack-label>Keyboard shortcut list</clr-stack-label>
+          <clr-stack-content>
+            <span class="label">Ctrl<span class="badge">/</span></span>
+          </clr-stack-content>
+        </clr-stack-block>
+        <clr-stack-block
+        [clrStackViewLevel]="2"
+        [clrStackViewSetsize]="0"
+        [clrStackViewPosinset]="1"
+      >
+        <clr-stack-label>Quick switcher menu</clr-stack-label>
+        <clr-stack-content>
+          <span class="label">Ctrl<span class="badge">Enter</span></span>
+        </clr-stack-content>
+      </clr-stack-block>
+      </clr-stack-block>
+      <clr-stack-block
+        [clrSbExpandable]="false"
+        [clrSbExpanded]="true"
+        [clrStackViewLevel]="1"
+        [clrStackViewSetsize]="2"
+        [clrStackViewPosinset]="1"
+      >
+        <clr-stack-label>YAML</clr-stack-label>
+        <clr-stack-block
+        [clrStackViewLevel]="2"
+        [clrStackViewSetsize]="0"
+        [clrStackViewPosinset]="1"
+      >
+        <clr-stack-label>Command pallete</clr-stack-label>
+        <clr-stack-content>
+          <span class="label">F1</span>
+        </clr-stack-content>
+      </clr-stack-block>
+      </clr-stack-block>
+    </clr-stack-view>
+
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-primary"
+        (click)="isShortcutModalOpen = false"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+</clr-modal>
diff --git a/web/src/app/modules/shared/components/smart/helper/helper.component.ts b/web/src/app/modules/shared/components/smart/helper/helper.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { HelperService } from '../../../../shared/services/helper/helper.service';
 
@@ -11,7 +11,8 @@ export class HelperComponent implements OnInit, OnDestroy {
   version = '';
   commit = '';
   time = '';
-  isModalOpen = false;
+  isBuildModalOpen = false;
+  isShortcutModalOpen = false;
   private buildInfoSubscription: Subscription;
 
   constructor(private helperService: HelperService) {}
@@ -31,4 +32,14 @@ export class HelperComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.buildInfoSubscription.unsubscribe();
   }
+
+  @HostListener('window:keyup', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    if (this.isShortcutModalOpen) {
+      return;
+    }
+    if (event.ctrlKey && event.key === '/') {
+      this.isShortcutModalOpen = true;
+    }
+  }
 }