feat: add help page (#728)

* feat: add help page

* feat: add help page content

packages/uhk-web/src/app/components/agent/about/about.component.html

@@ -4,7 +4,7 @@
         <span>About</span>
     </h1>
     <div class="col-xs-12">
-        <div class="agent-version">Agent version: <span class="text-bold">{{version}}</span></div>
+        <div class="agent-version">Agent version: <span class="text-bold">{{ version }}</span></div>
-        <div><a class="link-github" (click)="openAgentGitHubPage($event)">Agent on GitHub</a></div>
+        <div><a class="link-github" [href]="agentGithubUrl" externalUrl>Agent on GitHub</a></div>
     </div>
 </div>

packages/uhk-web/src/app/components/agent/about/about.component.ts

@@ -1,10 +1,7 @@
 import { Component } from '@angular/core';
-import { Store } from '@ngrx/store';
 import { Constants } from 'uhk-common';
 
-import { AppState } from '../../../store';
 import { getVersions } from '../../../util';
-import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 
 @Component({
     selector: 'about-page',
@@ -16,12 +13,5 @@ import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 })
 export class AboutComponent {
     version: string = getVersions().version;
-
+    agentGithubUrl = Constants.AGENT_GITHUB_URL;
-    constructor(private store: Store<AppState>) {
-    }
-
-    openAgentGitHubPage(event) {
-        event.preventDefault();
-        this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL));
-    }
 }

packages/uhk-web/src/app/components/agent/agent.routes.ts

@@ -2,12 +2,17 @@ import { Routes } from '@angular/router';
 
 import { SettingsComponent } from './settings/settings.component';
 import { AboutComponent } from './about/about.component';
+import { HelpPageComponent } from './help-page/help-page.component';
 
 export const agentRoutes: Routes = [
     {
         path: 'settings',
         component: SettingsComponent
     },
+    {
+        path: 'help',
+        component: HelpPageComponent
+    },
     {
         path: 'about',
         component: AboutComponent

packages/uhk-web/src/app/components/agent/help-page/help-page.component.html

@@ -0,0 +1,28 @@
+<div class="row">
+    <h1 class="col-xs-12 pane-title">
+        <i class="fa fa-question-circle"></i>
+        <span class="macro__name pane-title__name">Help</span>
+    </h1>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        Frequently asked questions
+        <ul>
+            <li><a href="https://ultimatehackingkeyboard.com/blog/2018/06/23/how-can-i-type-accented-characters-with-my-uhk" externalUrl>How can I type accented characters with my UHK?</a></li>
+        </ul>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        Keyboard shortcuts
+        <ul>
+            <li><kbd>CTRL</kbd> + <kbd>Enter</kbd> = Remap key</li>
+            <li><kbd>CTRL</kbd> + <kbd>S</kbd> = Save to keyboard</li>
+            <li>Right click on a key = Capture key</li>
+            <li>Hold Shift while clicking on a key = Remap on all keymaps</li>
+            <li>Hold Alt while clicking on a key = Remap on all layers</li>
+        </ul>
+    </div>
+</div>

packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss

@@ -0,0 +1,5 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

packages/uhk-web/src/app/components/agent/help-page/help-page.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'help-page',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './help-page.component.html',
+    styleUrls: ['./help-page.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class HelpPageComponent {
+}

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -142,6 +142,12 @@
                        [class.disabled]="state.updatingFirmware">Settings</a>
                 </div>
             </li>
+            <li class="sidebar__level-2--item">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/help']"
+                       [class.disabled]="state.updatingFirmware">Help</a>
+                </div>
+            </li>
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/about']"

packages/uhk-web/src/app/directives/external-url/external-url.directive.ts

@@ -0,0 +1,25 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { AppState } from '../../store';
+import { OpenUrlInNewWindowAction } from '../../store/actions/app';
+
+@Directive({
+    selector: 'a[externalUrl]'
+})
+export class ExternalUrlDirective {
+    constructor(private el: ElementRef,
+                private store: Store<AppState>) {
+    }
+
+    @HostListener('click', ['$event'])
+    onClick($event: MouseEvent): void {
+        $event.preventDefault();
+        $event.stopPropagation();
+
+        const anchor = this.el.nativeElement as HTMLAnchorElement;
+        if (anchor.href) {
+            this.store.dispatch(new OpenUrlInNewWindowAction(anchor.href));
+        }
+    }
+}

packages/uhk-web/src/app/directives/external-url/index.ts

@@ -0,0 +1 @@
+export * from './external-url.directive';

packages/uhk-web/src/app/directives/index.ts

@@ -1,2 +1,3 @@
 export * from './cancelable';
 export * from './tooltip';
+export * from './external-url';

packages/uhk-web/src/app/shared.module.ts

@@ -68,7 +68,7 @@ import { SvgModuleComponent } from './components/svg/module';
 import { SvgKeyboardWrapComponent } from './components/svg/wrap';
 import { appRoutingProviders, routing } from './app.routes';
 
-import { CancelableDirective, TooltipDirective } from './directives';
+import { CancelableDirective, ExternalUrlDirective, TooltipDirective } from './directives';
 import { SafeStylePipe } from './pipes';
 
 import { CaptureService } from './services/capture.service';
@@ -109,6 +109,7 @@ import { Autofocus } from './directives/autofocus/autofocus.directive';
 import { UhkDeviceBootloaderNotActiveGuard } from './services/uhk-device-bootloader-not-active.guard';
 import { FileUploadComponent } from './components/file-upload';
 import { AutoGrowInputComponent } from './components/auto-grow-input';
+import { HelpPageComponent } from './components/agent/help-page/help-page.component';
 
 @NgModule({
     declarations: [
@@ -183,7 +184,9 @@ import { AutoGrowInputComponent } from './components/auto-grow-input';
         RestoreConfigurationComponent,
         RecoveryModeComponent,
         FileUploadComponent,
-        AutoGrowInputComponent
+        AutoGrowInputComponent,
+        HelpPageComponent,
+        ExternalUrlDirective
     ],
     imports: [
         CommonModule,

packages/uhk-web/src/styles.scss

@@ -160,3 +160,23 @@ pre {
 .d-inline-block {
     display: inline-block;
 }
+
+kbd {
+    padding: 0.1em 0.6em;
+    border: 1px solid #ccc;
+    font-size: 11px;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #f7f7f7;
+    color: #333;
+    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
+    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    display: inline-block;
+    margin: 0 0.1em;
+    text-shadow: 0 1px 0 #fff;
+    line-height: 1.4;
+    white-space: nowrap;
+}