@@ -48,7 +48,7 @@
|
||||
</div>
|
||||
<div [ngSwitch]="activeTab">
|
||||
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
|
||||
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
|
||||
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction" [currentLayer]="currentLayer"></layer-tab>
|
||||
<mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
|
||||
<macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
|
||||
<keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>
|
||||
|
||||
@@ -67,6 +67,7 @@ enum TabName {
|
||||
export class PopoverComponent implements OnChanges {
|
||||
@Input() defaultKeyAction: KeyAction;
|
||||
@Input() currentKeymap: Keymap;
|
||||
@Input() currentLayer: number;
|
||||
@Input() keyPosition: ClientRect;
|
||||
@Input() wrapPosition: ClientRect;
|
||||
@Input() visible: boolean;
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
<select (change)="toggleChanged($event.target.value)">
|
||||
<option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</select>
|
||||
<span>the</span>
|
||||
<select (change)="layerChanged($event.target.value)">
|
||||
<option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</select>
|
||||
<span [ngSwitch]="toggle">
|
||||
<template ngSwitchCase="true">layer by pressing this key.</template>
|
||||
<template ngSwitchDefault="false">layer by holding this key.</template>
|
||||
</span>
|
||||
<template [ngIf]="!isNotBase">
|
||||
<select (change)="toggleChanged($event.target.value)">
|
||||
<option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</select>
|
||||
<span>the</span>
|
||||
<select (change)="layerChanged($event.target.value)">
|
||||
<option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
|
||||
{{ item.text }}
|
||||
</option>
|
||||
</select>
|
||||
<span [ngSwitch]="toggle">
|
||||
<template ngSwitchCase="true">layer by pressing this key.</template>
|
||||
<template ngSwitchDefault="false">layer by holding this key.</template>
|
||||
</span>
|
||||
</template>
|
||||
<template [ngIf]="isNotBase">
|
||||
<span> Layer switching is only possible from the base layer. </span>
|
||||
</template>
|
||||
@@ -2,6 +2,10 @@
|
||||
display: flex;
|
||||
margin: 0 -5px;
|
||||
|
||||
&.no-base {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> span,
|
||||
> select {
|
||||
margin: 0 5px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||
|
||||
import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
|
||||
|
||||
@@ -11,8 +11,11 @@ import { Tab } from '../tab';
|
||||
})
|
||||
export class LayerTabComponent implements OnChanges, Tab {
|
||||
@Input() defaultKeyAction: KeyAction;
|
||||
@Input() currentLayer: number;
|
||||
|
||||
toggleData: {id: boolean, text: string}[] = [
|
||||
@HostBinding('class.no-base') isNotBase: boolean;
|
||||
|
||||
toggleData: { id: boolean, text: string }[] = [
|
||||
{
|
||||
id: false,
|
||||
text: 'Activate'
|
||||
@@ -23,7 +26,7 @@ export class LayerTabComponent implements OnChanges, Tab {
|
||||
}
|
||||
];
|
||||
|
||||
layerData: {id: number, text: string}[] = [
|
||||
layerData: { id: number, text: string }[] = [
|
||||
{
|
||||
id: 0,
|
||||
text: 'Mod'
|
||||
@@ -46,8 +49,14 @@ export class LayerTabComponent implements OnChanges, Tab {
|
||||
this.layer = LayerName.mod;
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
this.fromKeyAction(this.defaultKeyAction);
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['defaultKeyAction']) {
|
||||
this.fromKeyAction(this.defaultKeyAction);
|
||||
}
|
||||
|
||||
if (changes['currentLayer']) {
|
||||
this.isNotBase = this.currentLayer > 0;
|
||||
}
|
||||
}
|
||||
|
||||
keyActionValid(): boolean {
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
[keybindAnimationEnabled]="keybindAnimationEnabled"
|
||||
(keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
|
||||
(keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"></keyboard-slider>
|
||||
<popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
|
||||
<popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
|
||||
[currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
|
||||
<div class="tooltip bottom"
|
||||
[class.in]="tooltipData.show"
|
||||
[style.top.px]="tooltipData.posTop"
|
||||
|
||||
Reference in New Issue
Block a user