From 6fb9e8d275abfa03267d72f6ce9dd850ca447108 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Mon, 9 Dec 2019 08:13:30 -0500 Subject: [PATCH] GUI - Rename af-block => af-container Free up the term af-block to refer to something more specific than a container. --- ext/afform/core/CRM/Afform/ArrayHtml.php | 2 +- ext/afform/core/ang/afCore.css | 6 +- ext/afform/gui/ang/afGuiEditor.css | 14 ++-- ext/afform/gui/ang/afGuiEditor.js | 80 ++++++++----------- .../gui/ang/afGuiEditor/block-menu.html | 9 --- .../gui/ang/afGuiEditor/button-menu.html | 2 +- ext/afform/gui/ang/afGuiEditor/button.html | 2 +- .../gui/ang/afGuiEditor/canvas-menu.html | 8 ++ ext/afform/gui/ang/afGuiEditor/canvas.html | 2 +- .../gui/ang/afGuiEditor/container-menu.html | 9 +++ .../{block.html => container.html} | 27 +++---- .../gui/ang/afGuiEditor/field-menu.html | 2 +- ext/afform/gui/ang/afGuiEditor/field.html | 2 +- .../gui/ang/afGuiEditor/markup-menu.html | 2 +- ext/afform/gui/ang/afGuiEditor/markup.html | 2 +- .../ang/afGuiEditor/menu-item-background.html | 2 +- ext/afform/gui/ang/afGuiEditor/text-menu.html | 2 +- ext/afform/gui/ang/afGuiEditor/text.html | 2 +- ext/afform/mock/ang/testAfform.aff.html | 2 +- .../phpunit/api/v4/formatExamples/banana.php | 10 +-- 20 files changed, 88 insertions(+), 99 deletions(-) delete mode 100644 ext/afform/gui/ang/afGuiEditor/block-menu.html create mode 100644 ext/afform/gui/ang/afGuiEditor/canvas-menu.html create mode 100644 ext/afform/gui/ang/afGuiEditor/container-menu.html rename ext/afform/gui/ang/afGuiEditor/{block.html => container.html} (52%) diff --git a/ext/afform/core/CRM/Afform/ArrayHtml.php b/ext/afform/core/CRM/Afform/ArrayHtml.php index 1c0e9f30ee..120ed0a66c 100644 --- a/ext/afform/core/CRM/Afform/ArrayHtml.php +++ b/ext/afform/core/CRM/Afform/ArrayHtml.php @@ -382,7 +382,7 @@ class CRM_Afform_ArrayHtml { if ($item['#tag'] === 'af-field' || $item['#tag'] === 'af-form' || isset($item['af-fieldset'])) { return TRUE; } - $editableClasses = ['af-block', 'af-text', 'af-button']; + $editableClasses = ['af-container', 'af-text', 'af-button']; $classes = explode(' ', $item['class'] ?? ''); return (bool) array_intersect($editableClasses, $classes); } diff --git a/ext/afform/core/ang/afCore.css b/ext/afform/core/ang/afCore.css index 305698c78f..1d78013141 100644 --- a/ext/afform/core/ang/afCore.css +++ b/ext/afform/core/ang/afCore.css @@ -6,13 +6,13 @@ a.af-api4-action-idle { cursor: pointer; } -.af-block.af-layout-cols { +.af-container.af-layout-cols { display: flex; } -.af-block.af-layout-cols > * { +.af-container.af-layout-cols > * { flex: 1; } -.af-block.af-layout-inline > * { +.af-container.af-layout-inline > * { display: inline-block; margin-right: .5em; } diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css index 8517b3c39a..b9e1cc3883 100644 --- a/ext/afform/gui/ang/afGuiEditor.css +++ b/ext/afform/gui/ang/afGuiEditor.css @@ -123,18 +123,18 @@ padding: 0 3px 3px; } -#afGuiEditor .af-gui-block { +#afGuiEditor .af-gui-container { border: 2px dashed transparent; position: relative; padding: 22px 3px 3px; min-height: 40px; } -#afGuiEditor .af-gui-block-type-fieldset { +#afGuiEditor .af-gui-container-type-fieldset { box-shadow: 0 0 5px #bbbbbb; } -#afGuiEditor .af-gui-block:hover { +#afGuiEditor .af-gui-container:hover { border: 2px dashed #757575; } @@ -213,16 +213,16 @@ padding-top: 2px; padding-bottom: 2px; } -#afGuiEditor .af-gui-add-block-button span { +#afGuiEditor .af-gui-add-element-button span { display: inline-block; width: 18px; height: 18px; border: 2px dashed #0071bd; color: #0071bd; } -#afGuiEditor .af-gui-add-block-button span i { +#afGuiEditor .af-gui-add-element-button span i { position: relative; - top: -3px; + top: -2px; } #afGuiEditor .af-gui-layout-icon { @@ -399,7 +399,7 @@ .af-gui-editing-content #afGuiEditor-palette .panel-body > * { opacity: .5; } -#afGuiEditor.af-gui-editing-content .af-gui-block { +#afGuiEditor.af-gui-editing-content .af-gui-container { border: 2px solid transparent; } #afGuiEditor.af-gui-editing-content .af-gui-bar { diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js index 3a2f954ca3..872c7e929e 100644 --- a/ext/afform/gui/ang/afGuiEditor.js +++ b/ext/afform/gui/ang/afGuiEditor.js @@ -316,12 +316,12 @@ }; }); - angular.module('afGuiEditor').directive('afGuiBlock', function() { + angular.module('afGuiEditor').directive('afGuiContainer', function() { return { restrict: 'A', - templateUrl: '~/afGuiEditor/block.html', + templateUrl: '~/afGuiEditor/container.html', scope: { - node: '=afGuiBlock', + node: '=afGuiContainer', entityName: '=' }, require: '^^afGuiEditor', @@ -329,7 +329,7 @@ $scope.editor = editor; }, controller: function($scope) { - var block = $scope.block = this; + var container = $scope.container = this; var ts = $scope.ts = CRM.ts(); this.node = $scope.node; @@ -343,40 +343,30 @@ if (node['af-fieldset']) { return 'fieldset'; } - var classes = splitClass(node['class']); - if (_.contains(classes, 'af-block')) { - return 'block'; - } - if (_.contains(classes, 'af-text')) { - return 'text'; - } - if (_.contains(classes, 'af-button')) { - return 'button'; - } - if (_.contains(classes, 'af-markup')) { - return 'markup'; - } - return null; + var classes = splitClass(node['class']), + types = ['af-container', 'af-text', 'af-button', 'af-markup'], + type = _.intersection(types, classes); + return type.length ? type[0].replace('af-', '') : null; }; - $scope.addBlock = function(type, props) { + $scope.addElement = function(type, props) { var classes = type.split('.'); - var newBlock = _.defaults({ + var element = _.defaults({ '#tag': classes.shift(), 'class': classes.join(' '), }, props); - if (classes[0] === 'af-block') { - newBlock['#children'] = []; - } else if (classes[0] === 'af-text' || classes[0] === 'af-button') { - newBlock['#children'] = [{'#text': ts('Enter text')}]; + if (_.includes(classes, 'af-container')) { + element['#children'] = []; + } else if (_.intersection(classes, ['af-text', 'af-button']).length) { + element['#children'] = [{'#text': ts('Enter text')}]; } - // Add new block to the top, underneath the fieldset legend if present + // Add it to the top, underneath the fieldset legend if present var pos = $scope.node['#children'].length && $scope.node['#children'][0]['#tag'] === 'legend' ? 1 : 0; - $scope.node['#children'].splice(pos, 0, newBlock); + $scope.node['#children'].splice(pos, 0, element); }; - this.removeBlock = function(node) { - removeRecursive($scope.editor.scope.layout['#children'], {$$hashKey: node.$$hashKey}); + this.removeElement = function(element) { + removeRecursive($scope.editor.scope.layout['#children'], {$$hashKey: element.$$hashKey}); }; $scope.isSelectedFieldset = function(entityName) { @@ -412,7 +402,7 @@ }; $scope.tags = { - div: ts('Block'), + div: ts('Container'), fieldset: ts('Fieldset') }; @@ -430,7 +420,7 @@ }; $scope.setLayout = function(val) { - var classes = ['af-block']; + var classes = ['af-container']; if (val !== 'af-layout-rows') { classes.push(val); } @@ -449,10 +439,10 @@ node: '=afGuiField', entityName: '=' }, - require: ['^^afGuiEditor', '^^afGuiBlock'], + require: ['^^afGuiEditor', '^^afGuiContainer'], link: function($scope, element, attrs, ctrls) { $scope.editor = ctrls[0]; - $scope.block = ctrls[1]; + $scope.container = ctrls[1]; }, controller: function($scope) { var ts = $scope.ts = CRM.ts(); @@ -603,7 +593,7 @@ $scope.deletedOptions.splice($index, 1); $scope.options.push(option); }; - + $scope.save = function() { $scope.field.getSet('options', JSON.parse(angular.toJson($scope.options))); $scope.close(); @@ -624,9 +614,9 @@ scope: { node: '=afGuiText' }, - require: '^^afGuiBlock', - link: function($scope, element, attrs, block) { - $scope.block = block; + require: '^^afGuiContainer', + link: function($scope, element, attrs, container) { + $scope.container = container; }, controller: function($scope) { var ts = $scope.ts = CRM.ts(); @@ -681,13 +671,13 @@ scope: { node: '=afGuiMarkup' }, - require: '^^afGuiBlock', - link: function($scope, element, attrs, block) { - $scope.block = block; + require: '^^afGuiContainer', + link: function($scope, element, attrs, container) { + $scope.container = container; // CRM.wysiwyg doesn't work without a dom id $scope.id = 'af-markup-editor-' + richtextId++; - // When creating a new markup block, go straight to edit mode + // When creating a new markup container, go straight to edit mode $timeout(function() { if ($scope.node['#markup'] === false) { $scope.edit(); @@ -716,9 +706,9 @@ $scope.close = function() { CRM.wysiwyg.destroy('#' + $scope.id); $('#afGuiEditor').removeClass('af-gui-editing-content'); - // If a newly-added block was canceled, just remove it + // If a newly-added wysiwyg was canceled, just remove it if ($scope.node['#markup'] === false) { - $scope.block.removeBlock($scope.node); + $scope.container.removeElement($scope.node); } else { $scope.editingMarkup = false; } @@ -735,9 +725,9 @@ scope: { node: '=afGuiButton' }, - require: '^^afGuiBlock', - link: function($scope, element, attrs, block) { - $scope.block = block; + require: '^^afGuiContainer', + link: function($scope, element, attrs, container) { + $scope.container = container; }, controller: function($scope) { var ts = $scope.ts = CRM.ts(); diff --git a/ext/afform/gui/ang/afGuiEditor/block-menu.html b/ext/afform/gui/ang/afGuiEditor/block-menu.html deleted file mode 100644 index 29d82ca653..0000000000 --- a/ext/afform/gui/ang/afGuiEditor/block-menu.html +++ /dev/null @@ -1,9 +0,0 @@ -
  • {{ ts('Add block') }}
    • -
  • {{ ts('Add text box') }}
    • -
  • {{ ts('Add rich content') }}
    • -
  • {{ ts('Add button') }}
    • - -
  • -
  • - -
  • {{ ts('Delete this block') }}
    • diff --git a/ext/afform/gui/ang/afGuiEditor/button-menu.html b/ext/afform/gui/ang/afGuiEditor/button-menu.html index 9a55847f18..6d32c415a7 100644 --- a/ext/afform/gui/ang/afGuiEditor/button-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/button-menu.html @@ -7,4 +7,4 @@ -
  • {{ ts('Delete this button') }}
    • +
  • {{ ts('Delete this button') }}
    • diff --git a/ext/afform/gui/ang/afGuiEditor/button.html b/ext/afform/gui/ang/afGuiEditor/button.html index be75644dff..3762917cd8 100644 --- a/ext/afform/gui/ang/afGuiEditor/button.html +++ b/ext/afform/gui/ang/afGuiEditor/button.html @@ -1,7 +1,7 @@
    -
      diff --git a/ext/afform/gui/ang/afGuiEditor/canvas-menu.html b/ext/afform/gui/ang/afGuiEditor/canvas-menu.html new file mode 100644 index 0000000000..cc28c2008f --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/canvas-menu.html @@ -0,0 +1,8 @@ +
    • {{ ts('Add container') }}
      • +
    • {{ ts('Add text box') }}
      • +
    • {{ ts('Add rich content') }}
      • +
    • {{ ts('Add button') }}
      • + +
    • + {{ ts('Fieldset for %1', {1: entity.label}) }} +
      • diff --git a/ext/afform/gui/ang/afGuiEditor/canvas.html b/ext/afform/gui/ang/afGuiEditor/canvas.html index 2d116faac8..85b611631c 100644 --- a/ext/afform/gui/ang/afGuiEditor/canvas.html +++ b/ext/afform/gui/ang/afGuiEditor/canvas.html @@ -13,6 +13,6 @@
      -
      +
      diff --git a/ext/afform/gui/ang/afGuiEditor/container-menu.html b/ext/afform/gui/ang/afGuiEditor/container-menu.html new file mode 100644 index 0000000000..f4f2c25db0 --- /dev/null +++ b/ext/afform/gui/ang/afGuiEditor/container-menu.html @@ -0,0 +1,9 @@ +
    • {{ ts('Add container') }}
      • +
    • {{ ts('Add text box') }}
      • +
    • {{ ts('Add rich content') }}
      • +
    • {{ ts('Add button') }}
      • + +
    • +
    • + +
    • {{ ts('Delete this container') }}
      • diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/container.html similarity index 52% rename from ext/afform/gui/ang/afGuiEditor/block.html rename to ext/afform/gui/ang/afGuiEditor/container.html index 703147083a..e7ddc10928 100644 --- a/ext/afform/gui/ang/afGuiEditor/block.html +++ b/ext/afform/gui/ang/afGuiEditor/container.html @@ -1,5 +1,5 @@
      - {{ editor.getEntity(entityName).label }} + {{ editor.getEntity(entityName).label }} {{ node['#tag'] }}
      @@ -7,37 +7,28 @@
      - - -
        +
          - - +
            -
            -
            -
            +
            +
            +
            diff --git a/ext/afform/gui/ang/afGuiEditor/field-menu.html b/ext/afform/gui/ang/afGuiEditor/field-menu.html index 701dfcf8b5..f572c5fac1 100644 --- a/ext/afform/gui/ang/afGuiEditor/field-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/field-menu.html @@ -39,7 +39,7 @@
          • - + {{ ts('Delete this field') }}
            • diff --git a/ext/afform/gui/ang/afGuiEditor/field.html b/ext/afform/gui/ang/afGuiEditor/field.html index b44de5df68..fe2988f634 100644 --- a/ext/afform/gui/ang/afGuiEditor/field.html +++ b/ext/afform/gui/ang/afGuiEditor/field.html @@ -3,7 +3,7 @@
            -
              diff --git a/ext/afform/gui/ang/afGuiEditor/markup-menu.html b/ext/afform/gui/ang/afGuiEditor/markup-menu.html index ff45a264a8..80d1f4c102 100644 --- a/ext/afform/gui/ang/afGuiEditor/markup-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/markup-menu.html @@ -6,5 +6,5 @@
            • - {{ ts('Delete this content') }} + {{ ts('Delete this content') }}
              • diff --git a/ext/afform/gui/ang/afGuiEditor/markup.html b/ext/afform/gui/ang/afGuiEditor/markup.html index c9cd77cfab..4831be286c 100644 --- a/ext/afform/gui/ang/afGuiEditor/markup.html +++ b/ext/afform/gui/ang/afGuiEditor/markup.html @@ -1,7 +1,7 @@
              -
                diff --git a/ext/afform/gui/ang/afGuiEditor/menu-item-background.html b/ext/afform/gui/ang/afGuiEditor/menu-item-background.html index ce95c3153e..0fa451dccf 100644 --- a/ext/afform/gui/ang/afGuiEditor/menu-item-background.html +++ b/ext/afform/gui/ang/afGuiEditor/menu-item-background.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 7b4ab0ff81..ee379c7533 100644 --- a/ext/afform/gui/ang/afGuiEditor/text-menu.html +++ b/ext/afform/gui/ang/afGuiEditor/text-menu.html @@ -25,5 +25,5 @@
              • - {{ ts('Delete this text') }} + {{ ts('Delete this text') }}
                • diff --git a/ext/afform/gui/ang/afGuiEditor/text.html b/ext/afform/gui/ang/afGuiEditor/text.html index f7b182532b..e7a0eb5e26 100644 --- a/ext/afform/gui/ang/afGuiEditor/text.html +++ b/ext/afform/gui/ang/afGuiEditor/text.html @@ -1,7 +1,7 @@
                -
                  diff --git a/ext/afform/mock/ang/testAfform.aff.html b/ext/afform/mock/ang/testAfform.aff.html index 9e459aefe5..3a105a3190 100644 --- a/ext/afform/mock/ang/testAfform.aff.html +++ b/ext/afform/mock/ang/testAfform.aff.html @@ -7,7 +7,7 @@
                  About You -
                  +
                  diff --git a/ext/afform/mock/tests/phpunit/api/v4/formatExamples/banana.php b/ext/afform/mock/tests/phpunit/api/v4/formatExamples/banana.php index 122d455b00..6d70851f39 100644 --- a/ext/afform/mock/tests/phpunit/api/v4/formatExamples/banana.php +++ b/ext/afform/mock/tests/phpunit/api/v4/formatExamples/banana.php @@ -1,8 +1,8 @@ '
                  New text!   Get a trim!
                  ', - 'pretty' => '
                  + 'html' => '
                  New text!   Get a trim!
                  ', + 'pretty' => '
                  New text!   Get a trim! @@ -11,7 +11,7 @@ return [ 'stripped' => [ [ '#tag' => 'div', - 'class' => 'af-block', + 'class' => 'af-container', '#children' => [ ['#tag' => 'strong', '#markup' => ' New text!'], ['#tag' => 'strong', 'class' => 'af-text', '#children' => [['#text' => "  Get a trim!"]]], @@ -22,7 +22,7 @@ return [ 'shallow' => [ [ '#tag' => 'div', - 'class' => 'af-block', + 'class' => 'af-container', '#children' => [ ['#tag' => 'strong', '#markup' => ' New text!'], ['#tag' => 'strong', 'class' => 'af-text', '#children' => [['#text' => "   Get a trim! "]]], @@ -33,7 +33,7 @@ return [ 'deep' => [ [ '#tag' => 'div', - 'class' => 'af-block', + 'class' => 'af-container', '#children' => [ ['#tag' => 'strong', '#children' => [['#text' => ' New text!']]], ['#tag' => 'strong', 'class' => 'af-text', '#children' => [['#text' => "   Get a trim! "]]], -- 2.25.1