Structural refactoring (#68)

* Moved html in scss to separate files
* Moved components to designated folders
* Moved logic from html to ts

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

@@ -0,0 +1,25 @@
+<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
+    <b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
+    <select2 [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
+    <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 class="long-press-container">
+    <b class="setting-label" style="position:relative;">Long press action:</b>
+    <select2 [data]="longPressGroups" [width]="140"></select2>
+    <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
+</div>

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

@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    flex-direction: column;
+
+    .long-press-container {
+        display: flex;
+        margin-top: 3rem;
+
+        b {
+            margin-right: 0.6em;
+            align-items: center;
+            display: flex;
+        }
+
+        .secondary-role {
+            width: 135px;
+        }
+
+        icon {
+            margin-left: 0.6em;
+        }
+    }
+}

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

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+
+import { CaptureKeystrokeButtonComponent } from '../../widgets/capture-keystroke/capture-keystroke-button.component';
+
+import { KeyAction } from '../../../../../config-serializer/config-items/KeyAction';
+import { KeystrokeAction } from '../../../../../config-serializer/config-items/KeystrokeAction';
+import { KeyActionSaver } from '../../key-action-saver';
+
+import {IconComponent} from '../../widgets/icon/icon.component';
+
+import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
+import {OptionData} from 'ng2-select2/dist/select2';
+
+@Component({
+    moduleId: module.id,
+    selector: 'keypress-tab',
+    template: require('./keypress-tab.component.html'),
+    styles: [require('./keypress-tab.component.scss')],
+    directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
+})
+export class KeypressTabComponent implements OnInit, KeyActionSaver {
+    private leftModifiers: string[];
+    private rightModifiers: string[];
+
+    private leftModifierSelects: boolean[];
+    private rightModifierSelects: boolean[];
+
+    private scanCodeGroups: Array<OptionData>;
+    private longPressGroups: Array<OptionData>;
+
+    constructor() {
+        this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
+        this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
+        this.scanCodeGroups = require('json!./scancodes.json');
+        this.longPressGroups = require('json!./longPress.json');
+    }
+
+    ngOnInit() { }
+
+    getKeyAction(): KeystrokeAction {
+        return undefined;
+    }
+
+    keyActionValid(): boolean {
+        return false;
+    }
+
+    toKeyAction(): KeyAction {
+        return undefined;
+    }
+
+    scanCodeTemplateResult: Function = (state: any) => {
+        if (!state.id) {
+            return state.text;
+        }
+
+        if (state.additional && state.additional.explanation) {
+            return jQuery(
+                '<span class="select2-item">'
+                + state.text
+                + '<span class="scancode--searchterm"> '
+                + state.additional.explanation
+                + '</span></span>'
+            );
+        } else {
+            return jQuery('<span class="select2-item">' + state.text + '</span>');
+        }
+    }
+}

src/components/popover/tab/keypress/longPress.json

@@ -0,0 +1,60 @@
+[
+    {
+        "id": "none",
+        "text": "None"
+    },
+    {
+        "text": "Modifiers",
+        "children": [
+            {
+                "id": "LShift",
+                "text": "LShift"
+            },
+            {
+                "id": "LCtrl",
+                "text": "LCtrl"
+            },
+            {
+                "id": "LSuper",
+                "text": "LSuper"
+            },
+            {
+                "id": "LAlt",
+                "text": "LAlt"
+            },
+            {
+                "id": "RShift",
+                "text": "RShift"
+            },
+            {
+                "id": "RCtrl",
+                "text": "RCtrl"
+            },
+            {
+                "id": "RSuper",
+                "text": "RSuper"
+            },
+            {
+                "id": "RAlt",
+                "text": "RAlt"
+            }
+        ]
+    },
+    {
+        "text": "Layer switcher",
+        "children": [
+            {
+                "id": "Mod",
+                "text": "Mod"
+            },
+            {
+                "id": "Mouse",
+                "text": "Mouse"
+            },
+            {
+                "id": "Fn",
+                "text": "Fn"
+            }
+        ]
+    }
+]