Start new WYSIWYG node editor
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
35eb824b45
commit
8a9f6d508e
@ -0,0 +1,32 @@
|
||||
import PageRecord from '../../structures/PageRecord';
|
||||
|
||||
export abstract class EditorNodeContract {
|
||||
protected pageRec!: PageRecord;
|
||||
protected nodeRec!: any; // TODO
|
||||
|
||||
get page() {
|
||||
return this.pageRec;
|
||||
}
|
||||
|
||||
set page(page: PageRecord) {
|
||||
this.pageRec = page;
|
||||
}
|
||||
|
||||
get identifier() {
|
||||
return this.nodeRec.UUID;
|
||||
}
|
||||
|
||||
public abstract isDirty(): boolean | Promise<boolean>;
|
||||
|
||||
public needsSave(): boolean | Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
public needsLoad(): boolean | Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
|
||||
public performSave(): void | Promise<void> {}
|
||||
|
||||
public performLoad(): void | Promise<void> {}
|
||||
}
|
@ -0,0 +1,66 @@
|
||||
<div class="container"
|
||||
(focusin)="onFocusIn($event)"
|
||||
(focusout)="onFocusOut($event)">
|
||||
<div class="toolbar-base" *ngIf="isFocused">
|
||||
<div class="toolbar-button" title="Bold">
|
||||
<i class="icon fa fa-bold"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Italic">
|
||||
<i class="icon fa fa-italic"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Underline">
|
||||
<i class="icon fa fa-underline"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Strikethrough">
|
||||
<i class="icon fa fa-strikethrough"></i>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-sep"></div>
|
||||
|
||||
<div class="toolbar-button" title="Align Right">
|
||||
<i class="icon fa fa-align-right"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Align Center">
|
||||
<i class="icon fa fa-align-center"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Align Left">
|
||||
<i class="icon fa fa-align-left"></i>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-sep"></div>
|
||||
|
||||
<div class="toolbar-button" title="Undo">
|
||||
<i class="icon fa fa-undo"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Redo">
|
||||
<i class="icon fa fa-redo"></i>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-sep"></div>
|
||||
|
||||
<div class="toolbar-button" title="Increase Heading Level">
|
||||
<i class="icon fa fa-heading"></i>
|
||||
<i class="icon fa fa-long-arrow-alt-up"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Decrease Heading Level">
|
||||
<i class="icon fa fa-heading"></i>
|
||||
<i class="icon fa fa-long-arrow-alt-down"></i>
|
||||
</div>
|
||||
<div class="toolbar-button" title="Format Monospace">
|
||||
<i class="icon fa fa-code"></i>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-sep"></div>
|
||||
|
||||
<div class="toolbar-button" title="Begin Bulleted List">
|
||||
<i class="icon fa fa-list-ul"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="editable-base"
|
||||
[ngClass]="isFocused ? 'focused' : ''"
|
||||
contenteditable
|
||||
>
|
||||
Content editable!
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,33 @@
|
||||
.editable-base {
|
||||
padding: 20px;
|
||||
background: aliceblue; // TODO temporary
|
||||
}
|
||||
|
||||
.toolbar-base {
|
||||
height: 40px;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.toolbar-button {
|
||||
height: calc(100% - 6px);
|
||||
min-width: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 3px;
|
||||
|
||||
&:hover {
|
||||
background: lightgrey;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-sep {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
border: 1px solid lightgrey;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
@ -0,0 +1,23 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {EditorNodeContract} from '../EditorNode.contract';
|
||||
|
||||
@Component({
|
||||
selector: 'editor-norm',
|
||||
templateUrl: './norm.component.html',
|
||||
styleUrls: ['./norm.component.scss'],
|
||||
})
|
||||
export class NormComponent extends EditorNodeContract {
|
||||
public isFocused = false;
|
||||
|
||||
public isDirty(): boolean | Promise<boolean> {
|
||||
return false; // TODO implement
|
||||
}
|
||||
|
||||
onFocusIn(event: MouseEvent) {
|
||||
this.isFocused = true;
|
||||
}
|
||||
|
||||
onFocusOut(event: MouseEvent) {
|
||||
this.isFocused = false;
|
||||
}
|
||||
}
|
@ -1,47 +1,61 @@
|
||||
<ng-container>
|
||||
<ion-header (keydown)="onEditorKeydown($event)">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button></ion-menu-button>
|
||||
</ion-buttons>
|
||||
<ion-title #titleBar>
|
||||
<div contenteditable="true"> {{ pageRecord.Name }} </div>
|
||||
<ion-input
|
||||
[(ngModel)]="pageName"
|
||||
placeholder="Click to edit page name..."
|
||||
class="title-input"
|
||||
></ion-input>
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content (keydown)="onEditorKeydown($event)">
|
||||
<ion-content>
|
||||
<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 class="host-container" style="display: flex;">
|
||||
<editor-norm style="flex: 1;"></editor-norm>
|
||||
</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>
|
||||
|
||||
<!-- <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>
|
||||
|
Loading…
Reference in new issue