Disable layer switcher actions on non-base layers

Closes #216

src/components/popover/popover.component.html

@@ -48,7 +48,7 @@
     </div>
     <div [ngSwitch]="activeTab">
         <keypress-tab #tab *ngSwitchCase="tabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
-        <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
+        <layer-tab #tab *ngSwitchCase="tabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction" [currentLayer]="currentLayer"></layer-tab>
         <mouse-tab #tab *ngSwitchCase="tabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
         <macro-tab #tab *ngSwitchCase="tabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
         <keymap-tab #tab *ngSwitchCase="tabName.Keymap" class="popover-content" [defaultKeyAction]="defaultKeyAction" [keymaps]="keymaps$ | async"></keymap-tab>

src/components/popover/popover.component.ts

@@ -67,6 +67,7 @@ enum TabName {
 export class PopoverComponent implements OnChanges {
     @Input() defaultKeyAction: KeyAction;
     @Input() currentKeymap: Keymap;
+    @Input() currentLayer: number;
     @Input() keyPosition: ClientRect;
     @Input() wrapPosition: ClientRect;
     @Input() visible: boolean;

src/components/popover/tab/layer/layer-tab.component.html

@@ -1,15 +1,20 @@
-<select (change)="toggleChanged($event.target.value)">
+<template [ngIf]="!isNotBase">
-    <option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
+    <select (change)="toggleChanged($event.target.value)">
-        {{ item.text }}
+        <option *ngFor="let item of toggleData" [value]="item.id" [selected]="toggle === item.id">
-    </option>
+            {{ item.text }}
-</select>
+        </option>
-<span>the</span>
+    </select>
-<select (change)="layerChanged($event.target.value)">
+    <span>the</span>
-    <option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
+    <select (change)="layerChanged($event.target.value)">
-        {{ item.text }}
+        <option *ngFor="let item of layerData" [value]="item.id" [selected]="layer === item.id">
-    </option>
+            {{ item.text }}
-</select>
+        </option>
-<span [ngSwitch]="toggle">
+    </select>
-     <template ngSwitchCase="true">layer by pressing this key.</template>
+    <span [ngSwitch]="toggle">
-     <template ngSwitchDefault="false">layer by holding this key.</template>
+        <template ngSwitchCase="true">layer by pressing this key.</template>
-</span>
+        <template ngSwitchDefault="false">layer by holding this key.</template>
+    </span>
+</template>
+<template [ngIf]="isNotBase">
+    <span> Layer switching is only possible from the base layer. </span>
+</template>

src/components/popover/tab/layer/layer-tab.component.scss

@@ -2,6 +2,10 @@
     display: flex;
     margin: 0 -5px;
 
+    &.no-base {
+        justify-content: center;
+    }
+
     > span,
     > select {
         margin: 0 5px;

src/components/popover/tab/layer/layer-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
 
@@ -11,8 +11,11 @@ import { Tab } from '../tab';
 })
 export class LayerTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
+    @Input() currentLayer: number;
 
-    toggleData: {id: boolean, text: string}[] = [
+    @HostBinding('class.no-base') isNotBase: boolean;
+
+    toggleData: { id: boolean, text: string }[] = [
         {
             id: false,
             text: 'Activate'
@@ -23,7 +26,7 @@ export class LayerTabComponent implements OnChanges, Tab {
         }
     ];
 
-    layerData: {id: number, text: string}[] = [
+    layerData: { id: number, text: string }[] = [
         {
             id: 0,
             text: 'Mod'
@@ -46,8 +49,14 @@ export class LayerTabComponent implements OnChanges, Tab {
         this.layer = LayerName.mod;
     }
 
-    ngOnChanges() {
+    ngOnChanges(changes: SimpleChanges) {
-        this.fromKeyAction(this.defaultKeyAction);
+        if (changes['defaultKeyAction']) {
+            this.fromKeyAction(this.defaultKeyAction);
+        }
+
+        if (changes['currentLayer']) {
+            this.isNotBase = this.currentLayer > 0;
+        }
     }
 
     keyActionValid(): boolean {

src/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -5,7 +5,8 @@
                      [keybindAnimationEnabled]="keybindAnimationEnabled"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"></keyboard-slider>
-    <popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
+    <popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
+             [currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
     <div class="tooltip bottom"
          [class.in]="tooltipData.show"
          [style.top.px]="tooltipData.posTop"