Afform - move contentEditable directive into crmUI library for reusability

[civicrm-core.git] / ext / afform / admin / ang / afGuiEditor / afGuiEditorPalette.html

<div id="afGuiEditor-palette-config" class="panel panel-default">
    <ul id="afGuiEditor-palette-tabs" class="panel-heading nav nav-tabs">
      <li role="presentation" ng-class="{active: selectedEntityName === null}">
        <a href ng-click="editor.selectEntity(null)">
          <span>{{:: ts('Form Settings') }}</span>
        </a>
      </li>
      <li role="presentation" ng-repeat="entity in entities" ng-class="{active: selectedEntityName === entity.name}">
        <a href ng-click="editor.selectEntity(entity.name)">
          <span ng-if="!entity.loading && editor.allowEntityConfig" crm-ui-editable ng-model="entity.label">{{ entity.label }}</span>
          <span ng-if="!entity.loading && !editor.allowEntityConfig">{{ entity.label }}</span>
          <i ng-if="entity.loading" class="crm-i fa-spin fa-spinner"></i>
        </a>
      </li>
      <li role="presentation" ng-repeat="(key, searchDisplay) in editor.meta.searchDisplays" ng-class="{active: selectedEntityName === key}">
        <a href ng-click="editor.selectEntity(key)">
          <span>{{ searchDisplay.label }}</span>
        </a>
      </li>
      <li role="presentation" class="dropdown" ng-if="editor.allowEntityConfig">
        <a href class="dropdown-toggle" data-toggle="dropdown" title="{{ ts('Add Entity') }}">
          <span><i class="crm-i fa-plus"></i></span>
        </a>
        <ul class="dropdown-menu">
          <li ng-repeat="(entityName, entity) in editor.meta.entities" ng-if="entity.defaults">
            <a href ng-click="editor.addEntity(entityName, true)">
              <i class="crm-i {{:: entity.icon }}"></i>
              {{:: entity.label }}
            </a>
          </li>
        </ul>
      </li>
    </ul>
  <div class="panel-body" ng-include="'~/afGuiEditor/config-form.html'" ng-if="selectedEntityName === null"></div>
  <div class="panel-body" ng-repeat="entity in entities" ng-if="selectedEntityName === entity.name">
    <af-gui-entity entity="entity"></af-gui-entity>
  </div>
  <div class="panel-body" ng-repeat="(key, searchDisplay) in editor.meta.searchDisplays" ng-if="selectedEntityName === key">
    <af-gui-search display="searchDisplay"></af-gui-search>
  </div>
</div>