GUI configure form buttons

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index fd025075751f19ccd2d86ab68611c8b7a1c4fe8d..2665fecc586e38c5a5a4b3a1f3994ef2afc99945 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -74,15 +74,20 @@
   background-color: #b3b3b3;
 }
 
-#afGuiEditor .af-gui-field,
-#afGuiEditor .af-gui-text,
-#afGuiEditor .af-gui-block {
+#afGuiEditor .af-gui-element {
   position: relative;
-  padding: 32px 3px 3px;
+  padding: 22px 3px 3px;
   min-height: 40px;
+}
+
+#afGuiEditor .af-gui-block {
   border: 2px dashed transparent;
 }
 
+#afGuiEditor .af-gui-block:hover {
+  border: 2px dashed #757575;
+}
+
 #afGuiEditor #afGuiEditor-canvas .af-entity-selected {
   border: 2px dashed #0071bd;
 }
@@ -95,14 +100,6 @@
   color: white;
 }
 
-#afGuiEditor .af-gui-block {
-  padding-top: 20px;
-}
-
-#afGuiEditor .af-gui-block:hover {
-  border: 2px dashed #757575;
-}
-
 #afGuiEditor [ui-sortable] {
   min-height: 25px;
 }

diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 65a2f86a0bd0ba822d15677182cd8510ccf434d0..835e6d07a18f88fd425d39a7b61ad1d4e36aa414 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -1,6 +1,8 @@
 (function(angular, $, _) {
   angular.module('afGuiEditor', CRM.angRequires('afGuiEditor'));
 
+  var editingIcon;
+
   angular.module('afGuiEditor').directive('afGuiEditor', function(crmApi4, $parse, $timeout) {
     return {
       restrict: 'A',
@@ -8,6 +10,20 @@
       scope: {
         afGuiEditor: '='
       },
+      link: function($scope, element, attrs) {
+        // Shoehorn in a non-angular widget for picking icons
+        CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() {
+          $('#af-gui-icon-picker').crmIconPicker().change(function() {
+            if (editingIcon) {
+              $scope.$apply(function() {
+                editingIcon['crm-icon'] = $('#af-gui-icon-picker').val();
+                editingIcon = null;
+                $('#af-gui-icon-picker').val('').change();
+              });
+            }
+          });
+        });
+      },
       controller: function($scope) {
         $scope.ts = CRM.ts();
         $scope.afform = null;
@@ -36,6 +52,8 @@
             editor.addEntity('Contact');
             $scope.layout['#children'].push({
               "#tag": "button",
+              "class": 'af-button btn btn-primary',
+              "crm-icon": 'fa-check',
               "ng-click": "modelListCtrl.submit()",
               "#children": [
                 {
@@ -318,6 +336,9 @@
           if (_.contains(classes, 'af-text')) {
             return 'text';
           }
+          if (_.contains(classes, 'af-button')) {
+            return 'button';
+          }
           return null;
         };
 
@@ -327,6 +348,12 @@
             'class': 'af-' + type,
             '#children': type == 'block' ? [] : [{'#text': ts('Enter text')}]
           };
+          if (type === 'button') {
+            newBlock['#tag'] = 'button';
+            newBlock['class'] += ' btn btn-primary';
+            newBlock['crm-icon'] = 'fa-check';
+            newBlock['ng-click'] = "modelListCtrl.submit()";
+          }
           $scope.node['#children'].push(newBlock);
         };
 
@@ -435,6 +462,50 @@
       }
     };
   });
+  
+  angular.module('afGuiEditor').directive('afGuiButton', function() {
+    return {
+      restrict: 'A',
+      templateUrl: '~/afGuiEditor/button.html',
+      scope: {
+        node: '=afGuiButton'
+      },
+      require: '^^afGuiBlock',
+      link: function($scope, element, attrs, block) {
+        $scope.block = block;
+      },
+      controller: function($scope) {
+
+        // TODO: Add action selector to UI
+        // $scope.actions = {
+        //   "modelListCtrl.submit()": ts('Submit Form')
+        // };
+
+        $scope.styles = {
+          'btn-default': ts('Default'),
+          'btn-primary': ts('Primary'),
+          'btn-success': ts('Success'),
+          'btn-info': ts('Info'),
+          'btn-warning': ts('Warning'),
+          'btn-danger': ts('Danger')
+        };
+
+        $scope.getStyle = function() {
+          return _.intersection(splitClass($scope.node['class']), _.keys($scope.styles))[0] || '';
+        };
+
+        $scope.setStyle = function(val) {
+          $scope.block.modifyClasses($scope.node, _.keys($scope.styles), val);
+        };
+
+        $scope.pickIcon = function() {
+          editingIcon = $scope.node;
+          $('#af-gui-icon-picker ~ .crm-icon-picker-button').click();
+        };
+
+      }
+    };
+  });
 
   // Editable titles using ngModel & html5 contenteditable
   // Cribbed from ContactLayoutEditor

diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/block.html
index 45d6c3d750b7a4b75b0e7de1e2a895787d266437..28d96ff68c6a3048ba925bc305a5e72816ce6b1b 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/block.html
+++ b/ext/afform/gui/ang/afGuiEditor/block.html
@@ -16,16 +16,18 @@
     <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>
+      <li><a href ng-click="addBlock('button')">{{ ts('Add button') }}</a></li>
     </ul>
   </div>
 </div>
-<div ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]'}" ng-model="node['#children']" class="af-gui-layout {{ getLayout() }}">
+<div ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]', cancel: 'input,textarea,button,select,option,a'}" ng-model="node['#children']" class="af-gui-layout {{ getLayout() }}">
   <div ng-repeat="item in node['#children']" ng-show="block.getNodeType(item)">
     <div ng-switch="block.getNodeType(item)">
