uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: make double tap to hold layer optional per key (#662)

Browse Source 
* feat: make double tap to hold layer optional per key

* test: fix test serializer

* fix: remove "application start" text

* Add double-tap.svg

* Add closing dot at the end of the sentence.

* fead: add double-tap icon

* Bundle firmware version 8.3.0

* feat: 'layer-double-tap' feature flag

* feat: convert SwitchLayerMode to string enum
This commit is contained in:
Róbert Kiss
2018-06-07 22:11:41 +02:00
committed by László Monda
parent 81a83994ab
commit 4ae577f936
25 changed files with 1284 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/uhk-web/src/app/components/popover/popover.component.html
View File

@@ -55,6 +55,7 @@
<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"

3
packages/uhk-web/src/app/components/popover/popover.component.ts
View File

@@ -27,7 +27,7 @@ import {
SwitchLayerAction
} from 'uhk-common';
import { Tab } from './tab/tab';
import { Tab } from './tab';
import { AppState } from '../../store';
import { getKeymaps } from '../../store/reducers/user-configuration';
@@ -82,6 +82,7 @@ export class PopoverComponent implements OnChanges {
@Input() keyPosition: any;
@Input() wrapPosition: any;
@Input() visible: boolean;
@Input() allowLayerDoubleTap: boolean;
@Output() cancel = new EventEmitter<any>();
@Output() remap = new EventEmitter<KeyAction>();

44
packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html
View File

@@ -1,20 +1,32 @@
<ng-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">
<ng-template [ngSwitchCase]="true">layer by tapping this key.</ng-template>
<ng-template ngSwitchDefault>layer by holding this key.</ng-template>
</span>
<div>
<div>
<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">
<ng-template [ngSwitchCase]="'toggle'">layer by tapping this key.</ng-template>
<ng-template ngSwitchDefault>layer by holding this key.</ng-template>
</span>
</div>
<div *ngIf="toggle === 'active' && allowLayerDoubleTap">
<div class="checkbox">
<label>
<input type="checkbox"
[(ngModel)]="lockLayerWhenDoubleTapping"> Lock layer when double tapping this key.
</label>
</div>
</div>
</div>
</ng-template>
<ng-template [ngIf]="isNotBase">
<span> Layer switching is only possible from the base layer. </span>
</ng-template>
</ng-template>

49
packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts
View File

@@ -1,8 +1,10 @@
import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
import { KeyAction, LayerName, SwitchLayerAction } from 'uhk-common';
import { KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode } from 'uhk-common';
import { Tab } from '../tab';
export type toggleType = 'active' | 'toggle';
@Component({
selector: 'layer-tab',
templateUrl: './layer-tab.component.html',
@@ -11,16 +13,17 @@ import { Tab } from '../tab';
export class LayerTabComponent extends Tab implements OnChanges {
@Input() defaultKeyAction: KeyAction;
@Input() currentLayer: number;
@Input() allowLayerDoubleTap: boolean;
@HostBinding('class.no-base') isNotBase: boolean;
toggleData: { id: boolean, text: string }[] = [
toggleData: { id: toggleType, text: string }[] = [
{
id: false,
id: 'active',
text: 'Activate'
},
{
id: true,
id: 'toggle',
text: 'Toggle'
}
];
@@ -40,12 +43,13 @@ export class LayerTabComponent extends Tab implements OnChanges {
}
];
toggle: boolean;
toggle: toggleType;
layer: LayerName;
lockLayerWhenDoubleTapping: boolean;
constructor() {
super();
this.toggle = false;
this.toggle = 'active';
this.layer = LayerName.mod;
}
@@ -71,14 +75,39 @@ export class LayerTabComponent extends Tab implements OnChanges {
}
const switchLayerAction: SwitchLayerAction = <SwitchLayerAction>keyAction;
this.toggle = switchLayerAction.isLayerToggleable;
switch (switchLayerAction.switchLayerMode) {
case SwitchLayerMode.holdAndDoubleTapToggle: {
this.toggle = 'active';
this.lockLayerWhenDoubleTapping = true;
break;
}
case SwitchLayerMode.hold: {
this.toggle = 'active';
this.lockLayerWhenDoubleTapping = false;
break;
}
default: {
this.toggle = 'toggle';
this.lockLayerWhenDoubleTapping = false;
}
}
this.layer = switchLayerAction.layer;
return true;
}
toKeyAction(): SwitchLayerAction {
const keyAction = new SwitchLayerAction();
keyAction.isLayerToggleable = this.toggle;
if (this.toggle === 'toggle') {
keyAction.switchLayerMode = SwitchLayerMode.toggle;
} else if (!this.allowLayerDoubleTap || this.lockLayerWhenDoubleTapping) {
keyAction.switchLayerMode = SwitchLayerMode.holdAndDoubleTapToggle;
} else {
keyAction.switchLayerMode = SwitchLayerMode.hold;
}
keyAction.layer = this.layer;
if (!this.keyActionValid()) {
throw new Error('KeyAction is invalid!');
@@ -86,8 +115,8 @@ export class LayerTabComponent extends Tab implements OnChanges {
return keyAction;
}
toggleChanged(value: string) {
this.toggle = value === 'true';
toggleChanged(value: toggleType) {
this.toggle = value;
}
layerChanged(value: number) {