Basic popover tab components.

src/components/popover/popover.component.ts

@@ -13,7 +13,12 @@ import {
 
 import {NgSwitch, NgSwitchWhen} from '@angular/common';
 
-import {KeypressEditComponent} from './keypress-edit.component';
+import {KeypressTabComponent} from './tab/keypress-tab.component';
+import {LayerTabComponent} from './tab/layer-tab.component';
+import {MouseTabComponent} from './tab/mouse-tab.component';
+import {MacroTabComponent} from './tab/macro-tab.component';
+import {KeymapTabComponent} from './tab/keymap-tab.component';
+import {NoneTabComponent} from './tab/none-tab.component';
 
 @Component({
     moduleId: module.id,
@@ -65,12 +70,12 @@ import {KeypressEditComponent} from './keypress-edit.component';
             </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>
+                    <keypress-tab *ngSwitchWhen="0"></keypress-tab>
+                    <layer-tab *ngSwitchWhen="1"></layer-tab>
+                    <mouse-tab *ngSwitchWhen="2"></mouse-tab>
+                    <macro-tab *ngSwitchWhen="3"></macro-tab>
+                    <keymap-tab *ngSwitchWhen="4"></keymap-tab>
+                    <none-tab *ngSwitchWhen="5"></none-tab>
                 </div>
             </div>
             <div class="row">
@@ -115,7 +120,17 @@ import {KeypressEditComponent} from './keypress-edit.component';
         }
     `],
     host: { 'class': 'popover' },
-    directives: [NgSwitch, NgSwitchWhen, KeypressEditComponent]
+    directives:
+    [
+        NgSwitch,
+        NgSwitchWhen,
+        KeypressTabComponent,
+        LayerTabComponent,
+        MouseTabComponent,
+        MacroTabComponent,
+        KeymapTabComponent,
+        NoneTabComponent
+    ]
 })
 export class PopoverComponent implements OnInit, AfterViewInit {
     @Output() cancel = new EventEmitter<any>();

src/components/popover/tab/keymap-tab.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'keymap-tab',
+    template:
+    `
+        Keymap
+    `
+})
+export class KeymapTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/popover/tab/keypress-tab.component.ts

@@ -1,10 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 
-import {CaptureKeystrokeButtonComponent} from './capture-keystroke-button.component';
+import { CaptureKeystrokeButtonComponent } from '../widgets/capture-keystroke-button.component';
+
+import { KeystrokeAction } from '../../../../config-serializer/config-items/KeystrokeAction';
+import { KeystrokeModifiersAction } from '../../../../config-serializer/config-items/KeystrokeModifiersAction';
+import { KeystrokeWithModifiersAction } from '../../../../config-serializer/config-items/KeystrokeWithModifiersAction';
 
 @Component({
     moduleId: module.id,
-    selector: 'keypress-edit',
+    selector: 'keypress-tab',
     template:
     `
         <div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
@@ -41,10 +45,13 @@ import {CaptureKeystrokeButtonComponent} from './capture-keystroke-button.compon
     `,
     directives: [CaptureKeystrokeButtonComponent]
 })
-export class KeypressEditComponent implements OnInit {
+export class KeypressTabComponent implements OnInit {
     private leftModifiers: string[];
     private rightModifiers: string[];
 
+    private leftModifierSelects: boolean[];
+    private rightModifierSelects: boolean[];
+
     constructor() {
         this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
         this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
@@ -52,4 +59,8 @@ export class KeypressEditComponent implements OnInit {
 
     ngOnInit() { }
 
+    getKeyAction(): KeystrokeAction | KeystrokeModifiersAction | KeystrokeWithModifiersAction {
+        return;
+    }
+
 }

src/components/popover/tab/layer-tab.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'layer-tab',
+    template:
+    `
+        <select>
+            <option> Activate </option>
+            <option> Toggle </option>
+        </select>
+        <span>the</span>
+        <select>
+            <option> Mod </option>
+            <option> Fn </option>
+            <option> Mouse </option>
+        </select>
+        <span>
+        layer by holding this key.
+        </span>
+    `
+})
+export class LayerTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/popover/tab/macro-tab.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'macro-tab',
+    template:
+    `
+        Macro
+    `
+})
+export class MacroTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/popover/tab/mouse-tab.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'mouse-tab',
+    template:
+    `
+        <div class="mouse-action">
+            <ul class="nav nav-pills nav-stacked">
+                <li><a>     Move    </a></li>
+                <li><a>     Scroll  </a></li>
+                <li><a>     Click   </a></li>
+                <li><a>     Speed   </a></li>
+            </ul>
+        </div>
+        <div class="details">
+        </div>
+    `,
+    styles:
+    [`
+        :host {
+            display: flex;
+        }
+
+        .mouse-action {
+            flex: 1;
+            border-right: 1px solid black;
+        }
+
+        .details {
+            flex: 2;
+        }
+    `]
+})
+export class MouseTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/popover/tab/none-tab.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'none-tab',
+    template: `This key is unassigned and has no functionality.`,
+    styles:
+    [`
+        :host {
+            display: flex;
+            justify-content: center;
+            padding: 2rem 0;
+        }
+    `]
+})
+export class NoneTabComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}