Add inline host options button and implement horizontal row

src/app/pages/editor/editor.page.html

@@ -16,10 +16,27 @@
 
   <ion-content>
     <ng-container>
-      <div class="editor-root ion-padding" style="padding: 30px 80px;">
-        <div class="host-container ion-padding">
-          <editor-host #editorHosts *ngFor="let record of hostRecords; let i = index" [record]="hostRecords[i]" (recordChange)="onHostRecordChange($event, i)"
-            (newHostRequested)="onNewHostRequested($event)" (destroyHostRequested)="onDestroyHostRequested($event)"
+      <div class="editor-root ion-padding">
+        <div
+          *ngFor="let record of hostRecords; let i = index"
+          class="host-container ion-padding" style="display: flex;"
+          (mouseenter)="makeVisible(i)"
+          (mouseleave)="makeInvisible(i)"
+        >
+          <ion-button fill="invisible" color="primary" (click)="onOptionsClick($event, i)">
+            <ion-icon
+                    name="options"
+                    color="medium"
+                    [ngClass]="{'invisible': !buttonIsVisible(i)}"
+            ></ion-icon>
+          </ion-button>
+          <editor-host
+            style="width: 100%;"
+            #editorHosts
+            [record]="hostRecords[i]"
+            (recordChange)="onHostRecordChange($event, i)"
+            (newHostRequested)="onNewHostRequested($event)"
+            (destroyHostRequested)="onDestroyHostRequested($event)"
             (saveHostRequested)="onSaveClick()">
           </editor-host>
         </div>

src/app/pages/editor/editor.page.scss

@@ -0,0 +1,7 @@
+ion-icon {
+  transition: all 0.2s linear;
+}
+
+ion-icon.invisible {
+  opacity: 0;
+}

src/app/pages/editor/editor.page.ts

@@ -5,6 +5,7 @@ import {PageService} from '../../service/page.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoadingController, PopoverController} from '@ionic/angular';
 import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component';
+import {HostOptionsComponent} from '../../components/editor/host-options/host-options.component';
 
 @Component({
   selector: 'app-editor',
@@ -15,6 +16,7 @@ export class EditorPage implements OnInit {
   public hostRecords: Array<HostRecord> = [new HostRecord('Click to edit page...')];
   public pageRecord: PageRecord = new PageRecord();
   public pageId: string;
+  public visibleButtons: Array<number> = [];
 
   @ViewChildren('editorHosts') editorHosts;
   @ViewChild('titleBar', {static: false}) titleBar;
@@ -33,6 +35,20 @@ export class EditorPage implements OnInit {
 
   ngOnInit() {}
 
+  buttonIsVisible(index) {
+    return this.visibleButtons.includes(index);
+  }
+
+  makeVisible(index) {
+    if ( !this.buttonIsVisible(index) ) {
+      this.visibleButtons.push(index);
+    }
+  }
+
+  makeInvisible(index) {
+    this.visibleButtons = this.visibleButtons.filter(x => x !== index);
+  }
+
   ionViewDidEnter() {
     if ( this.pageId ) {
       this.pages.load(this.pageId).subscribe(pageRecord => {
@@ -96,7 +112,7 @@ export class EditorPage implements OnInit {
     } else if ( type === 'click_link' ) {
       return 'https://';
     } else if ( type === 'page_sep' ) {
-      return '---';
+      return '===';
     } else {
       return '';
     }
@@ -179,4 +195,27 @@ export class EditorPage implements OnInit {
     });
   }
 
+  async onOptionsClick($event, i) {
+    const popover = await this.popover.create({
+      component: HostOptionsComponent,
+      event: $event,
+      componentProps: {
+        editor: this,
+        index: i,
+        event: $event,
+        hostRecord: this.hostRecords[i],
+      }
+    });
+
+    popover.onDidDismiss().then((result) => {
+      console.log({result});
+      if ( result.data === 'delete_node' ) {
+        $event.record = this.hostRecords[i];
+        this.onDestroyHostRequested($event);
+      }
+    })
+
+    await popover.present();
+  }
+
 }