Remove placeholder in macro-tab

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

@@ -1,13 +1,16 @@
-<div class="macro-selector">
+<template [ngIf]="macroOptions.length === 0">
-    <b> Play macro: </b>
+    <span> No macros are available to choose from. Create a macro first! </span>
-    <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
+</template>
-</div>
+<template [ngIf]="macroOptions.length > 0">
-<div class="macro-action-container" [class.inactive]="selectedMacroIndex === -1">
+    <div class="macro-selector">
-    <template [ngIf]="selectedMacroIndex >= 0">
+        <b> Play macro: </b>
-      <div class="list-group"> 
+        <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
-        <macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions"
+    </div>
-                    [macroAction]="macroAction" [editable]="false">
+    <div class="macro-action-container">
-        </macro-item>
+        <div class="list-group">
-      </div>
+            <macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions"
-    </template>
+                        [macroAction]="macroAction" [editable]="false">
-</div>
+            </macro-item>
+        </div>
+    </div>
+</template>

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

@@ -2,6 +2,10 @@
     display: flex;
     flex-direction: column;
 
+    > span {
+        text-align: center;
+    }
+
     .macro-selector {
         display: flex;
         margin-top: 2px;
@@ -28,10 +32,6 @@
         border-radius: 4px;
         border: 1px solid #ddd;
 
-        &.inactive {
-            border: 0;
-        }
-
         .list-group {
             margin-bottom: 0;
             border: 0;

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

@@ -31,21 +31,16 @@ export class MacroTabComponent implements OnInit, OnDestroy, Tab {
         this.subscription = store.let(getMacroEntities())
             .subscribe((macros: Macro[]) => this.macros = macros);
         this.macroOptions = [];
-        this.selectedMacroIndex = -1;
+        this.selectedMacroIndex = 0;
     }
 
     ngOnInit() {
-        this.macroOptions.push({
+        this.macroOptions = this.macros.map(function (macro: Macro): Select2OptionData {
-            id: '-1',
-            text: 'Select macro'
-        });
-
-        this.macroOptions = this.macroOptions.concat(this.macros.map(function (macro: Macro): Select2OptionData {
             return {
                 id: macro.id.toString(),
                 text: macro.name
             };
-        }));
+        });
         this.fromKeyAction(this.defaultKeyAction);
     }