From a2854e2e50160f4a04b593da6559ea5fd4f8f1ee Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 25 Oct 2019 12:01:48 -0400
Subject: [PATCH] Horizontal tabs

---
 ext/afform/gui/ang/afGuiEditor.css            | 10 -----
 ext/afform/gui/ang/afGuiEditor.js             | 44 +++++++++++++++++++
 .../gui/ang/afGuiEditor/config-entity.html    |  4 +-
 ext/afform/gui/ang/afGuiEditor/palette.html   | 43 ++++++++----------
 4 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index e6464c1b56..6231149144 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -9,7 +9,6 @@
 #afGuiEditor-main #afGuiEditor-palette {
   flex: 1;
   margin-right: 5px;
-  box-shadow: 0 3px 18px 0 rgba(48,40,40,0.25);
 }
 
 #afGuiEditor-main #afGuiEditor-canvas {
@@ -17,13 +16,6 @@
   margin-left: 5px;
 }
 
-#afGuiEditor-main #afGuiEditor-palette-tabs {
-  width: 110px;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
 #afGuiEditor-main #afGuiEditor-palette-tabs li > a {
   padding: 10px 15px;
   font-size: 12px;
@@ -35,6 +27,4 @@
 }
 
 #afGuiEditor-main #afGuiEditor-palette-config {
-  margin-left: 110px;
-  box-shadow: none;
 }
diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 14866eb500..6c58bd8214 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -95,4 +95,48 @@
     return indexBy ? _.indexBy(items, indexBy) : items;
   }
 
+  // Editable titles using ngModel & html5 contenteditable
+  angular.module('afGuiEditor').directive("afGuiEditable", function() {
+    return {
+      restrict: "A",
+      require: "ngModel",
+      link: function(scope, element, attrs, ngModel) {
+        var ts = CRM.ts();
+
+        function read() {
+          var htmlVal = element.html();
+          if (!htmlVal) {
+            htmlVal = ts('Unnamed');
+            element.html(htmlVal);
+          }
+          ngModel.$setViewValue(htmlVal);
+        }
+
+        ngModel.$render = function() {
+          element.html(ngModel.$viewValue || ' ');
+        };
+
+        // Special handling for enter and escape keys
+        element.on('keydown', function(e) {
+          // Enter: prevent line break and save
+          if (e.which === 13) {
+            e.preventDefault();
+            element.blur();
+          }
+          // Escape: undo
+          if (e.which === 27) {
+            element.html(ngModel.$viewValue || ' ');
+            element.blur();
+          }
+        });
+
+        element.on("blur change", function() {
+          scope.$apply(read);
+        });
+
+        element.attr('contenteditable', 'true').addClass('crm-editable-enabled');
+      }
+    };
+  });
+
 })(angular, CRM.$, CRM._);
diff --git a/ext/afform/gui/ang/afGuiEditor/config-entity.html b/ext/afform/gui/ang/afGuiEditor/config-entity.html
index b80e6e0678..bc9dd7f351 100644
--- a/ext/afform/gui/ang/afGuiEditor/config-entity.html
+++ b/ext/afform/gui/ang/afGuiEditor/config-entity.html
@@ -1,3 +1,5 @@
 <div>
-
+  <a href ng-if="selectedEntity !== null" ng-click="removeEntity(selectedEntity)" class="btn btn-sm btn-danger pull-right">
+    <i class="crm-i fa-trash"></i>
+  </a>
 </div>
diff --git a/ext/afform/gui/ang/afGuiEditor/palette.html b/ext/afform/gui/ang/afGuiEditor/palette.html
index 61db37a138..fd7418b359 100644
--- a/ext/afform/gui/ang/afGuiEditor/palette.html
+++ b/ext/afform/gui/ang/afGuiEditor/palette.html
@@ -1,29 +1,24 @@
-<ul id="afGuiEditor-palette-tabs" class="nav nav-pills nav-stacked">
-  <li role="presentation" ng-class="{active: selectedEntity === null}">
-    <a href ng-click="selectEntity(null)">{{ ts('Form Settings') }}</a>
-  </li>
-  <li role="presentation" ng-repeat="entity in entities" ng-class="{active: selectedEntity === entity.name}">
-    <a href ng-click="selectEntity(entity.name)">{{ entity.label }}</a>
-  </li>
-  <li role="presentation" class="dropdown">
-    <a href class="dropdown-toggle" data-toggle="dropdown">
-      <i class="crm-i fa-plus"></i>
-    </a>
-    <ul class="dropdown-menu">
-      <li ng-repeat="entity in meta.entities">
-        <a href ng-click="addEntity(entity.name)">{{ entity.name }}</a>
+<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: selectedEntity === null}">
+        <a href ng-click="selectEntity(null)">{{ ts('Form Settings') }}</a>
+      </li>
+      <li role="presentation" ng-repeat="entity in entities" ng-class="{active: selectedEntity === entity.name}">
+        <a href ng-click="selectEntity(entity.name)">
+          <span af-gui-editable ng-model="entity.label">{{ entity.label }}</span>
+        </a>
+      </li>
+      <li role="presentation" class="dropdown">
+        <a href class="dropdown-toggle" data-toggle="dropdown">
+          <i class="crm-i fa-plus"></i>
+        </a>
+        <ul class="dropdown-menu">
+          <li ng-repeat="entity in meta.entities">
+            <a href ng-click="addEntity(entity.name)">{{ entity.name }}</a>
+          </li>
+        </ul>
       </li>
     </ul>
-  </li>
-</ul>
-<div id="afGuiEditor-palette-config" class="panel panel-default">
-  <div class="panel-heading">
-    <span ng-if="selectedEntity === null">{{ ts('Form Settings') }}</span>
-    <span ng-if="selectedEntity !== null">{{ entities[selectedEntity].label }}</span>
-    <a href ng-if="selectedEntity !== null" ng-click="removeEntity(selectedEntity)" class="pull-right">
-      <i class="crm-i fa-trash"></i>
-    </a>
-  </div>
   <div class="panel-body" ng-include="'~/afGuiEditor/config-form.html'" ng-if="selectedEntity === null"></div>
   <div class="panel-body" ng-include="'~/afGuiEditor/config-entity.html'" ng-if="selectedEntity !== null"></div>
 </div>
-- 
2.25.1