diff --git a/src/components/popover/capture-keystroke-button.component.ts b/src/components/popover/capture-keystroke-button.component.ts new file mode 100644 index 00000000..f3a8ce02 --- /dev/null +++ b/src/components/popover/capture-keystroke-button.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'capture-keystroke-button', + template: + ` + + `, + styles: + [` + button { + display: inline-block; + margin: 0 0 0 .25rem; + } + + .fa-circle { + color:#c00; + } + `] +}) +export class CaptureKeystrokeButtonComponent implements OnInit { + private record: boolean; + + constructor() { } + + ngOnInit() { } + + private start(): void { + this.record = true; + } + + private stop(): void { + this.record = false; + } + +} diff --git a/src/components/popover/keypress-edit.component.ts b/src/components/popover/keypress-edit.component.ts new file mode 100644 index 00000000..a1f20c42 --- /dev/null +++ b/src/components/popover/keypress-edit.component.ts @@ -0,0 +1,55 @@ +import { Component, OnInit } from '@angular/core'; + +import {CaptureKeystrokeButtonComponent} from './capture-keystroke-button.component'; + +@Component({ + moduleId: module.id, + selector: 'keypress-edit', + template: + ` +
+ Scancode: + + +
+
+ Modifiers: +
+
+ +
+
+ +
+
+
+
+ Long press action: + + + +
+ `, + directives: [CaptureKeystrokeButtonComponent] +}) +export class KeypressEditComponent implements OnInit { + private leftModifiers: string[]; + private rightModifiers: string[]; + + constructor() { + this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt']; + this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt']; + } + + ngOnInit() { } + +} diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts new file mode 100644 index 00000000..be5e65a5 --- /dev/null +++ b/src/components/popover/popover.component.ts @@ -0,0 +1,154 @@ +import { + Component, + OnInit, + AfterViewInit, + Output, + EventEmitter, + ViewChildren, + ElementRef, + Renderer, + QueryList, + ChangeDetectorRef +} from '@angular/core'; + +import {NgSwitch, NgSwitchWhen} from '@angular/common'; + +import {KeypressEditComponent} from './keypress-edit.component'; + +@Component({ + moduleId: module.id, + selector: 'popover', + template: + ` +
+
+
+ +
+
+
+
+ +
Layer
+
Mouse
+
Macro
+
Keymap
+
None
+
+
+
+
+ + +
+
+
+ `, + styles: + [` + :host { + display: flex; + flex-direction: column; + min-width: 577px; + padding: 0; + } + + .popover-action { + padding: 8px 14px; + margin: 0; + font-size: 14px; + background-color: #f7f7f7; + border-top: 1px solid #ebebeb; + border-radius: 0 0 5px 5px; + text-align: right; + } + + .popover-title.menu-tabs { + padding: .5rem .5rem 0; + display: block; + } + + .popover-title.menu-tabs .nav-tabs { + position: relative; + top: 1px; + } + + .popover-content { + padding: 10px 24px; + } + `], + host: { 'class': 'popover' }, + directives: [NgSwitch, NgSwitchWhen, KeypressEditComponent] +}) +export class PopoverComponent implements OnInit, AfterViewInit { + @Output() cancel = new EventEmitter(); + @ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList; + + private activeListItemIndex: number; + + constructor(private renderer: Renderer, private changeDetectorRef: ChangeDetectorRef) { + this.activeListItemIndex = -1; + } + + ngOnInit() { } + + ngAfterViewInit() { + this.onListItemClick(0); + this.changeDetectorRef.detectChanges(); + } + + onCancelClick(): void { + this.cancel.emit(undefined); + } + + onRemapKey(): void { + + } + + onListItemClick(index: number): void { + let listItems: HTMLLIElement[] = this.liElementRefs.toArray().map(liElementRef => liElementRef.nativeElement); + if (this.activeListItemIndex >= 0) { + this.renderer.setElementClass(listItems[this.activeListItemIndex], 'active', false); + } + this.renderer.setElementClass(listItems[index], 'active', true); + this.activeListItemIndex = index; + } + +} diff --git a/src/components/svg-keyboard.component.ts b/src/components/svg-keyboard.component.ts index 88bb88a2..3d464845 100644 --- a/src/components/svg-keyboard.component.ts +++ b/src/components/svg-keyboard.component.ts @@ -3,6 +3,7 @@ import { Component, OnInit, Input} from '@angular/core'; import {Module} from '../../config-serializer/config-items/Module'; import {SvgModule} from './svg-module.model'; import {SvgModuleComponent} from './svg-module.component'; +import {PopoverComponent} from './popover/popover.component'; @Component({ selector: 'svg-keyboard', @@ -15,9 +16,11 @@ import {SvgModuleComponent} from './svg-module.component'; [keyboardKeys]="module.keyboardKeys" [attr.transform]="module.attributes.transform" [keyActions]="moduleConfig[i].keyActions.elements" + (editKeyActionRequest)="onEditKeyActionRequest(i, $event)" /> + `, styles: [` @@ -25,19 +28,34 @@ import {SvgModuleComponent} from './svg-module.component'; display: flex; width: 100%; height: 100%; + position: relative; } `], - directives: [SvgModuleComponent] + directives: [SvgModuleComponent, PopoverComponent] }) export class SvgKeyboardComponent implements OnInit { @Input() svgAttributes: { viewBox: string, transform: string, fill: string }; @Input() modules: SvgModule[]; @Input() moduleConfig: Module[]; + private popoverEnabled: boolean; + constructor() { this.modules = []; } ngOnInit() { } + onEditKeyActionRequest(moduleId: number, keyId: number): void { + this.showPopover(); + } + + showPopover(): void { + this.popoverEnabled = true; + } + + hidePopover(): void { + this.popoverEnabled = false; + } + } diff --git a/src/components/svg-module.component.ts b/src/components/svg-module.component.ts index b76a6375..7552fb3a 100644 --- a/src/components/svg-module.component.ts +++ b/src/components/svg-module.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import {SvgKeyboardKey} from './svg-keyboard-key.model'; import {SvgKeyboardKeyComponent} from './svg-keyboard-key.component'; @@ -15,14 +15,23 @@ import {KeyAction} from '../../config-serializer/config-items/KeyAction'; [width]="key.width" [height]="key.height" [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'" [keyAction]="keyActions[i]" + (click)="onKeyClick(i)" /> + `, + styles: + [` + :host { + position: relative; + } + `], directives: [SvgKeyboardKeyComponent] }) export class SvgModuleComponent implements OnInit { @Input() coverages: any[]; @Input() keyboardKeys: SvgKeyboardKey[]; @Input() keyActions: KeyAction[]; + @Output() editKeyActionRequest = new EventEmitter(); constructor() { this.keyboardKeys = []; @@ -30,4 +39,8 @@ export class SvgModuleComponent implements OnInit { ngOnInit() { } + onKeyClick(index: number): void { + this.editKeyActionRequest.emit(index); + } + }