feat: disable other popover tabs if the current key is layer switcher action (#813)

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

@@ -8,40 +8,14 @@
     <div class="arrowCustom"></div>
     <div class="popover-title menu-tabs">
         <ul class="nav nav-tabs popover-menu">
-            <li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
+            <li *ngFor="let tab of tabHeaders; trackBy:trackTabHeader"
+                [class.active]="activeTab === tab.tabName"
+                [class.disabled]="tab.disabled"
+                (click)="selectTab(tab)">
                 <a class="menu-tabs--item">
-                    <i class="fa fa-keyboard-o"></i>
+                    <i class="fa"
-                    <span>Keypress</span>
+                       [ngClass]="tab.icon"></i>
-                </a>
+                    <span>{{ tab.text }}</span>
-            </li>
-            <li #layer [class.active]="activeTab === tabName.Layer" (click)="selectTab(tabName.Layer)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-clone"></i>
-                    <span>Layer</span>
-                </a>
-            </li>
-            <li #mouse [class.active]="activeTab === tabName.Mouse" (click)="selectTab(tabName.Mouse)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-mouse-pointer"></i>
-                    <span>Mouse</span>
-                </a>
-            </li>
-            <li #macro [class.active]="activeTab === tabName.Macro" (click)="selectTab(tabName.Macro)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-play"></i>
-                    <span>Macro</span>
-                </a>
-            </li>
-            <li #keymap [class.active]="activeTab === tabName.Keymap" (click)="selectTab(tabName.Keymap)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-keyboard-o"></i>
-                    <span>Keymap</span>
-                </a>
-            </li>
-            <li #none [class.active]="activeTab === tabName.None" (click)="selectTab(tabName.None)">
-                <a class="menu-tabs--item">
-                    <i class="fa fa-ban"></i>
-                    <span>None</span>
                 </a>
             </li>
         </ul>
@@ -53,30 +27,30 @@
                       [allowRemapOnAllKeymapWarning]="true"
                       [remapInfo]="remapInfo"
                       [showLayerSwitcherInSecondaryRoles]="currentLayer === 0"
-                      (validAction)="keyActionValid=$event"
+                      (validAction)="setKeyActionValidState($event)"
                       (keyActionChange)="keystrokeActionChange($event)"
         ></keypress-tab>
         <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
                    [currentLayer]="currentLayer"
                    [allowLayerDoubleTap]="allowLayerDoubleTap"
-                   (validAction)="keyActionValid=$event"
+                   (validAction)="setKeyActionValidState($event)"
         ></layer-tab>
         <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
-                   (validAction)="keyActionValid=$event"
+                   (validAction)="setKeyActionValidState($event)"
         ></mouse-tab>
         <macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content"
                    [defaultKeyAction]="defaultKeyAction"
-                   (validAction)="keyActionValid=$event"
+                   (validAction)="setKeyActionValidState($event)"
         ></macro-tab>
         <keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content"
                     [defaultKeyAction]="defaultKeyAction"
                     [keymaps]="keymaps$ | async"
-                    (validAction)="keyActionValid=$event"
+                    (validAction)="setKeyActionValidState($event)"
         ></keymap-tab>
         <none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"
-                  (validAction)="keyActionValid=$event"
+                  (validAction)="setKeyActionValidState($event)"
         ></none-tab>
     </div>
     <div class="popover-action">

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

@@ -28,6 +28,11 @@
 
 .nav-tabs > li {
     overflow: hidden;
+    cursor: pointer;
+
+    &.disabled {
+        cursor: not-allowed;
+    }
 }
 
 .arrowCustom {
@@ -85,7 +90,6 @@
             .menu-tabs--item {
                 display: flex;
                 align-items: center;
-                cursor: pointer;
 
                 i {
                     margin-right: 0.25em;

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

@@ -46,6 +46,13 @@ enum TabName {
     None
 }
 
+export interface TabHeader {
+    text: string;
+    icon: string;
+    tabName: TabName;
+    disabled?: boolean;
+}
+
 @Component({
     selector: 'popover',
     templateUrl: './popover.component.html',
@@ -108,6 +115,38 @@ export class PopoverComponent implements OnChanges {
     animationState: string;
     shadowKeyAction: KeyAction;
     disableRemapOnAllLayer = false;
+    tabHeaders: TabHeader[] = [
+        {
+            tabName: TabName.Keypress,
+            icon: 'fa-keyboard-o',
+            text: 'Keypress'
+        },
+        {
+            tabName: TabName.Layer,
+            icon: 'fa-clone',
+            text: 'Layer'
+        },
+        {
+            tabName: TabName.Mouse,
+            icon: 'fa-mouse-pointer',
+            text: 'Mouse'
+        },
+        {
+            tabName: TabName.Macro,
+            icon: 'fa-play',
+            text: 'Macro'
+        },
+        {
+            tabName: TabName.Keymap,
+            icon: 'fa-keyboard-o',
+            text: 'Keymap'
+        },
+        {
+            tabName: TabName.None,
+            icon: 'fa-ban',
+            text: 'None'
+        }
+    ];
 
     private readonly currentKeymap$ = new BehaviorSubject<Keymap>(undefined);
 
@@ -127,24 +166,30 @@ export class PopoverComponent implements OnChanges {
         }
 
         if (change['defaultKeyAction']) {
-            let tab: TabName;
+            let tab: TabHeader;
             this.disableRemapOnAllLayer = false;
 
             if (this.defaultKeyAction instanceof KeystrokeAction) {
                 this.keystrokeActionChange(this.defaultKeyAction);
-                tab = TabName.Keypress;
+                tab = this.tabHeaders[0];
             } else if (this.defaultKeyAction instanceof SwitchLayerAction) {
-                tab = TabName.Layer;
+                tab = this.tabHeaders[1];
             } else if (this.defaultKeyAction instanceof MouseAction) {
-                tab = TabName.Mouse;
+                tab = this.tabHeaders[2];
             } else if (this.defaultKeyAction instanceof PlayMacroAction) {
-                tab = TabName.Macro;
+                tab = this.tabHeaders[3];
             } else if (this.defaultKeyAction instanceof SwitchKeymapAction) {
-                tab = TabName.Keymap;
+                tab = this.tabHeaders[4];
             } else {
-                tab = TabName.None;
+                tab = this.tabHeaders[5];
             }
 
+            for (const tabHeader of this.tabHeaders) {
+                const allowOnlyLayerTab = tab.tabName === TabName.Layer && this.currentLayer !== 0;
+
+                tabHeader.disabled = allowOnlyLayerTab && tabHeader.tabName !== TabName.Layer;
+                console.log(tabHeader);
+            }
             this.selectTab(tab);
         }
 
@@ -193,9 +238,13 @@ export class PopoverComponent implements OnChanges {
         }
     }
 
-    selectTab(tab: TabName): void {
+    selectTab(tab: TabHeader): void {
-        this.activeTab = tab;
+        if (tab.disabled) {
-        if (tab === TabName.Keypress) {
+            return;
+        }
+
+        this.activeTab = tab.tabName;
+        if (tab.tabName === TabName.Keypress) {
             this.keystrokeActionChange(this.defaultKeyAction as KeystrokeAction);
         }
     }
@@ -228,6 +277,15 @@ export class PopoverComponent implements OnChanges {
         }
     }
 
+    setKeyActionValidState($event: boolean): void {
+        this.keyActionValid = $event;
+        this.cdRef.markForCheck();
+    }
+
+    trackTabHeader(index: number, tabItem: TabHeader): string {
+        return tabItem.tabName.toString();
+    }
+
     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/layer/layer-tab.component.ts

@@ -63,7 +63,7 @@ export class LayerTabComponent extends Tab implements OnChanges {
             this.isNotBase = this.currentLayer > 0;
         }
 
-        this.validAction.emit(true);
+        this.validAction.emit(!this.isNotBase);
     }
 
     keyActionValid(): boolean {