You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
frontend/src/app/pages/editor/editor.page.html

90 lines
4.3 KiB

<ng-container>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title #titleBar>
<div style="display: flex; flex-direction: row;">
<i *ngIf="editorService.currentPageType" [ngClass]="typeIcons[editorService.currentPageType]" style="font-size: 18pt; margin: auto 10px;"></i>
<ion-input
style="flex: 1;"
[(ngModel)]="editorService.mutablePageName"
[readonly]="!editorService.canEdit()"
placeholder="Click to edit page name..."
class="title-input"
></ion-input>
</div>
</ion-title>
<ion-buttons slot="end" class="no-print">
<button
class="save-button"
(click)="editorService.triggerSave()"
title="Manually save this note"
*ngIf="editorService.isEditing && editorService.canEdit()"
>
<i *ngIf="!(editorService.isSaving || editorService.willSave)" class="fa fa-check-circle"></i>
{{ (editorService.isSaving || editorService.willSave) ? 'Saving...' : 'Saved!' }}
</button>
<button
*ngIf="editorService.isEditing && editorService.canEdit() && !isFilloutMode"
title="More page options"
(click)="onPageMenuClick($event)"
class="clear-btn"
style="padding: 10px;"
>
<i class="fa fa-ellipsis-v"></i>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ng-container *ngIf="editorService.notAvailable">
<div class="editor-root ion-padding" style="text-align: center; padding-top: 100px; color: #494949; font-size: 1.2em;">
Sorry, this page is not available offline yet.
</div>
</ng-container>
<ng-container *ngIf="!editorService.notAvailable">
<div class="editor-root ion-padding">
<div
class="host-container"
style="display: flex; margin-bottom: 20px;"
*ngFor="let node of editorService.immutableNodes"
>
<div class="host-icons" *ngIf="!isFilloutMode">
<i class="type-icon fa no-print" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : (node.isForm() ? 'form-input ' + node.type : node.type))"></i>
<button (click)="onOptionsClick($event, node)" *ngIf="editorService.canEdit()" class="clear-btn no-print">
<i class="fa fa-ellipsis-v" title="Node options"></i>
</button>
</div>
<ng-container *ngIf="node.isNorm()">
<editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-norm>
</ng-container>
<ng-container *ngIf="node.type === 'markdown'">
<editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-markdown>
</ng-container>
<ng-container *ngIf="node.type === 'database_ref'">
<editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-database>
</ng-container>
<ng-container *ngIf="node.type === 'code_ref'">
<editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-code>
</ng-container>
<ng-container *ngIf="node.type === 'file_ref'">
<editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-files>
</ng-container>
<ng-container *ngIf="node.type === 'file_box'">
<editor-file-box style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-file-box>
</ng-container>
<ng-container *ngIf="node.isForm()">
<editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-node-form-input>
</ng-container>
</div>
<button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button no-print" (click)="onAddClick($event)">
<i class="fa fa-plus"></i> Add Node
</button>
</div>
</ng-container>
</ion-content>
</ng-container>