118 lines
5.4 KiB
HTML
118 lines
5.4 KiB
HTML
<div class="popover"
|
|
#popover
|
|
[@popover]="animationState"
|
|
[ngClass]="{'leftArrow': leftArrow, 'rightArrow': rightArrow}"
|
|
[style.top.px]="topPosition"
|
|
[style.left.px]="leftPosition"
|
|
>
|
|
<div class="arrowCustom"></div>
|
|
<div class="popover-title menu-tabs">
|
|
<ul class="nav nav-tabs popover-menu">
|
|
<li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-keyboard-o"></i>
|
|
<span>Keypress</span>
|
|
</a>
|
|
</li>
|
|
<li #layer [class.active]="activeTab === tabName.Layer" (click)="selectTab(tabName.Layer)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-clone"></i>
|
|
<span>Layer</span>
|
|
</a>
|
|
</li>
|
|
<li #mouse [class.active]="activeTab === tabName.Mouse" (click)="selectTab(tabName.Mouse)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-mouse-pointer"></i>
|
|
<span>Mouse</span>
|
|
</a>
|
|
</li>
|
|
<li #macro [class.active]="activeTab === tabName.Macro" (click)="selectTab(tabName.Macro)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-play"></i>
|
|
<span>Macro</span>
|
|
</a>
|
|
</li>
|
|
<li #keymap [class.active]="activeTab === tabName.Keymap" (click)="selectTab(tabName.Keymap)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-keyboard-o"></i>
|
|
<span>Keymap</span>
|
|
</a>
|
|
</li>
|
|
<li #none [class.active]="activeTab === tabName.None" (click)="selectTab(tabName.None)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-ban"></i>
|
|
<span>None</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div [ngSwitch]="activeTab">
|
|
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content pr-10"
|
|
[defaultKeyAction]="defaultKeyAction"
|
|
[secondaryRoleEnabled]="true"
|
|
(validAction)="keyActionValid=$event"
|
|
></keypress-tab>
|
|
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
|
|
[defaultKeyAction]="defaultKeyAction"
|
|
[currentLayer]="currentLayer"
|
|
[allowLayerDoubleTap]="allowLayerDoubleTap"
|
|
(validAction)="keyActionValid=$event"
|
|
></layer-tab>
|
|
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
|
|
[defaultKeyAction]="defaultKeyAction"
|
|
(validAction)="keyActionValid=$event"
|
|
></mouse-tab>
|
|
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content"
|
|
[defaultKeyAction]="defaultKeyAction"
|
|
(validAction)="keyActionValid=$event"
|
|
></macro-tab>
|
|
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content"
|
|
[defaultKeyAction]="defaultKeyAction"
|
|
[keymaps]="keymaps$ | async"
|
|
(validAction)="keyActionValid=$event"
|
|
></keymap-tab>
|
|
<none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"
|
|
(validAction)="keyActionValid=$event"
|
|
></none-tab>
|
|
</div>
|
|
<div class="popover-action">
|
|
<form class="form-inline d-inline-block popover-action-form">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"
|
|
name="remapOnAllKeymap"
|
|
[(ngModel)]="remapInfo.remapOnAllKeymap"> Remap on all keymaps
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"
|
|
name="remapOnAllLayer"
|
|
[(ngModel)]="remapInfo.remapOnAllLayer"> Remap on all layers
|
|
</label>
|
|
</div>
|
|
<div class="d-inline-block">
|
|
<icon name="question-circle"
|
|
data-toggle="tooltip"
|
|
html="true"
|
|
maxWidth="525"
|
|
title="<ul class='no-indent text-left'>
|
|
<li><strong>Default behavior</strong>: Remap the key on the the current layer of the current keymap.</li>
|
|
<li><strong>Remap on all keymaps</strong>: Remap key on the current layer of all keymaps.</li>
|
|
<li><strong>Remap on all layers</strong>: Remap key on all layers of the current keymap.</li>
|
|
<li><strong>Remap on all keymaps + Remap on all layers</strong>: Remap key on all layers of all keymaps.</li>
|
|
</ul>"
|
|
data-placement="bottom"></icon>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="d-inline-block pull-right">
|
|
<button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel</button>
|
|
<button class="btn btn-sm btn-primary" [class.disabled]="!keyActionValid" type="button"
|
|
(click)="onRemapKey()"> Remap key
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>
|