uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP feat: replace ng2-select2 => ngx-select-ex (#706)

Browse Source 
* 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
This commit is contained in:
Róbert Kiss
2018-07-02 23:44:39 +02:00
committed by László Monda
parent cfc0af9655
commit 15df8d7129
23 changed files with 200 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "uhk-agent",
"version": "1.2.2",
"version": "1.2.5",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

1
packages/uhk-web/.angular-cli.json
View File

@@ -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",

51
packages/uhk-web/package-lock.json generated
View File

@@ -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",

3
packages/uhk-web/package.json
View File

@@ -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",

15
packages/uhk-web/src/app/components/macro/item/macro-item.component.html
View File

@@ -8,10 +8,11 @@
<icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
</div>
<div class="list-group-item macro-action-editor__container"
[@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'">
<macro-action-editor
[macroAction]="macroAction"
(cancel)="cancelEdit()"
(save)="saveEditedAction($event)">
</macro-action-editor>
</div>
[@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'"
[style.overflow]="overflow">
<macro-action-editor
[macroAction]="macroAction"
(cancel)="cancelEdit()"
(save)="saveEditedAction($event)">
</macro-action-editor>
</div>

2
packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
View File

@@ -1,7 +1,7 @@
@import '../../../../styles/variables';
:host {
overflow: hidden;
overflow: visible;
display: block;
&.macro-item:first-of-type {

13
packages/uhk-web/src/app/components/macro/item/macro-item.component.ts
View File

@@ -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
}
}

17
packages/uhk-web/src/app/components/popover/popover.component.scss
View File

@@ -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;

23
packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.html
View File

@@ -4,12 +4,23 @@
<ng-template [ngIf]="keymapOptions.length > 0">
<div>
<b>Switch to keymap:</b>
<select2
[data]="keymapOptions"
[value]="selectedKeymap?.abbreviation || -1"
(valueChanged)="onChange($event)"
[width]="'100%'"
></select2>
<ngx-select [items]="keymapOptions"
[ngModel]="selectedKeymap?.abbreviation || -1"
[autoActiveOnMouseEnter]="false"
size="small"
optionValueField="id"
optionTextField="text"
(select)="onChange($event)">
<ng-template ngx-select-option let-option>
<span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
<span>{{ option.text }}</span>
<span class="scancode--searchterm">
{{ option.data.additional?.explanation}}
</span>
</span>
</ng-template>
</ngx-select>
</div>
<div>
<div class="empty" *ngIf="!selectedKeymap?.abbreviation">

2
packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.scss
View File

@@ -16,7 +16,7 @@
margin-right: 7px;
}
select2 {
ngx-select {
flex: 1;
}
}

13
packages/uhk-web/src/app/components/popover/tab/keymap/keymap-tab.component.ts
View File

@@ -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<Select2OptionData>;
keymapOptions: Array<SelectOptionData>;
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);
}
}

57
packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
View File

@@ -1,12 +1,27 @@
<div class="scancode-options">
<b class="setting-label">Scancode:</b>
<select2
[data]="scanCodeGroups"
[value]="selectedScancodeOption.id"
(valueChanged)="onScancodeChange($event)"
[width]="200"
[options]="options"
></select2>
<div class="scancode-container">
<ngx-select [items]="scanCodeGroups"
[ngModel]="selectedScancodeOption.id"
[autoActiveOnMouseEnter]="false"
size="small"
optionValueField="id"
optionTextField="text"
optGroupLabelField="text"
optGroupOptionsField="children"
(select)="onScancodeChange($event)">
<ng-template ngx-select-option let-option>
<span [ngClass]="{'indent-dropdown-item':option.data.id !== '0'}">
<span>{{ option.text }}</span>
<span class="scancode--searchterm">
{{ option.data.additional?.explanation}}
</span>
</span>
</ng-template>
</ngx-select>
</div>
<icon name="question-circle"
data-toggle="tooltip"
html="true"
@@ -41,12 +56,28 @@
</div>
<div class="long-press-container" *ngIf="secondaryRoleEnabled">
<b class="setting-label">Secondary role:</b>
<select2 #secondaryRoleSelect
[data]="secondaryRoleGroups"
[value]="selectedSecondaryRoleIndex.toString()"
(valueChanged)="onSecondaryRoleChange($event)"
[width]="140"
></select2>
<div class="secondary-role-groups-container">
<ngx-select [items]="secondaryRoleGroups"
[ngModel]="selectedSecondaryRoleIndex.toString()"
[autoActiveOnMouseEnter]="false"
size="small"
optionValueField="id"
optionTextField="text"
optGroupLabelField="text"
optGroupOptionsField="children"
(select)="onSecondaryRoleChange($event)">
<ng-template ngx-select-option let-option>
<span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
<span>{{ option.text }}</span>
<span class="scancode--searchterm">
{{ option.data.additional?.explanation}}
</span>
</span>
</ng-template>
</ngx-select>
</div>
<icon name="question-circle"
data-toggle="tooltip"
html="true"

