KeyAction Editor Popover first steps.

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:
+    `
+     <button type="button" class="btn btn-sm btn--capture-keystroke"
+                [ngClass]="{'btn-default': !record, 'btn-info': record}"
+                (click)="record ? stop() : start()">
+        <i class="fa" [ngClass]=" { 'fa-circle' : !record, 'fa-square': record }"></i>
+        <template [ngIf]="!record">
+            Capture keystroke
+        </template>
+        <template [ngIf]="record">
+            Stop capturing
+        </template>
+     </button>
+    `,
+    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;
+    }
+
+}

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:
+    `
+        <div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
+            <b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
+            <select class="scancode" style="width: 200px">
+
+            </select>
+            <capture-keystroke-button></capture-keystroke-button>
+        </div>
+        <div class="scancode-options">
+            <b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
+            <div class="btn-toolbar modifiers" style="display:inline-block">
+                <div class="btn-group btn-group-sm modifiers__left">
+                    <button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers">
+                        {{modifier}}
+                    </button>
+                </div>
+                <div class="btn-group btn-group-sm modifiers__right">
+                    <button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers">
+                        {{modifier}}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div style="margin-top: 3rem;">
+            <b class="setting-label" style="position:relative;">Long press action:</b>
+            <select class="secondary-role" style="width:135px">
+
+            </select>
+            <i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right"
+                    title="This action happens when the key is being held along with another key.">
+            </i>
+        </div>
+    `,
+    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() { }
+
+}

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:
+    `
+        <div class="container-fluid">
+            <div class="row">
+                <div class="popover-title menu-tabs">
+                    <ul class="nav nav-tabs popover-menu">
+                        <li #keypress (click)="onListItemClick(0)">
+                            <a class="menu-tabs--item">
+                                <i class="fa fa-keyboard-o"></i>
+                                Keypress
+                            </a>
+                        </li>
+                        <li #layer (click)="onListItemClick(1)">
+                            <a class="menu-tabs--item">
+                                <i class="fa fa-clone"></i>
+                                Layer
+                            </a>
+                        </li>
+                        <li #mouse (click)="onListItemClick(2)">
+                            <a class="menu-tabs--item">
+                                <i class="fa fa-mouse-pointer"></i>
+                                Mouse
+                            </a>
+                        </li>
+                        <li #macro (click)="onListItemClick(3)">
+                            <a class="menu-tabs--item">
+                                <i class="fa fa-play"></i>
+                                Macro
+                            </a>
+                        </li>
+                        <li #keymap (click)="onListItemClick(4)">
+                            <a class="menu-tabs--item">
+                                <i class="fa fa-keyboard-o"></i>
+                                Keymap
+                            </a>
+                        </li>
+                        <li #none (click)="onListItemClick(5)">
+                            <a class="menu-tabs--item">
+                                <i class="fa fa-ban"></i>
+                                None
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="row" [ngSwitch]="activeListItemIndex">
+                <div class="popover-content">
+                    <keypress-edit *ngSwitchWhen="0"></keypress-edit>
+                    <div *ngSwitchWhen="1"> Layer </div>
+                    <div *ngSwitchWhen="2"> Mouse </div>
+                    <div *ngSwitchWhen="3"> Macro </div>
+                    <div *ngSwitchWhen="4"> Keymap </div>
+                    <div *ngSwitchWhen="5"> None </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="popover-action">
+                    <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
+                    <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
+                </div>
+            </div>
+        </div>
+    `,
+    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<any>();
+    @ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList<ElementRef>;
+
+    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;
+    }
+
+}

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)"
                 />
             </svg:g>
         </svg>
+        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()"></popover>
     `,
     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;
+    }
+
 }

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)"
         />
+        <popover *ngIf="popOverEnabled"></popover>
     `,
+    styles:
+    [`
+        :host {
+            position: relative;
+        }
+    `],
     directives: [SvgKeyboardKeyComponent]
 })
 export class SvgModuleComponent implements OnInit {
     @Input() coverages: any[];
     @Input() keyboardKeys: SvgKeyboardKey[];
     @Input() keyActions: KeyAction[];
+    @Output() editKeyActionRequest = new EventEmitter<number>();
 
     constructor() {
         this.keyboardKeys = [];
@@ -30,4 +39,8 @@ export class SvgModuleComponent implements OnInit {
 
     ngOnInit() { }
 
+    onKeyClick(index: number): void {
+        this.editKeyActionRequest.emit(index);
+    }
+
 }