Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Re-implement "add node" popover menu with colors
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills 2020-10-13 22:59:15 -05:00
parent b0cf07ab49
commit 0a6a775fdb
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
6 changed files with 89 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/components/editor/node-picker/node-picker.component.html
View File

@ -1,50 +1,18 @@
<ion-list>
<ion-item button (click)="onSelect('paragraph')">
<ion-icon slot="start" name="menu"></ion-icon>
<ion-item button (click)="onSelect('node')" class="node">
<i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
<ion-label>Paragraph</ion-label>
</ion-item>
<ion-item button (click)="onSelect('header1')">
<ion-icon slot="start" name="alert"></ion-icon>
<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-item button (click)="onSelect('db')" class="db">
<i class="fa" slot="start" [ngClass]="typeIcons.db"></i>
<ion-label>Database</ion-label>
</ion-item>
<ion-item button (click)="onSelect('code_ref')">
<ion-icon slot="start" name="code"></ion-icon>
<ion-item button (click)="onSelect('code')" class="code">
<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-icon slot="start" name="document"></ion-icon>
<ion-item button (click)="onSelect('files')" class="files">
<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>

21
src/app/components/editor/node-picker/node-picker.component.scss
View File

@ -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);
}
}

9
src/app/components/editor/node-picker/node-picker.component.ts
View File

@ -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,
) { }

43
src/app/pages/editor/editor.page.html
View File

@ -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>

15
src/app/pages/editor/editor.page.scss
View File

@ -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;
}
}

33
src/app/pages/editor/editor.page.ts
View File

@ -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);
// }