Disable layer switcher actions on non-base layers

Closes #216
This commit is contained in:
Farkas József
2016-12-15 22:02:48 +01:00
parent d086eb3eea
commit c48e959ed8
6 changed files with 42 additions and 22 deletions

View File

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

View File

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

View File

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

View File

@@ -2,6 +2,10 @@
display: flex;
margin: 0 -5px;
&.no-base {
justify-content: center;
}
> span,
> select {
margin: 0 5px;

View File

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

View File

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