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 6bafecd72e2..9fb459ceaa5 100644 --- a/packages/uhk-web/src/app/components/popover/popover.component.html +++ b/packages/uhk-web/src/app/components/popover/popover.component.html @@ -29,10 +29,13 @@ (keyActionChange)="keystrokeActionChange($event)" > + [(ngModel)]="internalRemapInfo.remapOnAllKeymap" + (ngModelChange)="remapInfoChange()">
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 d705a7c8c77..c8f9149f34e 100644 --- a/packages/uhk-web/src/app/components/popover/popover.component.ts +++ b/packages/uhk-web/src/app/components/popover/popover.component.ts @@ -28,7 +28,8 @@ import { SecondaryRoleAction, UhkThemeColors, SwitchKeymapAction, - SwitchLayerAction + SwitchLayerAction, + UserConfiguration, } from 'uhk-common'; import { SelectedKeyModel } from '../../models'; @@ -40,6 +41,7 @@ import { getKeymaps, getLayerOptions, getUhkThemeColors, + getUserConfiguration, macroPlaybackSupported } from '../../store'; import { KeyActionRemap } from '../../models/key-action-remap'; @@ -137,6 +139,7 @@ export class PopoverComponent implements OnChanges { ]; macroPlaybackSupported$: Observable; layerOptions$: Observable; + userConfiguration$: Observable; constructor(private store: Store, private cdRef: ChangeDetectorRef) { @@ -145,6 +148,7 @@ export class PopoverComponent implements OnChanges { this.keymapOptions$ = store.select(getKeymapOptions); this.macroPlaybackSupported$ = store.select(macroPlaybackSupported); this.layerOptions$ = store.select(getLayerOptions); + this.userConfiguration$ = store.select(getUserConfiguration); } ngOnChanges(change: SimpleChanges) { diff --git a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html index 49990190fb8..0d74d49a389 100644 --- a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html +++ b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.html @@ -38,6 +38,10 @@
+ + diff --git a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.scss b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.scss index eddcc1af3e1..14e06a9e671 100644 --- a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.scss +++ b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.scss @@ -21,4 +21,11 @@ display: inline-block; width: 6em; } + + .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/layer/layer-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts index b06b31857ac..fc6d111f5a1 100644 --- a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts +++ b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts @@ -1,8 +1,10 @@ -import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { copyRgbColor, KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode } from 'uhk-common'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { copyRgbColor, KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode, UserConfiguration } from 'uhk-common'; import { Tab } from '../tab'; import { LayerOption } from '../../../../models'; +import { RemapInfo } from '../../../../models/remap-info'; +import { initLayerOptions } from '../../../../store/reducers/layer-options'; export type toggleType = 'active' | 'toggle'; @@ -14,10 +16,13 @@ export type toggleType = 'active' | 'toggle'; styleUrls: ['./layer-tab.component.scss'] }) export class LayerTabComponent extends Tab implements OnChanges { + @Input() allowRemapOnAllKeymapWarning: boolean; @Input() defaultKeyAction: KeyAction; @Input() currentLayer: LayerOption; @Input() allowLayerDoubleTap: boolean; - @Input() layerOptions: LayerOption[]; + @Input() layerOptions: LayerOption[] = []; + @Input() remapInfo: RemapInfo; + @Input() userConfiguration: UserConfiguration; @HostBinding('class.no-base') isNotBase: boolean; @@ -36,12 +41,15 @@ export class LayerTabComponent extends Tab implements OnChanges { toggle: toggleType; layer: LayerName; + layerDisplayText: string; lockLayerWhenDoubleTapping: boolean; + showWarning= false; - constructor() { + constructor(private cdRef: ChangeDetectorRef) { super(); this.toggle = 'active'; this.layer = LayerName.mod; + this.calculateWarning(); } ngOnChanges(changes: SimpleChanges) { @@ -57,6 +65,7 @@ export class LayerTabComponent extends Tab implements OnChanges { this.layerData = this.layerOptions.filter(layer => layer.selected && layer.allowed); } + this.calculateWarning(); this.validAction.emit(!this.isNotBase); } @@ -117,5 +126,32 @@ export class LayerTabComponent extends Tab implements OnChanges { layerChanged(value: number) { this.layer = +value; + this.calculateWarning(); + } + + private calculateWarning() { + if (this.allowRemapOnAllKeymapWarning && this.userConfiguration && this.remapInfo.remapOnAllKeymap) { + for (const keymap of this.userConfiguration.keymaps) { + const layer = keymap.layers.find(layer => layer.id === this.layer); + if (!layer) { + this.showWarning = true; + + const layerOptions = initLayerOptions(); + const layerOption = layerOptions.get(this.layer); + this.layerDisplayText = layerOption?.name; + + break; + } + } + } + else { + this.showWarning = false; + } + } + + remapInfoChanged(remapInfo: RemapInfo): void { + this.remapInfo = remapInfo; + this.calculateWarning(); + this.cdRef.markForCheck(); } }