From e72f4d8159f5b67d5fd790c27cb2ac487a8278b2 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Thu, 7 Nov 2019 11:41:08 -0500 Subject: [PATCH] GUI configure form buttons --- ext/afform/gui/ang/afGuiEditor.css | 21 +++--- ext/afform/gui/ang/afGuiEditor.js | 71 +++++++++++++++++++ ext/afform/gui/ang/afGuiEditor/block.html | 12 ++-- ext/afform/gui/ang/afGuiEditor/button.html | 22 ++++++ .../gui/ang/afGuiEditor/config-entity.html | 2 +- ext/afform/gui/ang/afGuiEditor/main.html | 3 + ext/afform/mock/ang/testAfform.aff.html | 2 +- 7 files changed, 114 insertions(+), 19 deletions(-) create mode 100644 ext/afform/gui/ang/afGuiEditor/button.html diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css index fd02507575..2665fecc58 100644 --- 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 65a2f86a0b..835e6d07a1 100644 --- 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 45d6c3d750..28d96ff68c 100644 --- a/ext/afform/gui/ang/afGuiEditor/block.html +++ b/ext/afform/gui/ang/afGuiEditor/block.html @@ -16,16 +16,18 @@ -
+
-
-
-
-
+
+
+
+
+
diff --git a/ext/afform/gui/ang/afGuiEditor/button.html b/ext/afform/gui/ang/afGuiEditor/button.html new file mode 100644 index 0000000000..996205a13b --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/button.html @@ -0,0 +1,22 @@ +
+ {{ node['#tag'] }} +
+ + +
+
+ diff --git a/ext/afform/gui/ang/afGuiEditor/config-entity.html b/ext/afform/gui/ang/afGuiEditor/config-entity.html index e5c48d3ffe..25bc6ab172 100644 --- a/ext/afform/gui/ang/afGuiEditor/config-entity.html +++ b/ext/afform/gui/ang/afGuiEditor/config-entity.html @@ -1,5 +1,5 @@
- + diff --git a/ext/afform/gui/ang/afGuiEditor/main.html b/ext/afform/gui/ang/afGuiEditor/main.html index bd8b471e1b..f7ff60ff4d 100644 --- a/ext/afform/gui/ang/afGuiEditor/main.html +++ b/ext/afform/gui/ang/afGuiEditor/main.html @@ -8,4 +8,7 @@
+
+ +
diff --git a/ext/afform/mock/ang/testAfform.aff.html b/ext/afform/mock/ang/testAfform.aff.html index 499553e782..512bc15303 100644 --- a/ext/afform/mock/ang/testAfform.aff.html +++ b/ext/afform/mock/ang/testAfform.aff.html @@ -26,6 +26,6 @@
- + -- 2.25.1