diff --git a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss
index bb37e4e0..412bdae3 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss
+++ b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss
@@ -16,7 +16,7 @@
margin-right: 7px;
}
- select2 {
+ ngx-select {
flex: 1;
}
}
diff --git a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.ts
index ba8bbf53..6ff2788e 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.ts
@@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
import { Keymap, KeyAction, SwitchKeymapAction } from 'uhk-common';
import { Tab } from '../tab';
+import { SelectOptionData } from '../../../../models/select-option-data';
@Component({
selector: 'keymap-tab',
@@ -14,7 +14,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() keymaps: Keymap[];
- keymapOptions: Array
;
+ keymapOptions: Array;
selectedKeymap: Keymap;
constructor() {
@@ -25,7 +25,7 @@ export class KeymapTabComponent extends Tab implements OnChanges {
ngOnChanges(changes: SimpleChanges) {
if (changes.keymaps) {
this.keymapOptions = this.keymaps
- .map((keymap: Keymap): Select2OptionData => {
+ .map((keymap: Keymap): SelectOptionData => {
return {
id: keymap.abbreviation,
text: keymap.name
@@ -40,12 +40,11 @@ export class KeymapTabComponent extends Tab implements OnChanges {
this.validAction.emit(true);
}
- // TODO: change to the correct type when the wrapper has added it.
- onChange(event: any) {
- if (event.value === '-1') {
+ onChange(event: string) {
+ if (event === '-1') {
this.selectedKeymap = undefined;
} else {
- this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event.value);
+ this.selectedKeymap = this.keymaps.find((keymap: Keymap) => keymap.abbreviation === event);
}
}
diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
index 184a875e..701b0924 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
@@ -1,12 +1,27 @@
Scancode:
-
+
+
+
+
+
+ {{ option.text }}
+
+ {{ option.data.additional?.explanation}}
+
+
+
+
+
+
Secondary role:
-
+
+
+
+
+
+ {{ option.text }}
+
+ {{ option.data.additional?.explanation}}
+
+
+
+
+
+
;
- secondaryRoleGroups: Array;
- options: Select2Options;
+ scanCodeGroups: Array;
+ secondaryRoleGroups: Array;
- selectedScancodeOption: Select2OptionData;
+ selectedScancodeOption: SelectOptionData;
selectedSecondaryRoleIndex: number;
constructor(private mapper: MapperService) {
@@ -41,18 +40,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
this.rightModifierSelects = Array(this.rightModifiers.length).fill(false);
this.selectedScancodeOption = this.scanCodeGroups[0];
this.selectedSecondaryRoleIndex = -1;
- this.options = {
- templateResult: this.scanCodeTemplateResult,
- matcher: (term: string, text: string, data: Select2OptionData) => {
- let found = text.toUpperCase().indexOf(term.toUpperCase()) > -1;
-
- if (!found && data.additional && data.additional.explanation) {
- found = data.additional.explanation.toUpperCase().indexOf(term.toUpperCase()) > -1;
- }
-
- return found;
- }
- };
}
ngOnChanges() {
@@ -134,25 +121,6 @@ export class KeypressTabComponent extends Tab implements OnChanges {
}
}
- scanCodeTemplateResult: Select2TemplateFunction = (state: Select2OptionData): JQuery | string => {
- if (!state.id) {
- return state.text;
- }
-
- if (state.additional && state.additional.explanation) {
- return jQuery(
- ''
- + '' + state.text + ''
- + ' '
- + state.additional.explanation
- + '' +
- ''
- );
- } else {
- return jQuery('' + state.text + '');
- }
- }
-
toggleModifier(right: boolean, index: number) {
const modifierSelects: boolean[] = right ? this.rightModifierSelects : this.leftModifierSelects;
modifierSelects[index] = !modifierSelects[index];
@@ -160,24 +128,20 @@ export class KeypressTabComponent extends Tab implements OnChanges {
this.validAction.emit(this.keyActionValid());
}
- onSecondaryRoleChange(event: { value: string }) {
- this.selectedSecondaryRoleIndex = +event.value;
+ onSecondaryRoleChange(id: string) {
+ this.selectedSecondaryRoleIndex = +id;
}
- onScancodeChange(event: { value: string }) {
- const id: string = event.value;
-
- // ng2-select2 should provide the selectedOption in an upcoming release
- // TODO: change this when it has become available
+ onScancodeChange(id: string) {
this.selectedScancodeOption = this.findScancodeOptionById(id);
this.validAction.emit(this.keyActionValid());
}
- private findScancodeOptionBy(predicate: (option: Select2OptionData) => boolean): Select2OptionData {
- let selectedOption: Select2OptionData;
+ private findScancodeOptionBy(predicate: (option: SelectOptionData) => boolean): SelectOptionData {
+ let selectedOption: SelectOptionData;
- const scanCodeGroups: Select2OptionData[] = [...this.scanCodeGroups];
+ const scanCodeGroups: SelectOptionData[] = [...this.scanCodeGroups];
while (scanCodeGroups.length > 0) {
const scanCodeGroup = scanCodeGroups.shift();
if (predicate(scanCodeGroup)) {
@@ -192,14 +156,14 @@ export class KeypressTabComponent extends Tab implements OnChanges {
return selectedOption;
}
- private findScancodeOptionById(id: string): Select2OptionData {
+ private findScancodeOptionById(id: string): SelectOptionData {
return this.findScancodeOptionBy(option => option.id === id);
}
- private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): Select2OptionData {
+ private findScancodeOptionByScancode(scancode: number, type: KeystrokeType): SelectOptionData {
const typeToFind: string =
(type === KeystrokeType.shortMedia || type === KeystrokeType.longMedia) ? 'media' : KeystrokeType[type];
- return this.findScancodeOptionBy((option: Select2OptionData) => {
+ return this.findScancodeOptionBy((option: SelectOptionData) => {
const additional = option.additional;
if (additional && additional.scancode === scancode && additional.type === typeToFind) {
return true;
@@ -211,7 +175,7 @@ export class KeypressTabComponent extends Tab implements OnChanges {
});
}
- private toScancodeTypePair(option: Select2OptionData): [number, string] {
+ private toScancodeTypePair(option: SelectOptionData): [number, string] {
let scanCode: number;
let type: string;
if (option.additional) {
diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
index c669cfd1..77266d6f 100644
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
@@ -5,7 +5,23 @@
Please note that macro playback is not implemented yet. You can bind macros, but they won't have any effect until firmware support is implemented. We're working on this.
Play macro:
-
+
+
+
+
+ {{ option.text }}
+
+ {{ option.data.additional?.explanation}}
+
+
+
+
-
\ No newline at end of file
+
diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss
index 36023e0f..df8e0d17 100644
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss
+++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss
@@ -16,7 +16,7 @@
margin-right: 7px;
}
- select2 {
+ ngx-select {
flex: 1;
}
}
diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
index d2343f6e..d3f58c74 100644
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
@@ -1,13 +1,13 @@
import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
-import { Select2OptionData } from 'ng2-select2/ng2-select2';
import { KeyAction, Macro, PlayMacroAction } from 'uhk-common';
import { Tab } from '../tab';
-import { AppState } from '../../../../store/index';
+import { AppState } from '../../../../store';
import { getMacros } from '../../../../store/reducers/user-configuration';
+import { SelectOptionData } from '../../../../models/select-option-data';
@Component({
selector: 'macro-tab',
@@ -18,7 +18,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
@Input() defaultKeyAction: KeyAction;
macros: Macro[];
- macroOptions: Array;
+ macroOptions: Array;
selectedMacroIndex: number;
private subscription: Subscription;
@@ -31,7 +31,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
}
ngOnInit() {
- this.macroOptions = this.macros.map(function (macro: Macro, index: number): Select2OptionData {
+ this.macroOptions = this.macros.map(function (macro: Macro, index: number): SelectOptionData {
return {
id: index.toString(),
text: macro.name
@@ -44,9 +44,8 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
this.validAction.emit(true);
}
- // TODO: change to the correct type when the wrapper has added it.
- onChange(event: any) {
- this.selectedMacroIndex = +event.value;
+ onChange(id: string) {
+ this.selectedMacroIndex = +id;
}
keyActionValid(): boolean {
diff --git a/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts b/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
index 42438353..f2ac5122 100644
--- a/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
+++ b/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
@@ -1,3 +1,4 @@
+///
import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
diff --git a/packages/uhk-web/src/app/models/select-option-data.ts b/packages/uhk-web/src/app/models/select-option-data.ts
new file mode 100644
index 00000000..e0552731
--- /dev/null
+++ b/packages/uhk-web/src/app/models/select-option-data.ts
@@ -0,0 +1,7 @@
+export interface SelectOptionData {
+ id: string;
+ text: string;
+ disabled?: boolean;
+ children?: Array;
+ additional?: any;
+}
diff --git a/packages/uhk-web/src/app/shared.module.ts b/packages/uhk-web/src/app/shared.module.ts
index ec2d9094..f92abccd 100644
--- a/packages/uhk-web/src/app/shared.module.ts
+++ b/packages/uhk-web/src/app/shared.module.ts
@@ -6,7 +6,7 @@ import { NotifierModule } from 'angular-notifier';
import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
import { DragulaModule } from 'ng2-dragula/ng2-dragula';
-import { Select2Module } from 'ng2-select2/ng2-select2';
+import { NgxSelectModule } from '@ert78gb/ngx-select-ex';
import { NouisliderModule } from 'ng2-nouislider';
import { ClipboardModule } from 'ngx-clipboard';
@@ -191,7 +191,7 @@ import { AutoGrowInputComponent } from './components/auto-grow-input';
FormsModule,
DragulaModule,
routing,
- Select2Module,
+ NgxSelectModule,
NouisliderModule,
NotifierModule.withConfig(angularNotifierConfig),
ConfirmationPopoverModule.forRoot({
diff --git a/packages/uhk-web/src/styles.scss b/packages/uhk-web/src/styles.scss
index c20df93c..a0684a4a 100644
--- a/packages/uhk-web/src/styles.scss
+++ b/packages/uhk-web/src/styles.scss
@@ -5,6 +5,7 @@
@import './styles/tooltip';
@import './styles/uhk-icons/uhk-icon';
@import './styles/side-menu';
+@import './styles/ngx-select-ex';
html, body {
width: 100%;
@@ -25,10 +26,6 @@ html, body {
transform: rotate(90deg); // svg not aligned properly
}
-.select2-container--default .select2-selection--single .select2-selection__rendered {
- line-height: 26px;
-}
-
.main-content {
height: 100%;
}
@@ -39,34 +36,10 @@ html, body {
min-height: 100%;
}
-.select2 {
- &-container {
- z-index: 1100;
-
- .scancode--searchterm {
- text-align: right;
- color: #b7b7b7;
- }
- }
-
- &-item {
- display: flex;
- justify-content: space-between;
- }
-
- &-results {
- text-align: left;
- }
-}
-
.nav-pills > li > a {
cursor: pointer;
}
-.select2-container--default .select2-dropdown--below .select2-results > .select2-results__options {
- max-height: 300px;
-}
-
ul.btn-list {
& li {
margin-top: 0.5em;
diff --git a/packages/uhk-web/src/styles/_ngx-select-ex.scss b/packages/uhk-web/src/styles/_ngx-select-ex.scss
new file mode 100644
index 00000000..1572db53
--- /dev/null
+++ b/packages/uhk-web/src/styles/_ngx-select-ex.scss
@@ -0,0 +1,40 @@
+ngx-select,
+.ngx-select {
+ .ngx-select__toggle {
+ font-size: 14px;
+ }
+
+ .dropdown-header {
+ font-weight: bold;
+ font-size: 1em;
+ color: black;
+ padding-left: 6px;
+ }
+
+ .dropdown-divider {
+ display: none;
+ }
+
+ a {
+ &.ngx-select__item {
+ padding-right: 6px;
+ padding-left: 6px;
+ }
+
+ &.ngx-select__item_active {
+ background-color: #dddddd;
+ color: black;
+ }
+ }
+
+ .indent-dropdown-item {
+ padding-left: 8px;
+ display: flex;
+ justify-content: space-between;
+
+ .scancode--searchterm {
+ text-align: right;
+ color: #b7b7b7;
+ }
+ }
+}
diff --git a/packages/uhk-web/webpack.config.js b/packages/uhk-web/webpack.config.js
index 4f0f61e0..669c6cd3 100644
--- a/packages/uhk-web/webpack.config.js
+++ b/packages/uhk-web/webpack.config.js
@@ -416,7 +416,6 @@ module.exports = {
"filename": "scripts.bundle.js",
"scripts": [
path.join(process.cwd(), "node_modules/bootstrap/dist/js/bootstrap.js"),
- path.join(process.cwd(), "node_modules/select2/dist/js/select2.full.js"),
// path.join(process.cwd(), "node_modules/nouislider/distribute/nouislider.js")
],
"basePath": path.resolve(process.cwd())