uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: add help page (#728)

Browse Source 
* feat: add help page

* feat: add help page content
This commit is contained in:
Róbert Kiss
2018-07-16 23:05:41 +02:00
committed by László Monda
parent eb0daadf98
commit d0102f5bdb
12 changed files with 112 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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><a class="link-github" (click)="openAgentGitHubPage($event)">Agent on GitHub</a></div>
<div class="agent-version">Agent version: <span class="text-bold">{{ version }}</span></div>
<div><a class="link-github" [href]="agentGithubUrl" externalUrl>Agent on GitHub</a></div>
</div>
</div>

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

@@ -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<AppState>) {
}
openAgentGitHubPage(event) {
event.preventDefault();
this.store.dispatch(new OpenUrlInNewWindowAction(Constants.AGENT_GITHUB_URL));
}
agentGithubUrl = Constants.AGENT_GITHUB_URL;
}

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

@@ -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

28
packages/uhk-web/src/app/components/agent/help-page/help-page.component.html Normal file
View File

@@ -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>

5
packages/uhk-web/src/app/components/agent/help-page/help-page.component.scss Normal file
View File

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

13
packages/uhk-web/src/app/components/agent/help-page/help-page.component.ts Normal file
View File

@@ -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 {
}

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

@@ -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']"

25
packages/uhk-web/src/app/directives/external-url/external-url.directive.ts Normal file
View File

@@ -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));
}
}
}

1
packages/uhk-web/src/app/directives/external-url/index.ts Normal file
View File

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

1
packages/uhk-web/src/app/directives/index.ts
View File

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

7
packages/uhk-web/src/app/shared.module.ts
View File

@@ -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,

20
packages/uhk-web/src/styles.scss
View File

@@ -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;
}