editor-refactor #18
@ -1,50 +1,18 @@
|
|||||||
<ion-list>
|
<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-label>Paragraph</ion-label>
|
||||||
</ion-item>
|
</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-label>Database</ion-label>
|
||||||
</ion-item>
|
</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-label>Code Editor</ion-label>
|
||||||
</ion-item>
|
</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-label>Upload Files</ion-label>
|
||||||
</ion-item>
|
</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>
|
</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 {
|
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(
|
constructor(
|
||||||
private popover: PopoverController,
|
private popover: PopoverController,
|
||||||
) { }
|
) { }
|
||||||
|
@ -32,47 +32,10 @@
|
|||||||
<editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
|
<editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
<button class="host-add-button" (click)="onAddClick($event)">
|
||||||
|
<i class="fa fa-plus"></i> Add Node
|
||||||
|
</button>
|
||||||
</div>
|
</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>
|
</ng-container>
|
||||||
</ion-content>
|
</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>
|
</ng-container>
|
||||||
|
@ -20,3 +20,18 @@ ion-icon.invisible {
|
|||||||
color: var(--noded-background-node);
|
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();
|
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) {
|
// buttonIsVisible(index) {
|
||||||
// return this.visibleButtons.includes(index);
|
// return this.visibleButtons.includes(index);
|
||||||
// }
|
// }
|
||||||
|
Loading…
Reference in New Issue
Block a user