10
packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss
View File

@@ -79,4 +79,14 @@
display: block;
}
}
.scancode-container {
display: inline-block;
width: 200px;
}
.secondary-role-groups-container {
display: inline-block;
width: 140px;
}
}

64
packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
View File

@@ -1,9 +1,9 @@
import { Component, Input, OnChanges } from '@angular/core';
import { Select2OptionData, Select2TemplateFunction } from 'ng2-select2';
import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';
import { Tab } from '../tab';
import { MapperService } from '../../../../services/mapper.service';
import { SelectOptionData } from '../../../../models/select-option-data';
@Component({
selector: 'keypress-tab',
@@ -20,11 +20,10 @@ export class KeypressTabComponent extends Tab implements OnChanges {
leftModifierSelects: boolean[];
rightModifierSelects: boolean[];
scanCodeGroups: Array<Select2OptionData>;
secondaryRoleGroups: Array<Select2OptionData>;
options: Select2Options;
scanCodeGroups: Array<SelectOptionData>;
secondaryRoleGroups: Array<SelectOptionData>;
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(
'<span class="select2-item">'
+ '<span>' + state.text + '</span>'
+ '<span class="scancode--searchterm"> '
+ state.additional.explanation
+ '</span>' +
'</span>'
);
} else {
return jQuery('<span class="select2-item">' + state.text + '</span>');
}
}
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) {

20
packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
View File

@@ -5,7 +5,23 @@
<p><i>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.</i></p>
<div class="macro-selector">
<b> Play macro: </b>
<select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
<ngx-select [items]="macroOptions"
[ngModel]="macroOptions[selectedMacroIndex].id"
[autoActiveOnMouseEnter]="false"
size="small"
optionValueField="id"
optionTextField="text"
(select)="onChange($event)">
<ng-template ngx-select-option let-option>
<span [ngClass]="{'indent-dropdown-item':option.data.id !== '-1'}">
<span>{{ option.text }}</span>
<span class="scancode--searchterm">
{{ option.data.additional?.explanation}}
</span>
</span>
</ng-template>
</ngx-select>
</div>
<div class="macro-action-container">
<div class="list-group">
@@ -14,4 +30,4 @@
</macro-item>
</div>
</div>
</ng-template>
</ng-template>

2
packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.scss
View File

@@ -16,7 +16,7 @@
margin-right: 7px;
}
select2 {
ngx-select {
flex: 1;
}
}

13
packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
View File

@@ -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<Select2OptionData>;
macroOptions: Array<SelectOptionData>;
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 {

1
packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
View File

@@ -1,3 +1,4 @@
///<reference path="../../../../node_modules/@types/jquery/index.d.ts"/>
import { AfterContentInit, Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

7
packages/uhk-web/src/app/models/select-option-data.ts Normal file
View File

@@ -0,0 +1,7 @@
export interface SelectOptionData {
id: string;
text: string;
disabled?: boolean;
children?: Array<SelectOptionData>;
additional?: any;
}

4
packages/uhk-web/src/app/shared.module.ts
View File

@@ -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({

29
packages/uhk-web/src/styles.scss
View File

@@ -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;

40
packages/uhk-web/src/styles/_ngx-select-ex.scss Normal file
View File

@@ -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;
}
}
}

1
packages/uhk-web/webpack.config.js
View File

@@ -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())