Configure layout style of blocks

diff --git a/ext/afform/core/ang/afCore.css b/ext/afform/core/ang/afCore.css
index 83b008df299e7d9d99a65a1645e6f4b87b5df91d..305698c78f2cd52c0c1487231e5aebd426a29a85 100644 (file)
--- a/ext/afform/core/ang/afCore.css
+++ b/ext/afform/core/ang/afCore.css
@@ -5,3 +5,14 @@
 a.af-api4-action-idle {
     cursor: pointer;
 }
+
+.af-block.af-layout-cols {
+    display: flex;
+}
+.af-block.af-layout-cols > * {
+    flex: 1;
+}
+.af-block.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 95df8383fdf403aec076094236410c6523773c07..a8e333f82e1d8ea2ff69dadf6941296af70c8422 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -128,3 +128,29 @@
   left: 4px;
   top: 5px;
 }
+
+#afGuiEditor .af-gui-layout-icon {
+  width: 12px;
+  height: 11px;
+  display: block;
+  background-image: url('../images/icons.png');
+  background-repeat: no-repeat;
+  margin: 4px 1px;
+}
+#afGuiEditor .af-gui-layout-icon.af-layout-cols {
+  background-position: -12px 0;
+}
+#afGuiEditor .af-gui-layout-icon.af-layout-rows {
+  background-position: -24px 0;
+}
+
+#afGuiEditor .af-gui-layout.af-layout-cols {
+  display: flex;
+}
+#afGuiEditor .af-gui-layout.af-layout-cols > div {
+  flex: 1;
+}
+#afGuiEditor .af-gui-layout.af-layout-inline > div {
+  display: inline-block;
+  width: 300px;
+}

diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 1e65a946fe4e6589781e1b28651365f98573a490..acfb5898d3d0c26e074451cd518fa8748c94c907 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -38,6 +38,10 @@
 
         function initialize(afform) {
           $scope.afform = afform;
+          // Remove empty text nodes, they just create clutter
+          removeRecursive($scope.afform.layout, function(item) {
+            return ('#text' in item) && _.trim(item['#text']).length === 0;
+          });
           $scope.layout = getTags($scope.afform.layout, 'af-form')[0];
           evaluate($scope.layout['#children']);
           $scope.entities = getTags($scope.layout['#children'], 'af-entity', 'name');
@@ -305,6 +309,24 @@
           fieldset: ts('Fieldset')
         };
 
+        $scope.layouts = {
+          'af-layout-rows': ts('Contents display as rows'),
+          'af-layout-cols': ts('Contents are evenly-spaced columns'),
+          'af-layout-inline': ts('Contents are arranged inline')
+        };
+
+        $scope.getLayout = function() {
+          return _.intersection(splitClass($scope.node['class']), _.keys($scope.layouts))[0] || 'af-layout-rows';
+        };
+
+        $scope.setLayout = function(val) {
+          var classes = ['af-block'];
+          if (val !== 'af-layout-rows') {
+            classes.push(val);
+          }
+          $scope.block.modifyClasses($scope.node, _.keys($scope.layouts), classes);
+        };
+
       }
     };
   });
@@ -365,11 +387,11 @@
         };
 
         $scope.getAlign = function() {
-          return _.intersection(splitClass($scope.node['class']), _.keys($scope.alignments))[0];
+          return _.intersection(splitClass($scope.node['class']), _.keys($scope.alignments))[0] || 'text-left';
         };
 
         $scope.setAlign = function(val) {
-          $scope.block.modifyClasses($scope.node, _.keys($scope.alignments), val);
+          $scope.block.modifyClasses($scope.node, _.keys($scope.alignments), val === 'text-left' ? null : val);
         };
       }
     };

diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/block.html
index e45853423d555dfe3fc422bee1ce491c7eff6a48..64570cc63aa4f8588b79c371265df4c882d1e748 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/block.html
+++ b/ext/afform/gui/ang/afGuiEditor/block.html
@@ -4,9 +4,14 @@
   <select class="pull-right" ng-model="node['#tag']">
     <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
   </select>
+  <div class="btn-group btn-group-xs pull-right" role="group">
+    <button type="button" class="btn btn-default" ng-class="{active: opt === getLayout()}" ng-repeat="(opt, label) in layouts" ng-click="setLayout(opt)" title="{{ label }}">
+      <i class="af-gui-layout-icon {{ opt }}" ></i>
+    </button>
+  </div>
 </div>
-<div ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]'}" ng-model="node['#children']">
-  <div ng-repeat="item in node['#children']">
+<div ui-sortable="{handle: '.af-gui-bar', connectWith: '[ui-sortable]'}" 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" />

diff --git a/ext/afform/gui/ang/afGuiEditor/text.html b/ext/afform/gui/ang/afGuiEditor/text.html
index 4babf0198455be86938afd0cebf2538499ab0e47..85b6889a15d0269c89b8f22fe283cf102cae38f0 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/text.html
+++ b/ext/afform/gui/ang/afGuiEditor/text.html
@@ -4,7 +4,7 @@
     <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
   </select>
   <div class="btn-group btn-group-xs pull-right" role="group">
-    <button type="button" class="btn btn-default" ng-class="{active: (opt === getAlign()) || (opt === 'text-left' && !getAlign())}" ng-repeat="(opt, label) in alignments" ng-click="setAlign(opt)" title="{{ label }}">
+    <button type="button" class="btn btn-default" ng-class="{active: opt === getAlign()}" ng-repeat="(opt, label) in alignments" ng-click="setAlign(opt)" title="{{ label }}">
       <i class="crm-i fa-{{ opt.replace('text', 'align') }}" ></i>
     </button>
   </div>

diff --git a/ext/afform/gui/images/icons.png b/ext/afform/gui/images/icons.png
new file mode 100644 (file)
index 0000000..98fc242
Binary files /dev/null and b/ext/afform/gui/images/icons.png differ

diff --git a/ext/afform/gui/images/screenshot.png b/ext/afform/gui/images/screenshot.png
deleted file mode 100644 (file)
index 6765b69..0000000
Binary files a/ext/afform/gui/images/screenshot.png and /dev/null differ

diff --git a/ext/afform/mock/ang/testAfform.aff.html b/ext/afform/mock/ang/testAfform.aff.html
index 6dd4ac78752cbf08567c9c30333ef8cb749a3506..499553e7820e941583238085f32b249b648f3d2b 100644 (file)
--- a/ext/afform/mock/ang/testAfform.aff.html
+++ b/ext/afform/mock/ang/testAfform.aff.html
@@ -7,7 +7,7 @@
   <fieldset af-fieldset="parent">
     <legend class="af-text">About You</legend>
 
-    <div class="af-block">
+    <div class="af-block af-layout-inline">
       <af-field name="first_name" />
       <af-field name="last_name" />
     </div>