105 lines
4.7 KiB
HTML
105 lines
4.7 KiB
HTML
<div class="scancode-options">
|
|
<b class="setting-label">Scancode:</b>
|
|
<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"
|
|
maxWidth="330"
|
|
title="<p>Looking for a non-US character? Just pick the character of the desired key according to the US layout.</p>
|
|
<p>Let's say you're a German user and want to map the Ö character. You can see that on US keyboards this is the semicolon key, so choose semicolon in this dropdown.</p>"
|
|
data-placement="bottom"></icon>
|
|
<capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
|
|
</div>
|
|
<div class="modifier-options">
|
|
<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; trackBy:modifiersTrackBy"
|
|
[class.btn-primary]="modifier.checked"
|
|
(click)="toggleModifier(modifier)"
|
|
>
|
|
{{ modifier.text }}
|
|
</button>
|
|
</div>
|
|
<div class="btn-group btn-group-sm modifiers__right">
|
|
<button type="button" class="btn btn-default"
|
|
*ngFor="let modifier of rightModifiers; trackBy:modifiersTrackBy"
|
|
[class.btn-primary]="modifier.checked"
|
|
(click)="toggleModifier(modifier)"
|
|
>
|
|
{{ modifier.text }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="long-press-container" *ngIf="secondaryRoleEnabled">
|
|
<b class="setting-label">Secondary role:</b>
|
|
<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"
|
|
maxWidth="620"
|
|
title="<p class='text-left'>The secondary role activates when another key gets pressed while holding this key.</p>
|
|
<p class='text-left'>Let's say that the scancode is Escape and the secondary role is Mouse. Then:</p>
|
|
<ul class='text-left'>
|
|
<li>Tap this key to trigger Escape. <i>(Primary role)</i></li>
|
|
<li>Hold this key and press another key to activate the relevant key of the Mouse layer. <i>(Secondary role)</i></li>
|
|
</ul>
|
|
<p class='text-left'>The secondary role can be any layer or modifier.</p>"
|
|
data-placement="bottom"></icon>
|
|
</div>
|
|
|
|
<div *ngIf="warningVisible" class="alert alert-warning remap-warning" role="alert">
|
|
You're about to remap a modifier key only on this layer. You probably want to remap it on all layers. If so, check
|
|
the <strong>Remap on all layers</strong> checkbox below.
|
|
</div>
|
|
|
|
<div class="disabled-state--text">
|
|
<i class="fa fa-info-circle"></i>
|
|
When a key is configured as layer switcher key, you can't assign other functions to it.
|
|
To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
|
|
</div>
|