From 283e10be83f10a7b66685cd6a700c40235b10c25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= <fjozsef001@gmail.com>
Date: Wed, 25 May 2016 22:24:39 +0200
Subject: [PATCH] Popover layout fix

---
 src/components/popover/popover.component.ts        | 14 ++++++--------
 .../popover/tab/keymap-tab.component.scss          |  2 ++
 .../popover/tab/keypress-tab.component.scss        |  4 ++++
 .../popover/tab/keypress-tab.component.ts          |  1 +
 .../popover/tab/layer-tab.component.scss           |  7 +++++++
 src/components/popover/tab/layer-tab.component.ts  |  3 ++-
 6 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 src/components/popover/tab/keypress-tab.component.scss
 create mode 100644 src/components/popover/tab/layer-tab.component.scss

diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts
index 22bfa224..32cf47e2 100644
--- a/src/components/popover/popover.component.ts
+++ b/src/components/popover/popover.component.ts
@@ -74,14 +74,12 @@ import {KeyActionSaver} from './key-action-saver';
                 </div>
             </div>
             <div class="row" [ngSwitch]="activeListItemIndex">
-                <div class="popover-content">
-                    <keypress-tab #tab *ngSwitchWhen="0"></keypress-tab>
-                    <layer-tab #tab *ngSwitchWhen="1"></layer-tab>
-                    <mouse-tab #tab *ngSwitchWhen="2"></mouse-tab>
-                    <macro-tab #tab *ngSwitchWhen="3"></macro-tab>
-                    <keymap-tab #tab *ngSwitchWhen="4"></keymap-tab>
-                    <none-tab #tab *ngSwitchWhen="5"></none-tab>
-                </div>
+                <keypress-tab #tab *ngSwitchWhen="0" class="popover-content"></keypress-tab>
+                <layer-tab #tab *ngSwitchWhen="1" class="popover-content"></layer-tab>
+                <mouse-tab #tab *ngSwitchWhen="2" class="popover-content"></mouse-tab>
+                <macro-tab #tab *ngSwitchWhen="3" class="popover-content"></macro-tab>
+                <keymap-tab #tab *ngSwitchWhen="4" class="popover-content"></keymap-tab>
+                <none-tab #tab *ngSwitchWhen="5" class="popover-content"></none-tab>
             </div>
             <div class="row">
                 <div class="popover-action">
diff --git a/src/components/popover/tab/keymap-tab.component.scss b/src/components/popover/tab/keymap-tab.component.scss
index 5a40a97b..c0ec133d 100644
--- a/src/components/popover/tab/keymap-tab.component.scss
+++ b/src/components/popover/tab/keymap-tab.component.scss
@@ -1,4 +1,6 @@
 :host {
+    display: flex;
+    flex-direction: column;
     margin-top: 2px;
 
     > div {
diff --git a/src/components/popover/tab/keypress-tab.component.scss b/src/components/popover/tab/keypress-tab.component.scss
new file mode 100644
index 00000000..1637f879
--- /dev/null
+++ b/src/components/popover/tab/keypress-tab.component.scss
@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/components/popover/tab/keypress-tab.component.ts b/src/components/popover/tab/keypress-tab.component.ts
index 59c4f61c..6a153dc8 100644
--- a/src/components/popover/tab/keypress-tab.component.ts
+++ b/src/components/popover/tab/keypress-tab.component.ts
@@ -45,6 +45,7 @@ import { KeyActionSaver } from '../key-action-saver';
             </i>
         </div>
     `,
+    styles: [require('./keypress-tab.component.scss')],
     directives: [CaptureKeystrokeButtonComponent]
 })
 export class KeypressTabComponent implements OnInit, KeyActionSaver {
diff --git a/src/components/popover/tab/layer-tab.component.scss b/src/components/popover/tab/layer-tab.component.scss
new file mode 100644
index 00000000..dd1bb678
--- /dev/null
+++ b/src/components/popover/tab/layer-tab.component.scss
@@ -0,0 +1,7 @@
+:host {
+    display: flex;
+
+    span {
+        margin: 0 5px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/popover/tab/layer-tab.component.ts b/src/components/popover/tab/layer-tab.component.ts
index 542918cf..e213f780 100644
--- a/src/components/popover/tab/layer-tab.component.ts
+++ b/src/components/popover/tab/layer-tab.component.ts
@@ -21,7 +21,8 @@ import { KeyActionSaver } from '../key-action-saver';
         <span>
         layer by holding this key.
         </span>
-    `
+    `,
+    styles: [require('./layer-tab.component.scss')]
 })
 export class LayerTabComponent implements OnInit, KeyActionSaver {
     private toggle: boolean;