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
6 changed files with 89 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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