Fixed graphical glitch

src/components/popover/popover.component.html

@@ -6,63 +6,57 @@
      [style.left.px]="leftPosition"
 >
     <div class="arrowCustom"></div>
-    <div class="container-fluid">
-        <div class="row">
-            <div class="popover-title menu-tabs">
-                <ul class="nav nav-tabs popover-menu">
-                    <li #keypress [class.active]="activeTab === tabName.Keypress" (click)="selectTab(tabName.Keypress)">
-                        <a class="menu-tabs--item">
-                            <i class="fa fa-keyboard-o"></i>
-                            <span>Keypress</span>
-                        </a>
-                    </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>
-            </div>
-        </div>
-        <div class="row" [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>
-            <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>
-            <none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab>
-        </div>
-        <div class="row">
-            <div class="popover-action">
-                <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
-                <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
-            </div>
-        </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)">
+                <a class="menu-tabs--item">
+                    <i class="fa fa-keyboard-o"></i>
+                    <span>Keypress</span>
+                </a>
+            </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>
+    </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>
+        <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>
+        <none-tab #tab *ngSwitchCase="tabName.None" class="popover-content"></none-tab>
+    </div>
+    <div class="popover-action">
+        <button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
+        <button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
     </div>
 </div>
 <div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

src/components/popover/popover.component.scss

@@ -4,6 +4,7 @@
     padding: 0;
     max-width: 568px;
     width: 100%;
+    user-select: none;
 
     &.leftArrow {
         .arrowCustom {

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 
 import { Select2OptionData } from 'ng2-select2/ng2-select2';
 
@@ -12,7 +12,7 @@ import { Tab } from '../tab';
     styles: [require('./keymap-tab.component.scss')],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class KeymapTabComponent implements OnInit, Tab {
+export class KeymapTabComponent implements OnInit, OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
     @Input() keymaps: Keymap[];
 
@@ -34,6 +34,9 @@ export class KeymapTabComponent implements OnInit, Tab {
         if (this.keymaps.length > 0) {
             this.selectedKeymap = this.keymaps[0];
         }
+    }
+
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 
 import { Select2OptionData } from 'ng2-select2/ng2-select2';
 
@@ -11,7 +11,7 @@ import { Tab } from '../tab';
     template: require('./keypress-tab.component.html'),
     styles: [require('./keypress-tab.component.scss')]
 })
-export class KeypressTabComponent implements OnInit, Tab {
+export class KeypressTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
     @Input() longPressEnabled: boolean;
 
@@ -42,7 +42,7 @@ export class KeypressTabComponent implements OnInit, Tab {
         this.selectedLongPressIndex = -1;
     }
 
-    ngOnInit() {
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

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

@@ -1,4 +1,4 @@
-import { Component, Input,  OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 
 import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
 
@@ -11,7 +11,7 @@ import { Tab } from '../tab';
     template: require('./layer-tab.component.html'),
     styles: [require('./layer-tab.component.scss')]
 })
-export class LayerTabComponent implements OnInit, Tab {
+export class LayerTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
     @ViewChild('toggleSelect') toggleSelect2: Select2Component;
     @ViewChild('layerSelect') layerSelect2: Select2Component;
@@ -52,7 +52,7 @@ export class LayerTabComponent implements OnInit, Tab {
         this.layer = LayerName.mod;
     }
 
-    ngOnInit() {
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -19,7 +19,7 @@ import { getMacroEntities } from '../../../../store/reducers/macro';
     template: require('./macro-tab.component.html'),
     styles: [require('./macro-tab.component.scss')]
 })
-export class MacroTabComponent implements OnInit, OnDestroy, Tab {
+export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
     @Input() defaultKeyAction: KeyAction;
 
     private macros: Macro[];
@@ -41,6 +41,9 @@ export class MacroTabComponent implements OnInit, OnDestroy, Tab {
                 text: macro.name
             };
         });
+    }
+
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 
 import { KeyAction, MouseAction, MouseActionParam } from '../../../../config-serializer/config-items/key-action';
 import { Tab } from '../tab';
@@ -8,7 +8,7 @@ import { Tab } from '../tab';
     template: require('./mouse-tab.component.html'),
     styles: [require('./mouse-tab.component.scss')]
 })
-export class MouseTabComponent implements OnInit, Tab {
+export class MouseTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
 
     private mouseActionParam: MouseActionParam;
@@ -25,7 +25,7 @@ export class MouseTabComponent implements OnInit, Tab {
         this.pages = ['Move', 'Scroll', 'Click', 'Speed'];
     }
 
-    ngOnInit() {
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { Tab } from '../tab';
 
@@ -7,11 +7,7 @@ import { Tab } from '../tab';
     template: require('./none-tab.component.html'),
     styles: [require('./none-tab.component.scss')]
 })
-export class NoneTabComponent implements OnInit, Tab {
-    constructor() { }
-
-    ngOnInit() { }
-
+export class NoneTabComponent implements Tab {
     keyActionValid(): boolean {
         return true;
     }

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

@@ -328,7 +328,6 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
 
     hidePopover(): void {
         this.popoverShown = false;
-        this.popoverInitKeyAction = undefined;
     }
 
     selectLayer(oldIndex: number, index: number): void {