ext/afform/admin/ang/afGuiEditor/afGuiEditorCanvas.html

   1 <div class="panel panel-default">
   2   <div class="panel-heading">
   3
   4     <div class="btn-group btn-group-md  pull-right">
   5       <button type="submit" class="btn" ng-class="{'btn-primary': !changesSaved && !saving, 'btn-warning': saving, 'btn-success': changesSaved}" ng-disabled="changesSaved || saving || !afform.title" ng-click="save()">
   6         <i class="crm-i" ng-class="{'fa-check': !saving, 'fa-spin fa-spinner': saving}"></i>
   7         <span ng-if="changesSaved && !saving">{{:: ts('Saved') }}</span>
   8         <span ng-if="!changesSaved && !saving">{{:: ts('Save') }}</span>
   9         <span ng-if="saving">{{:: ts('Saving...') }}</span>
  10       </button>
  11     </div>
  12
  13     <ul class="nav nav-tabs">
  14       <li role="presentation" ng-class="{active: canvasTab === 'layout'}">
  15         <a href ng-click="canvasTab = 'layout'">
  16           <span>{{:: ts('Form Layout') }}</span>
  17         </a>
  18       </li>
  19       <li role="presentation" ng-class="{active: canvasTab === 'markup'}">
  20         <a href ng-click="canvasTab = 'markup'; updateLayoutHtml()">
  21           <span>{{:: ts('Markup') }}</span>
  22         </a>
  23       </li>
  24     </ul>
  25
  26   </div>
  27   <div id="afGuiEditor-canvas-body" class="panel-body" ng-if="canvasTab === 'layout'">
  28     <af-gui-container ng-if="editor.layout" node="editor.layout" entity-name="editor.blockEntity" data-entity="{{ editor.blockEntity }}" ></af-gui-container>
  29   </div>
  30   <div class="panel-body" ng-if="canvasTab === 'markup'">
  31     <p class="help-block">{{:: ts('This is a read-only preview of the auto-generated markup.') }}</p>
  32     <!-- Wiring up edit mode wouldn't be super-hard in itself, but it's not worthwhile until we have validation to ensure that GUI+raw content are exchangeable  -->
  33     <div crm-monaco="{readOnly: true}" ng-model="layoutHtml"></div>
  34   </div>
  35
  36 </div>