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