Hide popover when you delete or switch keymap; Disable layer switch when popover is opened

src/components/keymap/header/keymap-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -14,10 +14,9 @@ import { KeymapActions } from '../../../store/actions';
 })
 export class KeymapHeaderComponent {
     @Input() keymap: Keymap;
+    @Output() deleted: EventEmitter<boolean> = new EventEmitter();
 
-    constructor(
-        private store: Store<AppState>
-    ) { }
+    constructor(private store: Store<AppState>) { }
 
     setDefault() {
         if (!this.keymap.isDefault) {
@@ -26,6 +25,7 @@ export class KeymapHeaderComponent {
     }
 
     removeKeymap() {
+        this.deleted.emit(false);
         this.store.dispatch(KeymapActions.removeKeymap(this.keymap.abbreviation));
     }
 

src/components/keymap/keymap.component.html

@@ -1,6 +1,6 @@
 <template [ngIf]="keymap$ | async">
-    <keymap-header [keymap]="keymap$ | async"></keymap-header>
-    <svg-keyboard-wrap [keymap]="keymap$ | async"></svg-keyboard-wrap>
+    <keymap-header [keymap]="keymap$ | async" (deleted)="onKeymapDelete($event)"></keymap-header>
+    <svg-keyboard-wrap [keymap]="keymap$ | async" [deleted]="keymapDeleted"></svg-keyboard-wrap>
 </template>
 
 <div *ngIf="!(keymap$ | async)" class="not-found">

src/components/keymap/keymap.component.ts

@@ -21,6 +21,7 @@ import { getKeymap } from '../../store/reducers/keymap';
 })
 export class KeymapComponent {
     private keymap$: Observable<Keymap>;
+    private keymapDeleted: boolean = false;
 
     constructor(
         private store: Store<AppState>,
@@ -35,4 +36,8 @@ export class KeymapComponent {
         this.keymap$ = keymapConnectable;
         keymapConnectable.connect();
     }
+
+    onKeymapDelete() {
+        this.keymapDeleted = true;
+    }
 }

src/components/layers/layers.component.scss

@@ -1,5 +1,18 @@
 :host {
     display: block;
+
+    &.disabled {
+        button {
+            cursor: no-drop;
+            background: rgba(#ccc, 0.43);
+            pointer-events: none;
+
+            &.btn-primary {
+                background: #7c7c7c;
+                border-color: #7c7c7c;
+            }
+        }
+    }
 }
 
 button {

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

@@ -1,5 +1,5 @@
 <template ngIf="layers">
-    <layers (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
+    <layers [class.disabled]="popoverShown" (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
     <div class="keyboard-slider" (mouseout)="hideTooltip($event)">
         <svg-keyboard *ngFor="let layer of layers"
                       [@layerState]="layer.animation"

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

@@ -91,6 +91,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     @Input() keymap: Keymap;
     @Input() popoverEnabled: boolean = true;
     @Input() tooltipEnabled: boolean = false;
+    @Input() deleted: boolean = false;
 
     private popoverShown: boolean;
     private keyEditConfig: { keyActions: KeyAction[], keyId: number };
@@ -119,11 +120,14 @@ export class SvgKeyboardWrapComponent implements OnChanges {
         if (changes['keymap'].previousValue.abbreviation !== changes['keymap'].currentValue.abbreviation) {
             this.layers = this.keymap.layers;
             this.currentLayer = 0;
+            this.popoverShown = false;
 
             if (this.layers.length > 0) {
                 this.layers.forEach(element => element.animation = 'none');
                 this.layers[0].animation = 'leftIn';
             }
+        } else if (changes['keymap']) {
+            this.popoverShown = false;
         }
     }