frontend/src/app/pages/editor/editor.page.html

<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">
        <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" [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">
              <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"></editor-norm>
          </ng-container>
          <ng-container *ngIf="node.type === 'markdown'">
            <editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-markdown>
          </ng-container>
          <ng-container *ngIf="node.type === 'database_ref'">
            <editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-database>
          </ng-container>
          <ng-container *ngIf="node.type === 'code_ref'">
            <editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-code>
          </ng-container>
          <ng-container *ngIf="node.type === 'file_ref'">
            <editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-files>
          </ng-container>
          <ng-container *ngIf="node.isForm()">
            <editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-node-form-input>
          </ng-container>
        </div>
        <button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">
          <i class="fa fa-plus"></i> Add Node
        </button>
      </div>
    </ng-container>
  </ion-content>
</ng-container>