From 15df8d71299e0547d953874d1a8d21e9147a396f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B3bert=20Kiss?= Date: Mon, 2 Jul 2018 23:44:39 +0200 Subject: [PATCH] WIP feat: replace ng2-select2 => ngx-select-ex (#706) * feat: replace ng2-select2 => ngx-select-ex * feat: style the ngrx-select * feat: replace secondary role select2 * feat: replace Select2OptionData => SelectOptionData * feat: replace select2 => ngx-select in macro-tab component * feat: replace select2 => ngx-select in keymap-tab component * feat: fix styles * chore: remove select2 from dependencies * fix: macro editor overflow * fix: set the same font size for the toggle button * fix: overflow * chore: use @ert78gb/ngx-select-ex version of ngx-select-ex --- package-lock.json | 2 +- packages/uhk-web/.angular-cli.json | 1 - packages/uhk-web/package-lock.json | 51 +++------------ packages/uhk-web/package.json | 3 +- .../macro/item/macro-item.component.html | 15 +++-- .../macro/item/macro-item.component.scss | 2 +- .../macro/item/macro-item.component.ts | 13 ++++ .../components/popover/popover.component.scss | 17 ----- .../tab/keymap/keymap-tab.component.html | 23 +++++-- .../tab/keymap/keymap-tab.component.scss | 2 +- .../tab/keymap/keymap-tab.component.ts | 13 ++-- .../tab/keypress/keypress-tab.component.html | 57 +++++++++++++---- .../tab/keypress/keypress-tab.component.scss | 10 +++ .../tab/keypress/keypress-tab.component.ts | 64 ++++--------------- .../tab/macro/macro-tab.component.html | 20 +++++- .../tab/macro/macro-tab.component.scss | 2 +- .../popover/tab/macro/macro-tab.component.ts | 13 ++-- .../directives/tooltip/tooltip.directive.ts | 1 + .../src/app/models/select-option-data.ts | 7 ++ packages/uhk-web/src/app/shared.module.ts | 4 +- packages/uhk-web/src/styles.scss | 29 +-------- .../uhk-web/src/styles/_ngx-select-ex.scss | 40 ++++++++++++ packages/uhk-web/webpack.config.js | 1 - 23 files changed, 200 insertions(+), 190 deletions(-) create mode 100644 packages/uhk-web/src/app/models/select-option-data.ts create mode 100644 packages/uhk-web/src/styles/_ngx-select-ex.scss diff --git a/package-lock.json b/package-lock.json index eb4cc5d2..2e948889 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "uhk-agent", - "version": "1.2.2", + "version": "1.2.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/uhk-web/.angular-cli.json b/packages/uhk-web/.angular-cli.json index 28feeaa2..a95774b9 100644 --- a/packages/uhk-web/.angular-cli.json +++ b/packages/uhk-web/.angular-cli.json @@ -26,7 +26,6 @@ ], "scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js", - "../node_modules/select2/dist/js/select2.full.js", "../node_modules/nouislider/distribute/nouislider.js" ], "environmentSource": "environments/environment.ts", diff --git a/packages/uhk-web/package-lock.json b/packages/uhk-web/package-lock.json index 480086bf..86cdc6e7 100644 --- a/packages/uhk-web/package-lock.json +++ b/packages/uhk-web/package-lock.json @@ -1154,6 +1154,14 @@ "tslib": "1.9.0" } }, + "@ert78gb/ngx-select-ex": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.6.0.tgz", + "integrity": "sha512-bR6uL7T/wxDUEhlAA90QcclMawEYzWAjk1Ra8SAYlLv15QCRU8WKZM+WSsdYKgseCDnmYTf/9eXDZQI/DsM0eQ==", + "requires": { + "tslib": "1.9.0" + } + }, "@ngrx/effects": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-4.0.5.tgz", @@ -1270,14 +1278,6 @@ "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=" }, - "@types/select2": { - "version": "4.0.44", - "resolved": "https://registry.npmjs.org/@types/select2/-/select2-4.0.44.tgz", - "integrity": "sha512-aunlkCCVG3uQZns+uAvxmYlWwvv8DuVLS+rKN9Az4ENylcIvwNHDfg7oJPeGlSYSZ9vacHQ91HoRGWnhZo7jHQ==", - "requires": { - "@types/jquery": "3.2.9" - } - }, "@types/selenium-webdriver": { "version": "2.53.43", "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz", @@ -1377,11 +1377,6 @@ "repeat-string": "1.6.1" } }, - "almond": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/almond/-/almond-0.3.3.tgz", - "integrity": "sha1-oOfJWsdiTWQXtElLHmi/9pMWiiA=" - }, "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", @@ -5758,11 +5753,6 @@ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz", "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=" }, - "jquery-mousewheel": { - "version": "3.1.13", - "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz", - "integrity": "sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU=" - }, "js-base64": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz", @@ -6509,22 +6499,6 @@ "resolved": "https://registry.npmjs.org/ng2-nouislider/-/ng2-nouislider-1.7.7.tgz", "integrity": "sha1-uEH0sxPIycinY8gPOlnVqkw6cMg=" }, - "ng2-select2": { - "version": "1.0.0-beta.10", - "resolved": "https://registry.npmjs.org/ng2-select2/-/ng2-select2-1.0.0-beta.10.tgz", - "integrity": "sha1-kIsLip+M0Gc287yhax41ofaWoUU=", - "requires": { - "@types/jquery": "2.0.49", - "@types/select2": "4.0.44" - }, - "dependencies": { - "@types/jquery": { - "version": "2.0.49", - "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.49.tgz", - "integrity": "sha512-/9xLnYmohN/vD2gDnLS4cym8TUmrJu7DvZa/LELKzZjdPsvWVJiedsdu2SXNtb/DA7FGimqL2g0IoyhbNKLl8g==" - } - } - }, "ngrx-store-freeze": { "version": "0.1.9", "resolved": "https://registry.npmjs.org/ngrx-store-freeze/-/ngrx-store-freeze-0.1.9.tgz", @@ -8090,15 +8064,6 @@ "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=" }, - "select2": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/select2/-/select2-4.0.3.tgz", - "integrity": "sha1-IHcz/pHqy5yxoT8SRjQB9HJEng8=", - "requires": { - "almond": "0.3.3", - "jquery-mousewheel": "3.1.13" - } - }, "selenium-webdriver": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.0.1.tgz", diff --git a/packages/uhk-web/package.json b/packages/uhk-web/package.json index ffdba520..801b7cf9 100644 --- a/packages/uhk-web/package.json +++ b/packages/uhk-web/package.json @@ -61,15 +61,14 @@ "karma-jasmine-html-reporter": "0.2.2", "ng2-dragula": "1.5.0", "ng2-nouislider": "^1.7.7", - "ng2-select2": "1.0.0-beta.10", "ngx-clipboard": "10.0.0", + "@ert78gb/ngx-select-ex": "3.6.0", "ngrx-store-freeze": "0.1.9", "nouislider": "^11.1.0", "postcss-url": "^7.1.2", "protractor": "5.1.2", "reselect": "3.0.1", "rxjs": "5.5.8", - "select2": "4.0.3", "typescript": "2.6.2", "uhk-common": "1.0.0", "xml-loader": "1.2.1", diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.html b/packages/uhk-web/src/app/components/macro/item/macro-item.component.html index 5f07a25a..ca7f59fe 100644 --- a/packages/uhk-web/src/app/components/macro/item/macro-item.component.html +++ b/packages/uhk-web/src/app/components/macro/item/macro-item.component.html @@ -8,10 +8,11 @@
- - -
\ No newline at end of file + [@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'" + [style.overflow]="overflow"> + + + diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss b/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss index 7262b874..28808be5 100644 --- a/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss +++ b/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss @@ -1,7 +1,7 @@ @import '../../../../styles/variables'; :host { - overflow: hidden; + overflow: visible; display: block; &.macro-item:first-of-type { diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts b/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts index 08135470..8bd19416 100644 --- a/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts +++ b/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts @@ -45,6 +45,7 @@ export class MacroItemComponent implements OnInit, OnChanges { iconName: string; editing: boolean; newItem: boolean = false; + overflow = 'hidden'; constructor(private mapper: MapperService) { } @@ -53,6 +54,7 @@ export class MacroItemComponent implements OnInit, OnChanges { if (!this.macroAction) { this.editing = true; this.newItem = true; + this.overflow = 'visible'; } } @@ -65,6 +67,7 @@ export class MacroItemComponent implements OnInit, OnChanges { saveEditedAction(editedAction: MacroAction): void { this.macroAction = editedAction; this.editing = false; + this.overflow = 'hidden'; this.updateView(); this.save.emit(editedAction); } @@ -77,10 +80,12 @@ export class MacroItemComponent implements OnInit, OnChanges { this.editing = true; this.edit.emit(); + this.setOverflow('visible'); } cancelEdit(): void { this.editing = false; + this.overflow = 'hidden'; this.cancel.emit(); } @@ -202,4 +207,12 @@ export class MacroItemComponent implements OnInit, OnChanges { }); this.title += selectedButtonLabels.join(', '); } + + private setOverflow(value: string): void { + // tslint:disable: align + setTimeout(() => { + this.overflow = value; + }, 600); + // tslint:enable: align + } } diff --git a/packages/uhk-web/src/app/components/popover/popover.component.scss b/packages/uhk-web/src/app/components/popover/popover.component.scss index a67e0d54..9c5d100b 100644 --- a/packages/uhk-web/src/app/components/popover/popover.component.scss +++ b/packages/uhk-web/src/app/components/popover/popover.component.scss @@ -116,23 +116,6 @@ } } -.select2-item { - position: relative; - font-size: 1.5rem; - - &.keymap-name--wrapper { - padding-left: 50px; - } - - .layout-segment-code { - height: 2rem; - position: absolute; - left: 0; - top: 50%; - margin-top: -1rem; - } -} - .popover-action-form { margin-top: 4px; diff --git a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html index 1b522f01..1fb8b8f5 100644 --- a/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html +++ b/packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html @@ -4,12 +4,23 @@
Switch to keymap: - + + + + + {{ option.text }} + + {{ option.data.additional?.explanation}} + + + +
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}} + + + +
@@ -14,4 +30,4 @@
- \ 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())