Move style to angular (#72)

* Move global styles to angular app
* Create dummy notification component
* Create dummy html for macro
* Fix click on sidemenu, so that link is the whole line

src/components/popover/popover.component.scss

@@ -28,6 +28,7 @@
             .menu-tabs--item {
                 display: flex;
                 align-items: center;
+                cursor: pointer;
 
                 i {
                     margin-right: 0.25em;
@@ -41,10 +42,19 @@
     padding: 10px 24px;
 }
 
-mouse-tab {
-    &.popover-content {
-        padding: 10px;
-        display: flex;
-        align-items: center;
+.select2-item {
+    position: relative;
+    font-size: 1.5rem;
+
+    &.keymap-name--wrapper {
+        padding-left: 50px;
+    }
+
+    .layout-segment-code {
+        height: 2rem;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -1rem;
     }
 }

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

@@ -26,4 +26,10 @@
     <select2 #longPressSelect [data]="longPressGroups" [value]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
         [width]="140"></select2>
     <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
+</div>
+
+<div class="disabled-state--text">
+    <i class="fa fa-info-circle"></i>
+    When a key is configured as layer switcher key, you can't assign other functions to it.
+    To assign a scancode to the key, set the <em>Layer action</em> to <em>None</em>.
 </div>

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

@@ -1,6 +1,7 @@
 :host {
     display: flex;
     flex-direction: column;
+    position: relative;
 
     .scancode-options {
         margin-bottom: 10px;
@@ -41,4 +42,37 @@
             margin-left: 0.6em;
         }
     }
+
+    .setting-label {
+        &.disabled {
+            color: #999;
+        }
+    }
+
+    .disabled-state--text {
+        display: none;
+        position: absolute;
+        top: 50%;
+        margin-top: -4rem;
+        color: #31708f;
+        padding-right: 40px;
+
+        .fa {
+            font-size: 2.6rem;
+            float: left;
+            padding: 1rem 1.5rem 2rem;
+        }
+    }
+
+    &.disabled {
+        .scancode-options,
+        .modifier-options,
+        .long-press-container {
+            visibility: hidden;
+        }
+
+        .disabled-state--text {
+            display: block;
+        }
+    }
 }

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

@@ -1,27 +1,44 @@
 :host {
     display: flex;
 
+    &.popover-content {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+    }
+
     .mouse-action {
-        ul {
+        .nav {
             border-right: 1px solid #ccc;
+
             li {
                 a {
                     border-top-right-radius: 0;
                     border-bottom-right-radius: 0;
+
+                    &.selected {
+                        font-style: italic;
+                    }
                 }
 
                 &.active {
-                    a:after {
-                        content: '';
-                        display: block;
-                        position: absolute;
-                        width: 0;
-                        height: 0;
-                        top: 0;
-                        right: -4rem;
-                        border-color: transparent transparent transparent #337ab7;
-                        border-style: solid;
-                        border-width: 2rem;
+                    a {
+                        &.selected {
+                            font-style: normal;
+                        }
+
+                        &:after {
+                            content: '';
+                            display: block;
+                            position: absolute;
+                            width: 0;
+                            height: 0;
+                            top: 0;
+                            right: -4rem;
+                            border-color: transparent transparent transparent #337ab7;
+                            border-style: solid;
+                            border-width: 2rem;
+                        }
                     }
                 }
             }

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss

@@ -1,8 +1,8 @@
 button {
     display: inline-block;
-    margin: 0 0 0 .25rem;
+    margin: 0 0 0 0.25rem;
 }
 
 .fa-circle {
-    color:#c00;
+    color: #c00;
 }