diff --git a/.gitignore b/.gitignore index 51496cb3..a4027376 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ typings build bundle css +.idea +*.iml diff --git a/index.html b/index.html index 37a2bfed..11f430ed 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,9 @@ Ultimate Hacking Keyboard Configurator - + + diff --git a/package.json b/package.json index 11f39db5..77eef134 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "handlebars": "^4.0.5", "jquery": "^2.2.2", "json-loader": "^0.5.4", + "ng2-select2": "0.3.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "select2": "^4.0.3", diff --git a/sass/style.scss b/sass/style.scss index ea58254b..baf0d6fc 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -46,6 +46,10 @@ z-index: 100000; } +.nav-tabs > li > a { + cursor: pointer; +} + .scancode--searchterm { color: lightgray; float: right; @@ -187,3 +191,11 @@ } } } + +.select2-results { + text-align: center; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered { + line-height: 26px !important; +} diff --git a/src/components/popover/tab/keymap-tab.component.scss b/src/components/popover/tab/keymap-tab.component.scss index 6c39434c..21797010 100644 --- a/src/components/popover/tab/keymap-tab.component.scss +++ b/src/components/popover/tab/keymap-tab.component.scss @@ -1,15 +1,18 @@ :host { display: flex; flex-direction: column; - margin-top: 2px; > div { display: flex; + margin-top: 2px; b { - padding-right: 10px; + display: flex; + align-items: center; + margin-right: 7px; } - select { + + select2 { flex: 1; } } diff --git a/src/components/popover/tab/keymap-tab.component.ts b/src/components/popover/tab/keymap-tab.component.ts index 2ab5138a..8a5f95b7 100644 --- a/src/components/popover/tab/keymap-tab.component.ts +++ b/src/components/popover/tab/keymap-tab.component.ts @@ -6,6 +6,9 @@ import {SvgKeyboardComponent} from '../../svg-keyboard.component'; import {KeyActionSaver} from '../key-action-saver'; import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction'; +import {OptionData} from 'ng2-select2/dist/select2'; +import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; + @Component({ moduleId: module.id, selector: 'keymap-tab', @@ -13,10 +16,7 @@ import {SwitchKeymapAction} from '../../../../config-serializer/config-items/Swi `
Switch to keymap: - +
@@ -28,11 +28,12 @@ import {SwitchKeymapAction} from '../../../../config-serializer/config-items/Swi
`, styles: [require('./keymap-tab.component.scss')], - directives: [SvgKeyboardComponent] + directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES] }) export class KeymapTabComponent implements OnInit, KeyActionSaver { private keymaps: Keymap[]; + private keymapOptions: Array = []; private selectedKeymapIndex: number; constructor(private uhkConfigurationService: UhkConfigurationService) { @@ -42,6 +43,22 @@ export class KeymapTabComponent implements OnInit, KeyActionSaver { ngOnInit() { this.keymaps = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements; + + this.keymapOptions.push({ + id: '-1', + text: 'Switch to keymap' + }); + + this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function(keymap: Keymap): OptionData { + return { + id: keymap.id.toString(), + text: keymap.name + }; + })); + } + + onChange(event) { + this.selectedKeymapIndex = parseInt(event.value, 10); } keyActionValid(): boolean { @@ -56,5 +73,4 @@ export class KeymapTabComponent implements OnInit, KeyActionSaver { keymapAction.keymapId = this.keymaps[this.selectedKeymapIndex].id; return keymapAction; } - } diff --git a/src/components/popover/tab/keypress-tab.component.scss b/src/components/popover/tab/keypress-tab.component.scss index 0318d526..36863e60 100644 --- a/src/components/popover/tab/keypress-tab.component.scss +++ b/src/components/popover/tab/keypress-tab.component.scss @@ -8,6 +8,8 @@ b { margin-right: 0.6em; + align-items: center; + display: flex; } .secondary-role { diff --git a/src/components/popover/tab/keypress-tab.component.ts b/src/components/popover/tab/keypress-tab.component.ts index ea97e2b9..59707c1b 100644 --- a/src/components/popover/tab/keypress-tab.component.ts +++ b/src/components/popover/tab/keypress-tab.component.ts @@ -10,6 +10,9 @@ import { KeyActionSaver } from '../key-action-saver'; import {IconComponent} from '../widgets/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', @@ -17,13 +20,7 @@ import {IconComponent} from '../widgets/icon.component'; `
Scancode: - +
@@ -43,29 +40,12 @@ import {IconComponent} from '../widgets/icon.component';
Long press action: - +
`, styles: [require('./keypress-tab.component.scss')], - directives: [CaptureKeystrokeButtonComponent, IconComponent] + directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES] }) export class KeypressTabComponent implements OnInit, KeyActionSaver { private leftModifiers: string[]; @@ -74,15 +54,14 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver { private leftModifierSelects: boolean[]; private rightModifierSelects: boolean[]; - private scancodeGroups: { - groupName: string; - groupValues: any[]; - }[]; + private scanCodeGroups: Array; + private longPressGroups: Array; constructor() { this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt']; this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt']; - this.scancodeGroups = require('json!./scancodes.json'); + this.scanCodeGroups = require('json!./scancodes.json'); + this.longPressGroups = require('json!./longPress.json'); } ngOnInit() { } @@ -98,4 +77,22 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver { toKeyAction(): KeyAction { return undefined; } + + scanCodeTemplateResult: Function = (state: any) => { + if (!state.id) { + return state.text; + } + + if (state.additional && state.additional.explanation) { + return jQuery( + '' + + state.text + + ' ' + + state.additional.explanation + + '' + ); + } else { + return jQuery('' + state.text + ''); + } + } } diff --git a/src/components/popover/tab/layer-tab.component.scss b/src/components/popover/tab/layer-tab.component.scss index f57f678b..e885e076 100644 --- a/src/components/popover/tab/layer-tab.component.scss +++ b/src/components/popover/tab/layer-tab.component.scss @@ -1,7 +1,11 @@ :host { display: flex; + margin: 0 -5px; - span { + > span, + > select2 { margin: 0 5px; + display: flex; + align-items: center; } } diff --git a/src/components/popover/tab/layer-tab.component.ts b/src/components/popover/tab/layer-tab.component.ts index e213f780..01a9c92a 100644 --- a/src/components/popover/tab/layer-tab.component.ts +++ b/src/components/popover/tab/layer-tab.component.ts @@ -1,33 +1,59 @@ import { Component, OnInit } from '@angular/core'; +import {NgSwitch, NgSwitchWhen, NgSwitchDefault } from '@angular/common'; + import { LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/SwitchLayerAction'; import { KeyActionSaver } from '../key-action-saver'; +import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; +import {OptionData} from 'ng2-select2/dist/select2'; + @Component({ moduleId: module.id, selector: 'layer-tab', template: ` - + the - - - layer by holding this key. + + + + `, - styles: [require('./layer-tab.component.scss')] + styles: [require('./layer-tab.component.scss')], + directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchWhen, NgSwitchDefault] }) export class LayerTabComponent implements OnInit, KeyActionSaver { private toggle: boolean; private layer: LayerName; + private toggleData: Array = [ + { + id: 'false', + text: 'Activate' + }, + { + id: 'true', + text: 'Toggle' + } + ]; + + private layerData: Array = [ + { + id: '0', + text: 'Mod' + }, + { + id: '1', + text: 'Fn' + }, + { + id: '2', + text: 'Mouse' + } + ]; + constructor() { this.toggle = false; this.layer = LayerName.mod; @@ -46,4 +72,11 @@ export class LayerTabComponent implements OnInit, KeyActionSaver { return keyAction; } + private toggleChanged(event) { + this.toggle = event.value; + } + + private layerChanged(event) { + this.layer = event.value; + } } diff --git a/src/components/popover/tab/longPress.json b/src/components/popover/tab/longPress.json new file mode 100644 index 00000000..c405f5b1 --- /dev/null +++ b/src/components/popover/tab/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" + } + ] + } +] diff --git a/src/components/popover/tab/macro-tab.component.scss b/src/components/popover/tab/macro-tab.component.scss index 1f663b4c..94a91b20 100644 --- a/src/components/popover/tab/macro-tab.component.scss +++ b/src/components/popover/tab/macro-tab.component.scss @@ -7,10 +7,12 @@ margin-top: 2px; b { + display: flex; + align-items: center; margin-right: 7px; } - select { + select2 { flex: 1; } } diff --git a/src/components/popover/tab/macro-tab.component.ts b/src/components/popover/tab/macro-tab.component.ts index a82c0552..a53b4dbc 100644 --- a/src/components/popover/tab/macro-tab.component.ts +++ b/src/components/popover/tab/macro-tab.component.ts @@ -7,17 +7,16 @@ import { PlayMacroAction } from '../../../../config-serializer/config-items/Play import { KeyActionSaver } from '../key-action-saver'; import { MacroItemComponent } from './macro-item.component'; +import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; +import {OptionData} from 'ng2-select2/dist/select2'; + @Component({ moduleId: module.id, selector: 'macro-tab', - template: - ` + template: `
Play macro: - +