GUI - simplify menus; only add items from palette

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index 7848835d6ab0548100e7b6566b8ba24a61ccdf16..139f45a3bb9959e86e8cd1ac9d1d70ea2261901c 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -124,9 +124,6 @@
   opacity: 1;
   transition: opacity .2s;
 }
-#afGuiEditor-canvas-body > div > .af-gui-bar {
-  top: -5px;
-}
 
 #afGuiEditor .af-gui-bar .btn.active {
   background-color: #b3b3b3;
@@ -221,12 +218,6 @@
   left: 4px;
   top: 5px;
 }
-#afGuiEditor #afGuiEditor-canvas .af-gui-add-canvas-button {
-  border: 2px dashed #0071bd;
-  color: #0071bd;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
 #afGuiEditor .af-gui-add-element-button span {
   display: inline-block;
   width: 18px;

diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 37336c281055cec3e3001507a04c41fa4f82bdfe..43fae53d2971852edf8fdd869040ebec94751ecc 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -444,25 +444,6 @@
         $scope.editor = ctrls[0];
         $scope.parentContainer = ctrls[1];
 
-        $scope.addElement = function(type, props) {
-          var classes = type.split('.');
-          var element = _.defaults({
-            '#tag': classes.shift(),
-            'class': classes.join(' '),
-          }, props);
-          if (_.includes(classes, 'af-container')) {
-            element['#children'] = [];
-          } else if (_.intersection(classes, ['af-text', 'af-button']).length) {
-            element['#children'] = [{'#text': ts('Enter text')}];
-          }
-          var children = $scope.getSetChildren();
-          if (children) {
-            // Add it to the top, underneath the fieldset legend if present
-            var pos = children.length && children[0]['#tag'] === 'legend' ? 1 : 0;
-            children.splice(pos, 0, element);
-          }
-        };
-
         $scope.isSelectedFieldset = function(entityName) {
           return entityName === $scope.editor.getSelectedEntityName();
         };

diff --git a/ext/afform/gui/ang/afGuiEditor/canvas-menu.html b/ext/afform/gui/ang/afGuiEditor/canvas-menu.html
deleted file mode 100644 (file)
index 9d1932c..0000000
--- a/ext/afform/gui/ang/afGuiEditor/canvas-menu.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<li><a href ng-click="addElement('div.af-container')">{{ ts('Add container') }}</a></li>
-<li><a href ng-click="addElement('p.af-text')">{{ ts('Add text box') }}</a></li>
-<li><a href ng-click="addElement('div.af-markup', {'#markup': false})">{{ ts('Add rich content') }}</a></li>
-<li><a href ng-click="addElement('button.af-button.btn-primary', {'crm-icon': 'fa-check', 'ng-click': 'afform.submit()'})">{{ ts('Add button') }}</a></li>
-<li role="separator" class="divider"></li>
-<li ng-repeat="entity in editor.scope.entities">
-  <a href ng-click="addElement('fieldset.af-container', {'af-fieldset': entity.name})">{{ ts('Fieldset for %1', {1: entity.label}) }}</a>
-</li>

diff --git a/ext/afform/gui/ang/afGuiEditor/container-menu.html b/ext/afform/gui/ang/afGuiEditor/container-menu.html
index 44d25ba239339f39f2508ef86456e4780d9a05b8..9dcf83487a7ef18d0eebde7ab18397fd17f1f576 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/container-menu.html
+++ b/ext/afform/gui/ang/afGuiEditor/container-menu.html
@@ -1,8 +1,3 @@
-<li><a href ng-click="addElement('div.af-container')">{{ ts('Add container') }}</a></li>
-<li><a href ng-click="addElement('p.af-text')">{{ ts('Add text box') }}</a></li>
-<li><a href ng-click="addElement('div.af-markup', {'#markup': false})">{{ ts('Add rich content') }}</a></li>
-<li><a href ng-click="addElement('button.af-button.btn-primary', {'crm-icon': 'fa-check', 'ng-click': 'afform.submit()'})">{{ ts('Add button') }}</a></li>
-<li role="separator" class="divider"></li>
 <li ng-if="!node['af-fieldset'] && !block.layout"><a href ng-click="saveBlock()">{{ ts('Save as block') }}</a></li>
 <li ng-if="!node['af-fieldset'] && !block.layout" role="separator" class="divider"></li>
 <li ng-if="tags[node['#tag']]">

diff --git a/ext/afform/gui/ang/afGuiEditor/container.html b/ext/afform/gui/ang/afGuiEditor/container.html
index 31c30b4715e34db4dcf309bf571798003b0522cd..450b6501d7dd7829b3ea83f5a2d2ff51b1015bb3 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/container.html
+++ b/ext/afform/gui/ang/afGuiEditor/container.html
@@ -8,20 +8,12 @@
       <option ng-value="option.id" ng-repeat="option in block.options track by option.id">{{ option.text }}</option>
     </select>
     <button type="button" class="btn btn-default btn-xs" ng-if="block && !block.layout" ng-click="saveBlock()">{{ ts('Save...') }}</button>
-    <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-element-button pull-right" data-toggle="dropdown" title="{{ ts('Add Element') }}">
-      <span><i class="crm-i fa-plus"></i></span>
+    <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-element-button pull-right" data-toggle="dropdown" title="{{ ts('Configure') }}">
+      <span><i class="crm-i fa-gear"></i></span>
     </button>
     <ul class="dropdown-menu dropdown-menu-right" ng-if="menu.open" ng-include="'~/afGuiEditor/container-menu.html'"></ul>
   </div>
 </div>
-<div class="af-gui-bar" ng-if="node['#tag'] === 'af-form'" >
-  <div class="form-inline pull-right" af-gui-menu>
-    <button type="button" class="btn  btn-default btn-sm dropdown-toggle af-gui-add-canvas-button" data-toggle="dropdown" title="{{ ts('Add Element') }}">
-      <span>Add <i class="crm-i fa-plus"></i></span>
-    </button>
-    <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/canvas-menu.html'"></ul>
-  </div>
-</div>
 <div ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]', cancel: 'input,textarea,button,select,option,a,.dropdown-menu', placeholder: 'af-gui-dropzone', containment: '#afGuiEditor-canvas-body'}" ui-sortable-update="editor.onDrop" ng-model="getSetChildren" ng-model-options="{getterSetter: true}" class="af-gui-layout {{ getLayout() }}">
   <div ng-repeat="item in getSetChildren()" >
     <div ng-switch="container.getNodeType(item)">