From 51ec7d5a5d67f050ecb0668dba8c8741e4f86bb8 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Tue, 19 Nov 2019 08:42:51 -0500 Subject: [PATCH] GUI Add controls for text color, block border & block background color --- ext/afform/gui/afform_gui.php | 9 ++ ext/afform/gui/ang/afGuiEditor.css | 7 +- ext/afform/gui/ang/afGuiEditor.js | 85 ++++++++++++++++--- .../gui/ang/afGuiEditor/block-menu.html | 29 +++++++ ext/afform/gui/ang/afGuiEditor/block.html | 4 +- .../gui/ang/afGuiEditor/button-menu.html | 4 +- ext/afform/gui/ang/afGuiEditor/text-menu.html | 8 ++ ext/afform/gui/ang/afGuiEditor/text.html | 2 +- 8 files changed, 131 insertions(+), 17 deletions(-) diff --git a/ext/afform/gui/afform_gui.php b/ext/afform/gui/afform_gui.php index 19a71aa48a..e55d0815e2 100644 --- a/ext/afform/gui/afform_gui.php +++ b/ext/afform/gui/afform_gui.php @@ -213,6 +213,15 @@ function afform_gui_civicrm_buildAsset($asset, $params, &$mimeType, &$content) { $data['inputType'][$matches[1]] = $matches[1]; } + $data['styles'] = [ + 'default' => ts('Default'), + 'primary' => ts('Primary'), + 'success' => ts('Success'), + 'info' => ts('Info'), + 'warning' => ts('Warning'), + 'danger' => ts('Danger'), + ]; + $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 2c215c37cf..ae9d26e0b7 100644 --- a/ext/afform/gui/ang/afGuiEditor.css +++ b/ext/afform/gui/ang/afGuiEditor.css @@ -285,6 +285,11 @@ padding-right: 5px; } +#afGuiEditor li .af-gui-field-select-in-dropdown input[type=color] { + width: 30px; + padding: 2px 4px; +} + /* For editing field placeholder text */ #afGuiEditor .af-gui-field-input input[type=text].form-control { color: #9a9a9a; @@ -310,7 +315,6 @@ } #afGuiEditor .af-gui-field-input-type-radio label.radio input[type=radio] { margin: 0; - } #afGuiEditor .af-gui-text-h1 { @@ -349,7 +353,6 @@ font-style: italic; } - #afGuiEditor.af-gui-editing-options { pointer-events: none; cursor: default; diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js index b6fb02bd7b..e8e18cd928 100644 --- a/ext/afform/gui/ang/afGuiEditor.js +++ b/ext/afform/gui/ang/afGuiEditor.js @@ -322,7 +322,7 @@ $scope.editor = editor; }, controller: function($scope) { - $scope.block = this; + var block = $scope.block = this; var ts = $scope.ts = CRM.ts(); this.node = $scope.node; @@ -429,9 +429,66 @@ if (val !== 'af-layout-rows') { classes.push(val); } - $scope.block.modifyClasses($scope.node, _.keys($scope.layouts), classes); + block.modifyClasses($scope.node, _.keys($scope.layouts), classes); }; + $scope.getSetBorderWidth = function(width) { + return getSetBorderProp(0, arguments.length ? width : null); + }; + + $scope.getSetBorderStyle = function(style) { + return getSetBorderProp(1, arguments.length ? style : null); + }; + + $scope.getSetBorderColor = function(color) { + return getSetBorderProp(2, arguments.length ? color : null); + }; + + $scope.getSetBackgroundColor = function(color) { + if (!arguments.length) { + return block.getStyles($scope.node)['background-color'] || '#ffffff'; + } + block.setStyle($scope.node, 'background-color', color); + }; + + function getSetBorderProp(idx, val) { + var border = getBorder() || ['1px', '', '#000000']; + if (val === null) { + return border[idx]; + } + border[idx] = val; + block.setStyle($scope.node, 'border', val ? border.join(' ') : null); + } + + this.getStyles = function(node) { + return !node || !node.style ? {} : _.transform(node.style.split(';'), function(styles, style) { + var keyVal = _.map(style.split(':'), _.trim); + if (keyVal.length > 1 && keyVal[1].length) { + styles[keyVal[0]] = keyVal[1]; + } + }, {}); + }; + + this.setStyle = function(node, name, val) { + var styles = block.getStyles(node); + styles[name] = val; + if (!val) { + delete styles[name]; + } + if (_.isEmpty(styles)) { + delete node.style; + } else { + node.style = _.transform(styles, function(combined, val, name) { + combined.push(name + ': ' + val); + }, []).join('; '); + } + }; + + function getBorder() { + var border = _.map((block.getStyles($scope.node).border || '').split(' '), _.trim); + return border.length > 2 ? border : null; + } + } }; }); @@ -659,6 +716,19 @@ $scope.setAlign = function(val) { $scope.block.modifyClasses($scope.node, _.keys($scope.alignments), val === 'text-left' ? null : val); }; + + $scope.styles = _.transform(CRM.afformAdminData.styles, function(styles, val, key) { + styles['text-' + key] = val; + }); + + // Getter/setter for ng-model + $scope.getSetStyle = function(val) { + if (arguments.length) { + return $scope.block.modifyClasses($scope.node, _.keys($scope.styles), val === 'text-default' ? null : val); + } + return _.intersection(splitClass($scope.node['class']), _.keys($scope.styles))[0] || 'text-default'; + }; + } }; }); @@ -682,14 +752,9 @@ // "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.styles = _.transform(CRM.afformAdminData.styles, function(styles, val, key) { + styles['btn-' + key] = val; + }); // Getter/setter for ng-model $scope.getSetStyle = function(val) { diff --git a/ext/afform/gui/ang/afGuiEditor/block-menu.html b/ext/afform/gui/ang/afGuiEditor/block-menu.html index f42066e6db..4a01d9ee92 100644 --- a/ext/afform/gui/ang/afGuiEditor/block-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/block-menu.html @@ -2,4 +2,33 @@
  • {{ ts('Add text box') }}
  • {{ ts('Add button') }}
    • +
  • +
    + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • {{ ts('Delete this block') }}
    • diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/block.html index 8fc03edcc4..1c7df59e4f 100644 --- a/ext/afform/gui/ang/afGuiEditor/block.html +++ b/ext/afform/gui/ang/afGuiEditor/block.html @@ -35,8 +35,8 @@
    -
    -
    +
    +
    diff --git a/ext/afform/gui/ang/afGuiEditor/button-menu.html b/ext/afform/gui/ang/afGuiEditor/button-menu.html index ab67fb5ccd..9a55847f18 100644 --- a/ext/afform/gui/ang/afGuiEditor/button-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/button-menu.html @@ -1,7 +1,7 @@
  • - -
    diff --git a/ext/afform/gui/ang/afGuiEditor/text-menu.html b/ext/afform/gui/ang/afGuiEditor/text-menu.html index 8fed55388d..7b4ab0ff81 100644 --- a/ext/afform/gui/ang/afGuiEditor/text-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/text-menu.html @@ -15,6 +15,14 @@
    • +
  • +
    + + +
    +
  • {{ ts('Delete this text') }} diff --git a/ext/afform/gui/ang/afGuiEditor/text.html b/ext/afform/gui/ang/afGuiEditor/text.html index a5a6261fc6..f7b182532b 100644 --- a/ext/afform/gui/ang/afGuiEditor/text.html +++ b/ext/afform/gui/ang/afGuiEditor/text.html @@ -8,6 +8,6 @@
    • -

    +

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

    -- 2.25.1