From 5f535e6c13029379818d1668064fa87f1d148101 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 6 Nov 2019 08:29:09 -0500
Subject: [PATCH] GUI: Add block button

---
 ext/afform/gui/ang/afGuiEditor.css        | 16 +++++++++++++++-
 ext/afform/gui/ang/afGuiEditor.js         | 10 ++++++++++
 ext/afform/gui/ang/afGuiEditor/block.html | 23 ++++++++++++++++-------
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index 8047a19184..fd02507575 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -88,7 +88,10 @@
 }
 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar {
   background-color: #0071bd;
-  visibility: visible;
+  opacity: 1;
+  transition: opacity 0s;
+}
+#afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > span {
   color: white;
 }
 
@@ -134,6 +137,17 @@
   top: 5px;
 }
 
+#afGuiEditor .af-gui-add-block-button span {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px dashed grey;
+}
+#afGuiEditor .af-gui-add-block-button span i {
+  position: relative;
+  top: -3px;
+}
+
 #afGuiEditor .af-gui-layout-icon {
   width: 12px;
   height: 11px;
diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 05a60c422d..ecbdeddf6e 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -276,6 +276,7 @@
       require: '^^afGuiEditor',
       link: function($scope, element, attrs, editor) {
         $scope.editor = editor;
+        $scope.ts = CRM.ts();
       },
       controller: function($scope) {
         $scope.block = this;
@@ -312,6 +313,15 @@
           return null;
         };
 
+        $scope.addBlock = function(type) {
+          var newBlock = {
+            '#tag': type === 'text' ? 'p' : 'div',
+            'class': 'af-' + type,
+            '#children': type == 'block' ? [] : [{'#text': ts('Enter text')}]
+          };
+          $scope.node['#children'].push(newBlock);
+        };
+
         $scope.isSelectedFieldset = function(entityName) {
           return entityName === $scope.editor.getSelectedEntity();
         };
diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/block.html
index 64570cc63a..45d6c3d750 100644
--- a/ext/afform/gui/ang/afGuiEditor/block.html
+++ b/ext/afform/gui/ang/afGuiEditor/block.html
@@ -1,13 +1,22 @@
 <div class="af-gui-bar" ng-if="node['#tag'] != 'af-form'" ng-click="selectEntity()" >
   <span ng-if="block.getNodeType(node) == 'fieldset'">{{ editor.getEntity(entityName).label }}</span>
-  {{ node['#tag'] }}
-  <select class="pull-right" ng-model="node['#tag']">
-    <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
-  </select>
-  <div class="btn-group btn-group-xs pull-right" role="group">
-    <button type="button" class="btn btn-default" ng-class="{active: opt === getLayout()}" ng-repeat="(opt, label) in layouts" ng-click="setLayout(opt)" title="{{ label }}">
-      <i class="af-gui-layout-icon {{ opt }}" ></i>
+  <span>{{ node['#tag'] }}</span>
+  <div class="form-inline pull-right">
+    <div class="btn-group btn-group-xs" role="group">
+      <button type="button" class="btn btn-default" ng-class="{active: opt === getLayout()}" ng-repeat="(opt, label) in layouts" ng-click="setLayout(opt)" title="{{ label }}">
+        <i class="af-gui-layout-icon {{ opt }}" ></i>
+      </button>
+    </div>
+    <select ng-model="node['#tag']">
+      <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
+    </select>
+    <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Add block') }}">
+      <span><i class="crm-i fa-plus"></i></span>
     </button>
+    <ul class="dropdown-menu">
+      <li><a href ng-click="addBlock('block')">{{ ts('Add block/fieldset') }}</a></li>
+      <li><a href ng-click="addBlock('text')">{{ ts('Add text box') }}</a></li>
+    </ul>
   </div>
 </div>
 <div ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]'}" ng-model="node['#children']" class="af-gui-layout {{ getLayout() }}">
-- 
2.25.1