From 4bd440535e67a948a6e5ac2d4c8fc8e261b46a21 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Tue, 12 Nov 2019 16:58:55 -0500 Subject: [PATCH] GUI: Config fields --- ext/afform/core/ang/afField/afField.html | 2 + .../core/ang/afField/widgets/Number.html | 2 +- .../core/ang/afField/widgets/Select.html | 2 +- ext/afform/core/ang/afField/widgets/Text.html | 2 +- ext/afform/gui/afform_gui.php | 10 +- ext/afform/gui/ang/afGuiEditor.css | 93 +++++++++++++++++- ext/afform/gui/ang/afGuiEditor.js | 80 +++++++++++++-- ext/afform/gui/ang/afGuiEditor/block.html | 4 +- ext/afform/gui/ang/afGuiEditor/button.html | 21 ++-- ext/afform/gui/ang/afGuiEditor/field.html | 54 +++++++++- ext/afform/gui/ang/afGuiEditor/main.html | 1 - ext/afform/gui/ang/afGuiEditor/text.html | 33 ++++--- .../gui/ang/afGuiEditor/widgets/CheckBox.html | 7 ++ .../gui/ang/afGuiEditor/widgets/Date.html | 5 + .../gui/ang/afGuiEditor/widgets/Number.html | 1 + .../gui/ang/afGuiEditor/widgets/Radio.html | 4 + .../afGuiEditor/widgets/RichTextEditor.html | 1 + .../gui/ang/afGuiEditor/widgets/Select.html | 1 + .../gui/ang/afGuiEditor/widgets/Text.html | 1 + .../gui/ang/afGuiEditor/widgets/TextArea.html | 1 + ext/afform/gui/images/number.png | Bin 0 -> 152 bytes 21 files changed, 277 insertions(+), 48 deletions(-) create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/CheckBox.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/Date.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/Number.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/Radio.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/RichTextEditor.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/Select.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/Text.html create mode 100644 ext/afform/gui/ang/afGuiEditor/widgets/TextArea.html create mode 100644 ext/afform/gui/images/number.png diff --git a/ext/afform/core/ang/afField/afField.html b/ext/afform/core/ang/afField/afField.html index 30fd1ed6a7..79a0703b93 100644 --- a/ext/afform/core/ang/afField/afField.html +++ b/ext/afform/core/ang/afField/afField.html @@ -1,4 +1,6 @@ +

{{ defn.help_pre }}

+

{{ defn.help_post }}

