Re-implement "add node" popover menu with colors

src/app/components/editor/node-picker/node-picker.component.html

@@ -1,50 +1,18 @@
 <ion-list>
-  <ion-item button (click)="onSelect('paragraph')">
+  <ion-item button (click)="onSelect('node')" class="node">
-    <ion-icon slot="start" name="menu"></ion-icon>
+    <i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
     <ion-label>Paragraph</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('header1')">
+  <ion-item button (click)="onSelect('db')" class="db">
-    <ion-icon slot="start" name="alert"></ion-icon>
+    <i class="fa" slot="start" [ngClass]="typeIcons.db"></i>
-    <ion-label>Heading 1</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('header2')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 2</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('header3')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 3</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('header4')">
-    <ion-icon slot="start" name="alert"></ion-icon>
-    <ion-label>Heading 4</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('ul')">
-    <ion-icon slot="start" name="list"></ion-icon>
-    <ion-label>Unordered List</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('block_code')">
-    <ion-icon slot="start" name="information"></ion-icon>
-    <ion-label>Monospace Block</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('click_link')">
-    <ion-icon slot="start" name="link"></ion-icon>
-    <ion-label>Hyperlink</ion-label>
-  </ion-item>
-  <ion-item button (click)="onSelect('database_ref')">
-    <ion-icon slot="start" name="analytics"></ion-icon>
     <ion-label>Database</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('code_ref')">
+  <ion-item button (click)="onSelect('code')" class="code">
-    <ion-icon slot="start" name="code"></ion-icon>
+    <i class="fa" slot="start" [ngClass]="typeIcons.code"></i>
     <ion-label>Code Editor</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('file_ref')">
+  <ion-item button (click)="onSelect('files')" class="files">
-    <ion-icon slot="start" name="document"></ion-icon>
+    <i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
     <ion-label>Upload Files</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('page_sep')">
-    <ion-icon slot="start" name="remove"></ion-icon>
-    <ion-label>Horizontal Row</ion-label>
-  </ion-item>
 </ion-list>

src/app/components/editor/node-picker/node-picker.component.scss

@@ -0,0 +1,21 @@
+i {
+  min-width: 21px;
+}
+
+.node {
+  i {
+    color: var(--noded-background-node);
+  }
+}
+
+.db {
+  i {
+    color: var(--noded-background-db);
+  }
+}
+
+.code {
+  i {
+    color: var(--noded-background-code);
+  }
+}

src/app/components/editor/node-picker/node-picker.component.ts

@@ -8,6 +8,15 @@ import {PopoverController} from '@ionic/angular';
 })
 export class NodePickerComponent implements OnInit {
 
+  public typeIcons = {
+    branch: 'fa fa-folder',
+    node: 'fa fa-quote-left',
+    norm: 'fa fa-quote-left',
+    page: 'fa fa-sticky-note',
+    db: 'fa fa-database',
+    code: 'fa fa-code',
+  };
+
   constructor(
       private popover: PopoverController,
   ) { }

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

@@ -32,47 +32,10 @@
             <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
           </ng-container>
         </div>
+        <button class="host-add-button" (click)="onAddClick($event)">
+          <i class="fa fa-plus"></i> Add Node
+        </button>
       </div>
-<!--      <div class="editor-root ion-padding">-->
-<!--        <div class="host-container" style="display: flex;">-->
-<!--          <editor-norm style="flex: 1;"></editor-norm>-->
-<!--        </div>-->
-<!--      </div>-->
     </ng-container>
   </ion-content>
-
-<!--  <ion-content (keydown)="onEditorKeydown($event)">-->
-<!--    <ng-container>-->
-<!--      <div class="editor-root ion-padding">-->
-<!--        <div-->
-<!--          *ngFor="let record of hostRecords; let i = index"-->
-<!--          class="host-container" style="display: flex;"-->
-<!--          (mouseenter)="makeVisible(i)"-->
-<!--          (mouseleave)="makeInvisible(i)"-->
-<!--        >-->
-<!--          <ion-button fill="invisible" color="primary" (click)="onOptionsClick($event, i)" *ngIf="pageRecord.level !== 'view'">-->
-<!--            <ion-icon-->
-<!--                    name="options"-->
-<!--                    color="medium"-->
-<!--                    [ngClass]="{'invisible': !buttonIsVisible(i)}"-->
-<!--            ></ion-icon>-->
-<!--          </ion-button>-->
-<!--          <editor-host-->
-<!--            style="width: 100%;"-->
-<!--            #editorHosts-->
-<!--            [page]="pageRecord"-->
-<!--            [record]="hostRecords[i]"-->
-<!--            (recordChange)="onHostRecordChange($event, i)"-->
-<!--            (newHostRequested)="onNewHostRequested($event)"-->
-<!--            (destroyHostRequested)="onDestroyHostRequested($event)"-->
-<!--            (saveHostRequested)="onSaveClick()">-->
-<!--          </editor-host>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <div class="editor-buttons" style="margin-bottom: 50px;" *ngIf="pageRecord.level !== 'view'">-->
-<!--        <ion-button (click)="onAddClick($event)" class="ion-padding ion-margin-start" fill="outline" color="medium">Add Node</ion-button>-->
-<!--        <ion-button (click)="onSaveClick()" class="ion-padding" fill="outline" color="medium">Save</ion-button>-->
-<!--      </div>-->
-<!--    </ng-container>-->
-<!--  </ion-content>-->
 </ng-container>

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

@@ -20,3 +20,18 @@ ion-icon.invisible {
     color: var(--noded-background-node);
   }
 }
+
+.host-add-button {
+  margin-top: 50px;
+  text-align: center;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid lightgrey;
+  color: darkgrey;
+  border-radius: 5px;
+
+  &:hover {
+    border: 1px solid darkgrey;
+    color: #4d4d4d;
+  }
+}

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

@@ -82,6 +82,39 @@ export class EditorPage implements OnInit {
     await popover.present();
   }
 
+  async onAddClick(event: MouseEvent) {
+    if ( !this.editorService.canEdit() ) {
+      return;
+    }
+
+    const popover = await this.popover.create({
+      component: NodePickerComponent,
+      event,
+    });
+
+    // popover.onDidDismiss().then(arg => {
+    //   const defValue = this.getDefaultValue(arg.data);
+    //   const hostRec = new HostRecord(defValue);
+    //   hostRec.type = arg.data;
+    //   hostRec.PageId = this.pageRecord.UUID;
+    //
+    //   if ( hostRec.type === 'ul' ) {
+    //     hostRec.value = JSON.stringify([{value: '', indentationLevel: 0}]);
+    //   }
+    //
+    //   this.hostRecords.push(hostRec);
+    //   if ( hostRec.isNorm() ) {
+    //     setTimeout(() => {
+    //       this.editorHosts.toArray().reverse()[0].takeFocus();
+    //     }, 0);
+    //   } else {
+    //     this.onSaveClick();
+    //   }
+    // });
+
+    await popover.present();
+  }
+
   // buttonIsVisible(index) {
   //   return this.visibleButtons.includes(index);
   // }