diff --git a/packages/uhk-web/src/app/components/popover/popover.component.html b/packages/uhk-web/src/app/components/popover/popover.component.html index fbed42c9..0cbc25c5 100644 --- a/packages/uhk-web/src/app/components/popover/popover.component.html +++ b/packages/uhk-web/src/app/components/popover/popover.component.html @@ -50,6 +50,8 @@ Remap on all layers + [(ngModel)]="remapInfo.remapOnAllLayer" + (ngModelChange)="remapInfoChange()"> Remap on all layers
diff --git a/packages/uhk-web/src/app/components/popover/popover.component.ts b/packages/uhk-web/src/app/components/popover/popover.component.ts index 07e4cd67..ecf6a09a 100644 --- a/packages/uhk-web/src/app/components/popover/popover.component.ts +++ b/packages/uhk-web/src/app/components/popover/popover.component.ts @@ -194,6 +194,10 @@ export class PopoverComponent implements OnChanges { this.cancel.emit(undefined); } + remapInfoChange(): void { + this.selectedTab.remapInfoChanged(this.remapInfo); + } + 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; diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html index ca121791..77387977 100644 --- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html +++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html @@ -92,6 +92,11 @@ data-placement="bottom">
+ +
When a key is configured as layer switcher key, you can't assign other functions to it. diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss index e7f23252..707a00ed 100644 --- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss +++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss @@ -89,4 +89,11 @@ display: inline-block; width: 140px; } + + .remap-warning { + margin-top: 10px; + margin-bottom: 0; + padding-top: 5px; + padding-bottom: 5px; + } } diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts index 16e97791..9441f447 100644 --- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts +++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core'; import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common'; import { Tab } from '../tab'; @@ -6,6 +6,7 @@ import { MapperService } from '../../../../services/mapper.service'; import { SelectOptionData } from '../../../../models/select-option-data'; import { KeyModifierModel } from '../../../../models/key-modifier-model'; import { mapLeftRigthModifierToKeyActionModifier } from '../../../../util'; +import { RemapInfo } from '../../../../models/remap-info'; @Component({ selector: 'keypress-tab', @@ -16,6 +17,8 @@ import { mapLeftRigthModifierToKeyActionModifier } from '../../../../util'; export class KeypressTabComponent extends Tab implements OnChanges { @Input() defaultKeyAction: KeyAction; @Input() secondaryRoleEnabled: boolean; + @Input() allowRemapOnAllKeymapWarning: boolean; + @Input() remapInfo: RemapInfo; leftModifiers: KeyModifierModel[]; rightModifiers: KeyModifierModel[]; @@ -25,8 +28,10 @@ export class KeypressTabComponent extends Tab implements OnChanges { selectedScancodeOption: SelectOptionData; selectedSecondaryRoleIndex: number; + warningVisible: boolean; - constructor(private mapper: MapperService) { + constructor(private mapper: MapperService, + private cdRef: ChangeDetectorRef) { super(); this.leftModifiers = mapper.getLeftKeyModifiers(); this.rightModifiers = mapper.getRightKeyModifiers(); @@ -43,7 +48,7 @@ export class KeypressTabComponent extends Tab implements OnChanges { ngOnChanges() { this.fromKeyAction(this.defaultKeyAction); - this.validAction.emit(this.keyActionValid()); + this.keyActionChanged(); } keyActionValid(keystrokeAction?: KeystrokeAction): boolean { @@ -63,7 +68,7 @@ export class KeypressTabComponent extends Tab implements OnChanges { this.leftModifiers = event.left; this.rightModifiers = event.right; - this.validAction.emit(this.keyActionValid()); + this.keyActionChanged(); } fromKeyAction(keyAction: KeyAction): boolean { @@ -114,8 +119,7 @@ export class KeypressTabComponent extends Tab implements OnChanges { toggleModifier(modifier: KeyModifierModel): void { modifier.checked = !modifier.checked; - - this.validAction.emit(this.keyActionValid()); + this.keyActionChanged(); } onSecondaryRoleChange(id: string) { @@ -125,13 +129,20 @@ export class KeypressTabComponent extends Tab implements OnChanges { onScancodeChange(id: string) { this.selectedScancodeOption = this.findScancodeOptionById(id); - this.validAction.emit(this.keyActionValid()); + this.keyActionChanged(); } modifiersTrackBy(index: number, modifier: KeyModifierModel): string { return `${modifier.value}${modifier.checked}`; } + remapInfoChanged(remapInfo: RemapInfo): void { + this.remapInfo = remapInfo; + const keystrokeAction = this.toKeyAction(); + this.calculateRemapOnAllLayerWarningVisibility(keystrokeAction); + this.cdRef.markForCheck(); + } + private findScancodeOptionBy(predicate: (option: SelectOptionData) => boolean): SelectOptionData { let selectedOption: SelectOptionData; @@ -189,4 +200,18 @@ export class KeypressTabComponent extends Tab implements OnChanges { return [scanCode, type]; } + private keyActionChanged(): void { + const keystrokeAction = this.toKeyAction(); + this.validAction.emit(this.keyActionValid(keystrokeAction)); + this.calculateRemapOnAllLayerWarningVisibility(keystrokeAction); + } + + private calculateRemapOnAllLayerWarningVisibility(keystrokeAction: KeystrokeAction): void { + this.warningVisible = this.allowRemapOnAllKeymapWarning && + this.remapInfo && + !this.remapInfo.remapOnAllLayer && + keystrokeAction && + !keystrokeAction.hasScancode() && + keystrokeAction.hasOnlyOneActiveModifier(); + } } diff --git a/packages/uhk-web/src/app/components/popover/tab/tab.ts b/packages/uhk-web/src/app/components/popover/tab/tab.ts index 504a543f..0ddba0c6 100644 --- a/packages/uhk-web/src/app/components/popover/tab/tab.ts +++ b/packages/uhk-web/src/app/components/popover/tab/tab.ts @@ -1,10 +1,13 @@ import { EventEmitter, Output } from '@angular/core'; import { KeyAction } from 'uhk-common'; +import { RemapInfo } from '../../../models/remap-info'; + export abstract class Tab { @Output() validAction = new EventEmitter(); abstract keyActionValid(): boolean; abstract fromKeyAction(keyAction: KeyAction): boolean; abstract toKeyAction(): KeyAction; + remapInfoChanged(remapInfo: RemapInfo): void {} }