diff --git a/src/app/components/editor/node-picker/node-picker.component.html b/src/app/components/editor/node-picker/node-picker.component.html
index b14eb8d..0c2183f 100644
--- a/src/app/components/editor/node-picker/node-picker.component.html
+++ b/src/app/components/editor/node-picker/node-picker.component.html
@@ -1,50 +1,18 @@
-
-
+
+
Paragraph
-
-
- Heading 1
-
-
-
- Heading 2
-
-
-
- Heading 3
-
-
-
- Heading 4
-
-
-
- Unordered List
-
-
-
- Monospace Block
-
-
-
- Hyperlink
-
-
-
+
+
Database
-
-
+
+
Code Editor
-
-
+
+
Upload Files
-
-
- Horizontal Row
-
diff --git a/src/app/components/editor/node-picker/node-picker.component.scss b/src/app/components/editor/node-picker/node-picker.component.scss
index e69de29..36c2c84 100644
--- a/src/app/components/editor/node-picker/node-picker.component.scss
+++ b/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);
+ }
+}
diff --git a/src/app/components/editor/node-picker/node-picker.component.ts b/src/app/components/editor/node-picker/node-picker.component.ts
index d65146e..8505c05 100644
--- a/src/app/components/editor/node-picker/node-picker.component.ts
+++ b/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,
) { }
diff --git a/src/app/pages/editor/editor.page.html b/src/app/pages/editor/editor.page.html
index 0fbd1d3..7dc4619 100644
--- a/src/app/pages/editor/editor.page.html
+++ b/src/app/pages/editor/editor.page.html
@@ -32,47 +32,10 @@
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/pages/editor/editor.page.scss b/src/app/pages/editor/editor.page.scss
index e3d4498..2b11663 100644
--- a/src/app/pages/editor/editor.page.scss
+++ b/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;
+ }
+}
diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts
index 96fe5cb..b7dc3dd 100644
--- a/src/app/pages/editor/editor.page.ts
+++ b/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);
// }