add modal and shortcut for keyboard shortcuts

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

Hide file tree

Showing 5 changed files with 104 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,7 +47,79 @@ <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>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-primary"
+      (click)="isShortcutModalOpen = false"
+    >
       Close
     </button>
   </div>

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;
+    }
+  }
 }
diff --git a/web/src/app/modules/shared/shared.module.ts b/web/src/app/modules/shared/shared.module.ts
@@ -75,6 +75,7 @@ import { ViewHostDirective } from './directives/view-host/view-host.directive';
 import { dynamicComponents } from './dynamic-components';
 import { ViewContainerComponent } from './components/view/view-container.component';
 import { MissingComponentComponent } from './components/missing-component/missing-component.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
@@ -217,6 +218,7 @@ import { MissingComponentComponent } from './components/missing-component/missin
     MarkdownModule.forChild(),
     ReactiveFormsModule,
     ResizableModule,
+    BrowserAnimationsModule,
     RouterModule,
   ],
   providers: [highlightProvider(), dynamicComponents()],

diff --git a/web/src/app/modules/sugarloaf/components/smart/container/container.component.spec.ts b/web/src/app/modules/sugarloaf/components/smart/container/container.component.spec.ts
@@ -29,6 +29,7 @@ import { ThemeSwitchButtonComponent } from '../theme-switch/theme-switch-button.
 import { QuickSwitcherComponent } from '../quick-switcher/quick-switcher.component';
 import { MonacoEditorConfig, MonacoProviderService } from 'ng-monaco-editor';
 import { UploaderComponent } from '../uploader/uploader.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -64,6 +65,7 @@ describe('AppComponent', () => {
         ThemeSwitchButtonComponent,
         QuickSwitcherComponent,
         UploaderComponent,
+        BrowserAnimationsModule,
       ],
     }).compileComponents();
   }));