-      <div ng-switch-when="fieldset" af-gui-block="item" class="af-gui-block af-gui-fieldset" ng-class="{'af-entity-selected': isSelectedFieldset(item['af-fieldset'])}" entity-name="item['af-fieldset']" data-entity="{{ item['af-fieldset'] }}" />
-      <div ng-switch-when="block" af-gui-block="item" class="af-gui-block" entity-name="entityName" />
-      <div ng-switch-when="field" af-gui-field="item" class="af-gui-field" entity-name="entityName" />
-      <div ng-switch-when="text" af-gui-text="item" class="af-gui-text" />
+      <div ng-switch-when="fieldset" af-gui-block="item" class="af-gui-element af-gui-block af-gui-fieldset" ng-class="{'af-entity-selected': isSelectedFieldset(item['af-fieldset'])}" entity-name="item['af-fieldset']" data-entity="{{ item['af-fieldset'] }}" />
+      <div ng-switch-when="block" af-gui-block="item" class="af-gui-element af-gui-block" entity-name="entityName" />
+      <div ng-switch-when="field" af-gui-field="item" class="af-gui-element af-gui-field" entity-name="entityName" />
+      <div ng-switch-when="text" af-gui-text="item" class="af-gui-element af-gui-text" />
+      <div ng-switch-when="button" af-gui-button="item" class="af-gui-element af-gui-button" />
     </div>
   </div>
 </div>

diff --git a/ext/afform/gui/ang/afGuiEditor/button.html b/ext/afform/gui/ang/afGuiEditor/button.html
new file mode 100644 (file)
index 0000000..996205a
--- /dev/null
+++ b/ext/afform/gui/ang/afGuiEditor/button.html
@@ -0,0 +1,22 @@
+<div class="af-gui-bar">
+  {{ node['#tag'] }}
+  <div class="form-inline pull-right">
+    <button type="button" class="btn btn-xs dropdown-toggle {{ getStyle() }}-outline" data-toggle="dropdown" title="{{ ts('Style') }}">
+      <span>{{ styles[getStyle()] }}</span>
+      <i class="crm-i fa-caret-down"></i>
+    </button>
+    <ul class="dropdown-menu">
+      <li ng-repeat="(style, label) in styles" class="{{ style.replace('btn', 'bg') }}">
+        <a href ng-click="setStyle(style)">{{ label }}</a>
+      </li>
+    </ul>
+  </div>
+</div>
+<button type="button" class="btn {{ getStyle() }}">
+  <span class="crm-editable-enabled" ng-click="pickIcon()" >
+    <i class="crm-i {{ node['crm-icon'] }}"></i>
+  </span>
+  <span af-gui-editable ng-model="node['#children'][0]['#text']" >
+    {{ node['#children'][0]['#text'] }}
+  </span>
+</button>

diff --git a/ext/afform/gui/ang/afGuiEditor/config-entity.html b/ext/afform/gui/ang/afGuiEditor/config-entity.html
index e5c48d3ffe24e80671ddb9cec32599ec4a891e1a..25bc6ab1728f558b4951f243cd31891af553c444 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/config-entity.html
+++ b/ext/afform/gui/ang/afGuiEditor/config-entity.html
@@ -1,5 +1,5 @@
 <div>
-  <a href ng-click="editor.removeEntity(selectedEntity)" class="btn btn-sm btn-danger pull-right">
+  <a href ng-click="editor.removeEntity(selectedEntity)" class="btn btn-sm btn-danger-outline pull-right">
     <i class="crm-i fa-trash"></i>
   </a>
 

diff --git a/ext/afform/gui/ang/afGuiEditor/main.html b/ext/afform/gui/ang/afGuiEditor/main.html
index bd8b471e1bb34936dd5544cf6e7da4ed04c23775..f7ff60ff4dfef9b6406227d6abd20cbc75ef1f9f 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/main.html
+++ b/ext/afform/gui/ang/afGuiEditor/main.html
@@ -8,4 +8,7 @@
     <div id="afGuiEditor-palette" ng-include="'~/afGuiEditor/palette.html'"></div>
     <div id="afGuiEditor-canvas" ng-include="'~/afGuiEditor/canvas.html'"></div>
   </div>
+  <div style="display:none;">
+    <input id="af-gui-icon-picker" title="{{ ts('Choose Icon') }}" />
+  </div>
 </div>

diff --git a/ext/afform/mock/ang/testAfform.aff.html b/ext/afform/mock/ang/testAfform.aff.html
index 499553e7820e941583238085f32b249b648f3d2b..512bc15303a8f39cedd3b26c6405923766748e5d 100644 (file)
--- a/ext/afform/mock/ang/testAfform.aff.html
+++ b/ext/afform/mock/ang/testAfform.aff.html
@@ -26,6 +26,6 @@
   </div>
 
   <!-- General elements: FIELDSET, UL, BUTTON, P, H1 should work anywhere -->
-  <button ng-click="modelListCtrl.submit()">Submit</button>
+  <button class="af-button btn btn-primary" crm-icon="fa-check" ng-click="modelListCtrl.submit()">Submit</button>
 
 </af-form>