editor-refactor #18
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
@ -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,
|
||||
) { }
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
// }
|
||||
|
Loading…
Reference in New Issue
Block a user