Remove placeholder in keymap-tab

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

@@ -1,4 +1,8 @@
-<div>
+<template [ngIf]="keymapOptions.length === 0">
+    <span> No keymaps are available to choose from. Create a keymap first! </span>
+</template>
+<template [ngIf]="keymapOptions.length > 0">
+    <div>
         <b>Switch to keymap:</b>
         <select2
                 [data]="keymapOptions"
@@ -6,12 +10,13 @@
                 (valueChanged)="onChange($event)"
                 [width]="'100%'"
         ></select2>
-</div>
+    </div>
-<div>
+    <div>
         <div class="empty" *ngIf="!selectedKeymap?.abbreviation">
             <img src="./images/base-layer--blank.svg">
         </div>
         <svg-keyboard *ngIf="selectedKeymap?.abbreviation"
                     [moduleConfig]="selectedKeymap.layers[0].modules">
         </svg-keyboard>
-</div>
+    </div>
+</template>

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

@@ -2,6 +2,10 @@
     display: flex;
     flex-direction: column;
 
+    > span {
+        text-align: center;
+    }
+
     > div {
         display: flex;
         margin-top: 2px;

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

@@ -31,15 +31,9 @@ export class KeymapTabComponent implements OnInit, Tab {
                     text: keymap.name
                 };
             });
-
+        if (this.keymaps.length > 0) {
-        this.keymapOptions = [
+            this.selectedKeymap = this.keymaps[0];
-            {
+        }
-                id: '-1',
-                text: 'Switch to keymap'
-            },
-            ...this.keymapOptions
-        ];
-
         this.fromKeyAction(this.defaultKeyAction);
     }