< 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 >