Select2 improvements (#92)

* Select2 options are now left aligned, alternative text is gray, layer tab have ordinary select
* Increased height of select2 dropdown

Resolves #84

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

@@ -8,14 +8,20 @@
     <b class="setting-label">Modifiers:</b>
     <div class="btn-toolbar modifiers">
         <div class="btn-group btn-group-sm modifiers__left">
-            <button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers; let index = index" [class.btn-primary]="leftModifierSelects[index]"
+            <button type="button" class="btn btn-default"
-                (click)="toggleModifier(false, index)">
+                    *ngFor="let modifier of leftModifiers; let index = index"
+                    [class.btn-primary]="leftModifierSelects[index]"
+                    (click)="toggleModifier(false, index)"
+            >
                 {{modifier}}
             </button>
         </div>
         <div class="btn-group btn-group-sm modifiers__right">
-            <button type="button" class="btn btn-default" *ngFor="let modifier of rightModifiers; let index = index" [class.btn-primary]="rightModifierSelects[index]"
+            <button type="button" class="btn btn-default"
-                (click)="toggleModifier(true, index)">
+                    *ngFor="let modifier of rightModifiers; let index = index"
+                    [class.btn-primary]="rightModifierSelects[index]"
+                    (click)="toggleModifier(true, index)"
+            >
                 {{modifier}}
             </button>
         </div>
@@ -23,8 +29,12 @@
 </div>
 <div class="long-press-container" *ngIf="longPressEnabled">
     <b class="setting-label">Long press action:</b>
-    <select2 #longPressSelect [data]="longPressGroups" [value]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
+    <select2 #longPressSelect
-        [width]="140"></select2>
+             [data]="longPressGroups"
+             [value]="selectedLongPressIndex.toString()"
+             (valueChanged)="onLongpressChange($event)"
+             [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.ts

@@ -110,10 +110,11 @@ export class KeypressTabComponent implements OnChanges, Tab {
         if (state.additional && state.additional.explanation) {
             return jQuery(
                 '<span class="select2-item">'
-                + state.text
+                    + '<span>' + state.text + '</span>'
-                + '<span class="scancode--searchterm"> '
+                    + '<span class="scancode--searchterm"> '
-                + state.additional.explanation
+                    + state.additional.explanation
-                + '</span></span>'
+                    + '</span>' +
+                '</span>'
             );
         } else {
             return jQuery('<span class="select2-item">' + state.text + '</span>');

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

@@ -159,9 +159,9 @@
             {
                 "id": "40",
                 "additional": {
-                    "explanation": "Enter"
+                    "explanation": "Return"
                 },
-                "text": "Return"
+                "text": "Enter"
             },
             {
                 "id": "41",
@@ -177,7 +177,7 @@
             },
             {
                 "id": "44",
-                "text": "Spacebar"
+                "text": "Space"
             }
         ]
     },
@@ -231,7 +231,7 @@
         ]
     },
     {
-        "text": "Functionkeys",
+        "text": "Function keys",
         "children": [
             {
                 "id": "58",
@@ -350,7 +350,7 @@
         ]
     },
     {
-        "text": "NumberPad",
+        "text": "Numpad",
         "children": [
             {
                 "id": "83",
@@ -503,7 +503,7 @@
         ]
     },
     {
-        "text": "MediaKeys",
+        "text": "Media Keys",
         "children": [
             {
                 "id": "127",

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

@@ -1,6 +1,14 @@
-<select2 #toggleSelect [data]="toggleData" [value]="toggle.toString()" (valueChanged)="toggleChanged($event)"></select2>
+<select (change)="toggleChanged($event.target.value)">
+    <option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
+        {{ item.text }}
+    </option>
+</select>
 <span>the</span>
-<select2 #layerSelect [data]="layerData" [value]="layer.toString()" (valueChanged)="layerChanged($event)"></select2>
+<select (change)="layerChanged($event.target.value)">
+    <option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
+        {{ item.text }}
+    </option>
+</select>
 <span [ngSwitch]="toggle">
      <template ngSwitchCase="true">layer by pressing this key.</template>
      <template ngSwitchDefault="false">layer by holding this key.</template>

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

@@ -3,9 +3,16 @@
     margin: 0 -5px;
 
     > span,
-    > select2 {
+    > select {
         margin: 0 5px;
         display: flex;
         align-items: center;
     }
 }
+
+select {
+    background-color: #fff;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 4px 20px 4px 8px;
+}

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

@@ -1,9 +1,7 @@
-import { Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 
 import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
 
-import { Select2Component, Select2OptionData } from 'ng2-select2/ng2-select2';
-
 import { Tab } from '../tab';
 
 @Component({
@@ -13,39 +11,35 @@ import { Tab } from '../tab';
 })
 export class LayerTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
-    @ViewChild('toggleSelect') toggleSelect2: Select2Component;
-    @ViewChild('layerSelect') layerSelect2: Select2Component;
 
-    private toggle: boolean;
+    toggleData: {id: boolean, text: string}[] = [
-    private layer: LayerName;
-
-    /* tslint:disable:no-unused-variable: They're used in the template */
-    private toggleData: Array<Select2OptionData> = [
         {
-            id: 'false',
+            id: false,
             text: 'Activate'
         },
         {
-            id: 'true',
+            id: true,
             text: 'Toggle'
         }
     ];
 
-    private layerData: Array<Select2OptionData> = [
+    layerData: {id: number, text: string}[] = [
         {
-            id: '0',
+            id: 0,
             text: 'Mod'
         },
         {
-            id: '1',
+            id: 1,
             text: 'Fn'
         },
         {
-            id: '2',
+            id: 2,
             text: 'Mouse'
         }
     ];
-    /* tslint:enable:no-unused-variable */
+
+    private toggle: boolean;
+    private layer: LayerName;
 
     constructor() {
         this.toggle = false;
@@ -64,6 +58,7 @@ export class LayerTabComponent implements OnChanges, Tab {
         if (!(keyAction instanceof SwitchLayerAction)) {
             return false;
         }
+
         let switchLayerAction: SwitchLayerAction = <SwitchLayerAction>keyAction;
         this.toggle = switchLayerAction.isLayerToggleable;
         this.layer = switchLayerAction.layer;
@@ -77,17 +72,11 @@ export class LayerTabComponent implements OnChanges, Tab {
         return keyAction;
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
+    toggleChanged(value: string) {
-    /* tslint:disable:no-unused-variable: This function is used in the template */
+        this.toggle = value === 'true';
-    private toggleChanged(event: any) {
-        /* tslint:enable:no-unused-variable */
-        this.toggle = event.value;
     }
 
-    // TODO: change to the correct type when the wrapper has added it.
+    layerChanged(value: number) {
-    /* tslint:disable:no-unused-variable: This function is used in the template  */
+        this.layer = +value;
-    private layerChanged(event: any) {
-        /* tslint:enable:no-unused-variable */
-        this.layer = +event.value;
     }
 }

src/main-app/main-app.component.scss

@@ -17,10 +17,20 @@ main-app {
 .select2 {
     &-container {
         z-index: 1100;
+
+        .scancode--searchterm {
+            text-align: right;
+            color: #b7b7b7;
+        }
+    }
+
+    &-item {
+        display: flex;
+        justify-content: space-between;
     }
 
     &-results {
-        text-align: center;
+        text-align: left;
     }
 }
 
@@ -28,6 +38,10 @@ main-app {
     cursor: pointer;
 }
 
+.select2-container--default .select2-dropdown--below .select2-results > .select2-results__options {
+    max-height: 300px;
+}
+
 /* GitHub ribbon */
 .github-fork-ribbon {
     background-color: #a00;