feat: remap on all keymap warning (#789)

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

@@ -50,6 +50,8 @@
         <keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content pr-10"
                       [defaultKeyAction]="defaultKeyAction"
                       [secondaryRoleEnabled]="true"
+                      [allowRemapOnAllKeymapWarning]="true"
+                      [remapInfo]="remapInfo"
                       (validAction)="keyActionValid=$event"
         ></keypress-tab>
         <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
@@ -88,7 +90,8 @@
                 <label>
                     <input type="checkbox"
                            name="remapOnAllLayer"
-                           [(ngModel)]="remapInfo.remapOnAllLayer"> Remap on all layers
+                           [(ngModel)]="remapInfo.remapOnAllLayer"
+                           (ngModelChange)="remapInfoChange()"> Remap on all layers
                 </label>
             </div>
             <div class="d-inline-block">

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;

packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html

@@ -92,6 +92,11 @@
           data-placement="bottom"></icon>
 </div>
 
+<div *ngIf="warningVisible" class="alert alert-warning remap-warning" role="alert">
+    You're about to remap a modifier key only on this layer. You probably want to remap it on all layers. If so, check
+    the <strong>Remap on all layers</strong> checkbox below.
+</div>
+
 <div class="disabled-state--text">
     <i class="fa fa-info-circle"></i>
     When a key is configured as layer switcher key, you can't assign other functions to it.

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;
+    }
 }

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();
+    }
 }

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<boolean>();
 
     abstract keyActionValid(): boolean;
     abstract fromKeyAction(keyAction: KeyAction): boolean;
     abstract toKeyAction(): KeyAction;
+    remapInfoChanged(remapInfo: RemapInfo): void {}
 }