diff --git a/ext/afform/core/ang/afField/widgets/Number.html b/ext/afform/core/ang/afField/widgets/Number.html index d04da06595..2028c402c5 100644 --- a/ext/afform/core/ang/afField/widgets/Number.html +++ b/ext/afform/core/ang/afField/widgets/Number.html @@ -1 +1 @@ - + diff --git a/ext/afform/core/ang/afField/widgets/Select.html b/ext/afform/core/ang/afField/widgets/Select.html index 01ae74fbe8..c0812ab4e4 100644 --- a/ext/afform/core/ang/afField/widgets/Select.html +++ b/ext/afform/core/ang/afField/widgets/Select.html @@ -1 +1 @@ - + diff --git a/ext/afform/core/ang/afField/widgets/Text.html b/ext/afform/core/ang/afField/widgets/Text.html index 6f94d24a59..619196a073 100644 --- a/ext/afform/core/ang/afField/widgets/Text.html +++ b/ext/afform/core/ang/afField/widgets/Text.html @@ -1 +1 @@ - + diff --git a/ext/afform/gui/afform_gui.php b/ext/afform/gui/afform_gui.php index 1994e9be98..e63047898f 100644 --- a/ext/afform/gui/afform_gui.php +++ b/ext/afform/gui/afform_gui.php @@ -185,7 +185,7 @@ function afform_gui_civicrm_buildAsset($asset, $params, &$mimeType, &$content) { ->setIncludeCustom(TRUE) ->setLoadOptions(TRUE) ->setAction('create') - ->setSelect(['name', 'title', 'input_type', 'input_attrs', 'options']) + ->setSelect(['name', 'title', 'input_type', 'input_attrs', 'required', 'options', 'help_pre', 'help_post', 'serialize']) ->addWhere('input_type', 'IS NOT NULL') ->execute() ->indexBy('name'); @@ -195,6 +195,14 @@ function afform_gui_civicrm_buildAsset($asset, $params, &$mimeType, &$content) { // FIXME: This should probably be a callback event or something to allow extensions to tweak the metadata for their entities $data['fields']['Contact']['contact_type']['required_data'] = TRUE; + // Scan for input types + // FIXME: Need a way to load this from other extensions too + foreach (glob(__DIR__ . '/ang/afGuiEditor/widgets/*.html') as $file) { + $matches = []; + preg_match('/([-a-z_A-Z0-9]*).html/', $file, $matches); + $data['widgets'][$matches[1]] = $matches[1]; + } + $mimeType = 'text/javascript'; $content = "CRM.afformAdminData=" . json_encode($data, JSON_UNESCAPED_SLASHES) . ';'; } diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css index 9a3be93329..6ed42502d0 100644 --- a/ext/afform/gui/ang/afGuiEditor.css +++ b/ext/afform/gui/ang/afGuiEditor.css @@ -95,10 +95,12 @@ opacity: 0; transition: opacity 1s 2s; position:relative; + font-family: "Courier New", Courier, monospace; + font-size: 12px; } #afGuiEditor [ui-sortable] .af-gui-bar { cursor: move; - background-color: #efefef; + background-color: #f2f2f2; position: absolute; top: 0; left: 0; @@ -118,12 +120,17 @@ #afGuiEditor .af-gui-element { position: relative; - padding: 22px 3px 3px; - min-height: 40px; + padding: 0 3px 3px; } #afGuiEditor .af-gui-block { border: 2px dashed transparent; + padding-top: 22px; + min-height: 40px; +} + +#afGuiEditor .af-gui-block-type-fieldset { + box-shadow: 0 0 5px #bbbbbb; } #afGuiEditor .af-gui-block:hover { @@ -224,12 +231,92 @@ top: -8px; } +#afGuiEditor .af-gui-button { + padding-left: 15px; +} + #afGuiEditor .af-gui-button > .btn.disabled { cursor: default !important; color: white !important; } +#afGuiEditor .af-gui-button > .btn.disabled .crm-editable-enabled:hover:not(:focus) { + border-color: #f4f4f4 !important; +} #afGuiEditor .af-gui-button > .btn-default.disabled { background-color: lightgrey !important; } +#afGuiEditor .af-gui-node-title { + margin-left: 5px; + margin-right: 20px; + position: relative; +} + +#afGuiEditor .af-gui-field-required:after { + content: '*'; + color: #cf3458; + position: relative; + left: -4px; +} + +#afGuiEditor li a.af-gui-field-select-in-dropdown { + padding-top: 2px; + padding-bottom: 2px; + background-color: white !important; + cursor: default; +} + +#afGuiEditor .af-gui-field-widget input[type=text].form-control { + color: #9a9a9a; +} + +#afGuiEditor .af-gui-field-widget-number input[type=text].form-control { + background-image: url('../images/number.png'); + background-repeat: no-repeat; + background-position: center right 6px; +} + +#afGuiEditor .af-gui-field-widget input.crm-form-date { + width: 140px; + margin-right: -2px; +} +#afGuiEditor .af-gui-field-widget input.crm-form-time { + width: 80px; +} + +#afGuiEditor .af-gui-text-h1 { + font-weight: bolder; + font-size: 16px; +} + +#afGuiEditor .af-gui-text-h2 { + font-weight: bold; + font-size: 15px; +} + +#afGuiEditor .af-gui-text-legend, +#afGuiEditor .af-gui-text-h3 { + font-weight: bold; + font-size: 14px; +} + +#afGuiEditor .af-gui-text-legend { + text-decoration: underline; +} + +#afGuiEditor .af-gui-text-h4 { + font-weight: bold; +} + +#afGuiEditor .af-gui-text-h5 { + font-weight: 600; +} + +#afGuiEditor .af-gui-text-h6 { + font-weight: 500; +} + +#afGuiEditor .af-gui-field-help { + font-style: italic; +} diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js index 7322a8367d..542473f94b 100644 --- a/ext/afform/gui/ang/afGuiEditor.js +++ b/ext/afform/gui/ang/afGuiEditor.js @@ -422,11 +422,13 @@ node: '=afGuiField', entityName: '=' }, - require: '^^afGuiEditor', - link: function($scope, element, attrs, editor) { - $scope.editor = editor; + require: ['^^afGuiEditor', '^^afGuiBlock'], + link: function($scope, element, attrs, ctrls) { + $scope.editor = ctrls[0]; + $scope.block = ctrls[1]; }, controller: function($scope) { + var ts = $scope.ts = CRM.ts(); $scope.getEntity = function() { return $scope.editor ? $scope.editor.getEntity($scope.entityName) : {}; @@ -435,6 +437,68 @@ $scope.getDefn = function() { return $scope.editor ? $scope.editor.getField($scope.getEntity().type, $scope.node.name) : {}; }; + + $scope.getOptions = function() { + return { + results: _.transform($scope.getProp('options'), function(result, val, key) { + result.push({id: key, text: val}); + }, []) + }; + }; + + $scope.getProp = function(propName) { + var path = propName.split('.'), + item = path.pop(), + localDefn = drillDown($scope.node.defn || {}, path); + if (typeof localDefn[item] !== 'undefined') { + return localDefn[item]; + } + return drillDown($scope.getDefn(), path)[item]; + }; + + $scope.toggleRequired = function() { + getSet('required', !getSet('required')); + return false; + }; + + $scope.toggleHelp = function(position) { + getSet('help_' + position, getSet('help_' + position) === null ? ($scope.getDefn()['help_' + position] || ts('Enter text')) : null); + return false; + }; + + // Getter/setter for definition props + $scope.getSet = function(propName) { + return _.wrap(propName, getSet); + }; + + // Returns a reference to a path n-levels deep within an object + function drillDown(parent, path) { + var container = parent; + _.each(path, function(level) { + container[level] = container[level] || {}; + container = container[level]; + }); + return container; + } + + // Getter/setter callback + function getSet(propName, val) { + if (arguments.length > 1) { + var path = propName.split('.'), + item = path.pop(), + localDefn = drillDown($scope.node, ['defn'].concat(path)), + fieldDefn = drillDown($scope.getDefn(), path); + // Set the value if different than the field defn, otherwise unset it + if (typeof val !== 'undefined' && val !== fieldDefn[item]) { + localDefn[item] = val; + } else { + delete localDefn[item]; + } + return val; + } + return $scope.getProp(propName); + } + } }; }); @@ -510,14 +574,14 @@ 'btn-danger': ts('Danger') }; - $scope.getStyle = function() { + // Getter/setter for ng-model + $scope.getSetStyle = function(val) { + if (arguments.length) { + return $scope.block.modifyClasses($scope.node, _.keys($scope.styles), ['btn', val]); + } return _.intersection(splitClass($scope.node['class']), _.keys($scope.styles))[0] || ''; }; - $scope.setStyle = function(val) { - $scope.block.modifyClasses($scope.node, _.keys($scope.styles), ['btn', val]); - }; - $scope.pickIcon = function() { editingIcon = $scope.node; $('#af-gui-icon-picker ~ .crm-icon-picker-button').click(); diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/block.html index 00fad45b9b..11c28be13b 100644 --- a/ext/afform/gui/ang/afGuiEditor/block.html +++ b/ext/afform/gui/ang/afGuiEditor/block.html @@ -40,8 +40,8 @@
-
-
+
+
diff --git a/ext/afform/gui/ang/afGuiEditor/button.html b/ext/afform/gui/ang/afGuiEditor/button.html index 391130c45a..f566c9b187 100644 --- a/ext/afform/gui/ang/afGuiEditor/button.html +++ b/ext/afform/gui/ang/afGuiEditor/button.html @@ -1,28 +1,23 @@
- {{ node['#tag'] }}
-
-
- -
- + +
+
-
- - + +
+ {{ getProp('help_pre') }}
+
+
+ {{ getProp('help_post') }} +
+ diff --git a/ext/afform/gui/ang/afGuiEditor/main.html b/ext/afform/gui/ang/afGuiEditor/main.html index f7ff60ff4d..f89bbe1283 100644 --- a/ext/afform/gui/ang/afGuiEditor/main.html +++ b/ext/afform/gui/ang/afGuiEditor/main.html @@ -1,7 +1,6 @@
-
diff --git a/ext/afform/gui/ang/afGuiEditor/text.html b/ext/afform/gui/ang/afGuiEditor/text.html index f770446d8f..0b65461790 100644 --- a/ext/afform/gui/ang/afGuiEditor/text.html +++ b/ext/afform/gui/ang/afGuiEditor/text.html @@ -1,24 +1,33 @@
- {{ node['#tag'] }}
- -
- -
-

- {{ node['#children'][0]['#text'] }} +

+ {{ node['#children'][0]['#text'] }}

diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/CheckBox.html b/ext/afform/gui/ang/afGuiEditor/widgets/CheckBox.html new file mode 100644 index 0000000000..27086e17f1 --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/CheckBox.html @@ -0,0 +1,7 @@ +
    +
  • + + +
    • +
+ diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/Date.html b/ext/afform/gui/ang/afGuiEditor/widgets/Date.html new file mode 100644 index 0000000000..aebd73d42f --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/Date.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/Number.html b/ext/afform/gui/ang/afGuiEditor/widgets/Number.html new file mode 100644 index 0000000000..bfb984aece --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/Number.html @@ -0,0 +1 @@ + diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/Radio.html b/ext/afform/gui/ang/afGuiEditor/widgets/Radio.html new file mode 100644 index 0000000000..4050077562 --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/Radio.html @@ -0,0 +1,4 @@ + diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/RichTextEditor.html b/ext/afform/gui/ang/afGuiEditor/widgets/RichTextEditor.html new file mode 100644 index 0000000000..81acfcd98e --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/RichTextEditor.html @@ -0,0 +1 @@ + diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/Select.html b/ext/afform/gui/ang/afGuiEditor/widgets/Select.html new file mode 100644 index 0000000000..d096b8a9ef --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/Select.html @@ -0,0 +1 @@ + diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/Text.html b/ext/afform/gui/ang/afGuiEditor/widgets/Text.html new file mode 100644 index 0000000000..bfb984aece --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/Text.html @@ -0,0 +1 @@ + diff --git a/ext/afform/gui/ang/afGuiEditor/widgets/TextArea.html b/ext/afform/gui/ang/afGuiEditor/widgets/TextArea.html new file mode 100644 index 0000000000..81acfcd98e --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/widgets/TextArea.html @@ -0,0 +1 @@ + diff --git a/ext/afform/gui/images/number.png b/ext/afform/gui/images/number.png new file mode 100644 index 0000000000000000000000000000000000000000..357b11c21dcc60cab120a300dcdb20d884b760b9 GIT binary patch literal 152 zcmeAS@N?(olHy`uVBq!ia0vp^d_XM7!2~3eR&kvGQk(@Ik;M!Q+`=Ht$S`Y;1W?e+ z)5S4F<9za;A0L&O3mZBcGaP1K`thS;(G;gEiJ@m(PTTlg^{IGr!9{{SG2tPT&X4Be xhlg4td|btjY8`6v<_lIA4x4On^`cG;!ol>kj;@O1TaS?83{1OQ{WG0gw~ literal 0 HcmV?d00001 -- 2.25.1