From d0102f5bdb8b94e91b440b493efe1e43b1d261b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B3bert=20Kiss?= Date: Mon, 16 Jul 2018 23:05:41 +0200 Subject: [PATCH] feat: add help page (#728) * feat: add help page * feat: add help page content --- .../agent/about/about.component.html | 4 +-- .../components/agent/about/about.component.ts | 12 +------- .../src/app/components/agent/agent.routes.ts | 5 ++++ .../agent/help-page/help-page.component.html | 28 +++++++++++++++++++ .../agent/help-page/help-page.component.scss | 5 ++++ .../agent/help-page/help-page.component.ts | 13 +++++++++ .../side-menu/side-menu.component.html | 6 ++++ .../external-url/external-url.directive.ts | 25 +++++++++++++++++ .../src/app/directives/external-url/index.ts | 1 + packages/uhk-web/src/app/directives/index.ts | 1 + packages/uhk-web/src/app/shared.module.ts | 7 +++-- packages/uhk-web/src/styles.scss | 20 +++++++++++++ 12 files changed, 112 insertions(+), 15 deletions(-) create mode 100644 packages/uhk-web/src/app/components/agent/help-page/help-page.component.html create mode 100644 packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss create mode 100644 packages/uhk-web/src/app/components/agent/help-page/help-page.component.ts create mode 100644 packages/uhk-web/src/app/directives/external-url/external-url.directive.ts create mode 100644 packages/uhk-web/src/app/directives/external-url/index.ts diff --git a/packages/uhk-web/src/app/components/agent/about/about.component.html b/packages/uhk-web/src/app/components/agent/about/about.component.html index f73d6b1c..c6b23fe6 100644 --- a/packages/uhk-web/src/app/components/agent/about/about.component.html +++ b/packages/uhk-web/src/app/components/agent/about/about.component.html @@ -4,7 +4,7 @@ About
-
Agent version: {{version}}
-
Agent on GitHub
+
Agent version: {{ version }}
+
Agent on GitHub
diff --git a/packages/uhk-web/src/app/components/agent/about/about.component.ts b/packages/uhk-web/src/app/components/agent/about/about.component.ts index 85b39e30..3c6528ff 100644 --- a/packages/uhk-web/src/app/components/agent/about/about.component.ts +++ b/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; - - constructor(private store: Store) { - } - - openAgentGitHubPage(event) { - event.preventDefault(); - this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL)); - } + agentGithubUrl = Constants.AGENT_GITHUB_URL; } diff --git a/packages/uhk-web/src/app/components/agent/agent.routes.ts b/packages/uhk-web/src/app/components/agent/agent.routes.ts index 8400c98b..ac956489 100644 --- a/packages/uhk-web/src/app/components/agent/agent.routes.ts +++ b/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 diff --git a/packages/uhk-web/src/app/components/agent/help-page/help-page.component.html b/packages/uhk-web/src/app/components/agent/help-page/help-page.component.html new file mode 100644 index 00000000..e77fcde0 --- /dev/null +++ b/packages/uhk-web/src/app/components/agent/help-page/help-page.component.html @@ -0,0 +1,28 @@ +
+

+ + Help +

+
+ +
+
+ Frequently asked questions + +
+
+ +
+
+ Keyboard shortcuts +
    +
  • CTRL + Enter = Remap key
    • +
  • CTRL + S = Save to keyboard
    • +
  • Right click on a key = Capture key
    • +
  • Hold Shift while clicking on a key = Remap on all keymaps
    • +
  • Hold Alt while clicking on a key = Remap on all layers
    • +
+
+
diff --git a/packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss b/packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss new file mode 100644 index 00000000..27a2b1c7 --- /dev/null +++ b/packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss @@ -0,0 +1,5 @@ +:host { + width: 100%; + height: 100%; + display: block; +} diff --git a/packages/uhk-web/src/app/components/agent/help-page/help-page.component.ts b/packages/uhk-web/src/app/components/agent/help-page/help-page.component.ts new file mode 100644 index 00000000..680b924f --- /dev/null +++ b/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 { +} diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html index 0a53d4cf..26fc8e2f 100644 --- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html +++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html @@ -142,6 +142,12 @@ [class.disabled]="state.updatingFirmware">Settings +
  • +
    + Help +
    +
  • ) { + } + + @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)); + } + } +} diff --git a/packages/uhk-web/src/app/directives/external-url/index.ts b/packages/uhk-web/src/app/directives/external-url/index.ts new file mode 100644 index 00000000..ca0e9dfe --- /dev/null +++ b/packages/uhk-web/src/app/directives/external-url/index.ts @@ -0,0 +1 @@ +export * from './external-url.directive'; diff --git a/packages/uhk-web/src/app/directives/index.ts b/packages/uhk-web/src/app/directives/index.ts index 4ae00488..457ba888 100644 --- a/packages/uhk-web/src/app/directives/index.ts +++ b/packages/uhk-web/src/app/directives/index.ts @@ -1,2 +1,3 @@ export * from './cancelable'; export * from './tooltip'; +export * from './external-url'; diff --git a/packages/uhk-web/src/app/shared.module.ts b/packages/uhk-web/src/app/shared.module.ts index f92abccd..c03afe70 100644 --- a/packages/uhk-web/src/app/shared.module.ts +++ b/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, diff --git a/packages/uhk-web/src/styles.scss b/packages/uhk-web/src/styles.scss index a0684a4a..a1c4cc77 100644 --- a/packages/uhk-web/src/styles.scss +++ b/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; +}