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

feat: allow Layer Switcher secondary roles only on base layer (#790)

Browse Source
This commit is contained in:
Róbert Kiss
2018-09-21 00:20:46 +02:00
committed by László Monda
parent eb421e0681
commit aa243ac7b0
5 changed files with 114 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,11 +48,13 @@
</div>
<div [ngSwitch]="activeTab">
<keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content pr-10"
[defaultKeyAction]="defaultKeyAction"
[defaultKeyAction]="shadowKeyAction"
[secondaryRoleEnabled]="true"
[allowRemapOnAllKeymapWarning]="true"
[remapInfo]="remapInfo"
[showLayerSwitcherInSecondaryRoles]="currentLayer === 0"
(validAction)="keyActionValid=$event"
(keyActionChange)="keystrokeActionChange($event)"
></keypress-tab>
<layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
[defaultKeyAction]="defaultKeyAction"
@@ -87,10 +89,11 @@
</label>
</div>
<div class="checkbox">
<label>
<label [ngClass]="{ disabled: disableRemapOnAllLayer }">
<input type="checkbox"
name="remapOnAllLayer"
[(ngModel)]="remapInfo.remapOnAllLayer"
[disabled]="disableRemapOnAllLayer"
(ngModelChange)="remapInfoChange()"> Remap on all layers
</label>
</div>

5
packages/uhk-web/src/app/components/popover/popover.component.scss
View File

@@ -125,5 +125,10 @@
label {
margin-right: 5px;
&.disabled {
cursor: not-allowed;
color: #959595;
}
}
}

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

@@ -1,5 +1,6 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
@@ -24,6 +25,7 @@ import {
KeystrokeAction,
MouseAction,
PlayMacroAction,
SecondaryRoleAction,
SwitchKeymapAction,
SwitchLayerAction
} from 'uhk-common';
@@ -104,10 +106,13 @@ export class PopoverComponent implements OnChanges {
topPosition: number = 0;
leftPosition: number = 0;
animationState: string;
shadowKeyAction: KeyAction;
disableRemapOnAllLayer = false;
private readonly currentKeymap$ = new BehaviorSubject<Keymap>(undefined);
constructor(store: Store<AppState>) {
constructor(private store: Store<AppState>,
private cdRef: ChangeDetectorRef) {
this.animationState = 'closed';
this.keymaps$ = store.let(getKeymaps())
.combineLatest(this.currentKeymap$)
@@ -123,8 +128,10 @@ export class PopoverComponent implements OnChanges {
if (change['defaultKeyAction']) {
let tab: TabName;
this.disableRemapOnAllLayer = false;
if (this.defaultKeyAction instanceof KeystrokeAction) {
this.keystrokeActionChange(this.defaultKeyAction);
tab = TabName.Keypress;
} else if (this.defaultKeyAction instanceof SwitchLayerAction) {
tab = TabName.Layer;
@@ -188,6 +195,9 @@ export class PopoverComponent implements OnChanges {
selectTab(tab: TabName): void {
this.activeTab = tab;
if (tab === TabName.Keypress) {
this.keystrokeActionChange(this.defaultKeyAction as KeystrokeAction);
}
}
onOverlay() {
@@ -198,6 +208,26 @@ export class PopoverComponent implements OnChanges {
this.selectedTab.remapInfoChanged(this.remapInfo);
}
keystrokeActionChange(keystrokeAction: KeystrokeAction): void {
this.shadowKeyAction = keystrokeAction;
const disableRemapOnAllLayer =
keystrokeAction &&
this.currentLayer === 0 &&
(keystrokeAction.secondaryRoleAction === SecondaryRoleAction.fn ||
keystrokeAction.secondaryRoleAction === SecondaryRoleAction.mod ||
keystrokeAction.secondaryRoleAction === SecondaryRoleAction.mouse);
if (this.disableRemapOnAllLayer !== disableRemapOnAllLayer) {
this.disableRemapOnAllLayer = disableRemapOnAllLayer;
if (disableRemapOnAllLayer) {
this.remapInfo.remapOnAllLayer = false;
}
this.cdRef.markForCheck();
}
}
private calculatePosition() {
const offsetLeft: number = this.wrapPosition.left + 265; // 265 is a width of the side menu with a margin
const popover: HTMLElement = this.popoverHost.nativeElement;

46
packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
View File

@@ -1,4 +1,13 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnChanges,
Output,
SimpleChanges
} from '@angular/core';
import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';
import { Tab } from '../tab';
@@ -8,6 +17,16 @@ import { KeyModifierModel } from '../../../../models/key-modifier-model';
import { mapLeftRigthModifierToKeyActionModifier } from '../../../../util';
import { RemapInfo } from '../../../../models/remap-info';
export const secondaryRoleFilter = (showLayerSwitchers: boolean) => {
return (data): boolean => {
if (showLayerSwitchers) {
return data;
}
return data.text !== 'Layer switcher';
};
};
@Component({
selector: 'keypress-tab',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -19,12 +38,15 @@ export class KeypressTabComponent extends Tab implements OnChanges {
@Input() secondaryRoleEnabled: boolean;
@Input() allowRemapOnAllKeymapWarning: boolean;
@Input() remapInfo: RemapInfo;
@Input() showLayerSwitcherInSecondaryRoles: boolean;
@Output() keyActionChange = new EventEmitter<KeystrokeAction>();
leftModifiers: KeyModifierModel[];
rightModifiers: KeyModifierModel[];
scanCodeGroups: Array<SelectOptionData>;
secondaryRoleGroups: Array<SelectOptionData>;
secondaryRoleGroups: Array<SelectOptionData> = [];
selectedScancodeOption: SelectOptionData;
selectedSecondaryRoleIndex: number;
@@ -41,14 +63,16 @@ export class KeypressTabComponent extends Tab implements OnChanges {
text: 'None'
}];
this.scanCodeGroups = this.scanCodeGroups.concat(SCANCODES);
this.secondaryRoleGroups = SECONDARY_ROLES;
this.selectedScancodeOption = this.scanCodeGroups[0];
this.selectedSecondaryRoleIndex = -1;
}
ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (changes.showLayerSwitcherInSecondaryRoles) {
this.fillSecondaryRoles();
}
this.fromKeyAction(this.defaultKeyAction);
this.keyActionChanged();
this.keyActionChanged(false);
}
keyActionValid(keystrokeAction?: KeystrokeAction): boolean {
@@ -124,6 +148,7 @@ export class KeypressTabComponent extends Tab implements OnChanges {
onSecondaryRoleChange(id: string) {
this.selectedSecondaryRoleIndex = +id;
this.keyActionChanged();
}
onScancodeChange(id: string) {
@@ -200,10 +225,14 @@ export class KeypressTabComponent extends Tab implements OnChanges {
return [scanCode, type];
}
private keyActionChanged(): void {
private keyActionChanged(dispatch = true): void {
const keystrokeAction = this.toKeyAction();
this.validAction.emit(this.keyActionValid(keystrokeAction));
this.calculateRemapOnAllLayerWarningVisibility(keystrokeAction);
if (dispatch) {
this.keyActionChange.emit(keystrokeAction);
}
}
private calculateRemapOnAllLayerWarningVisibility(keystrokeAction: KeystrokeAction): void {
@@ -214,4 +243,9 @@ export class KeypressTabComponent extends Tab implements OnChanges {
!keystrokeAction.hasScancode() &&
keystrokeAction.hasOnlyOneActiveModifier();
}
private fillSecondaryRoles(): void {
this.secondaryRoleGroups = SECONDARY_ROLES
.filter(secondaryRoleFilter(this.showLayerSwitcherInSecondaryRoles));
}
}