GUI - Add option to hide field labels

diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 872c7e929eebd8758381f44b87eee1a65ee55216..fbe3fd89007f2555690ddf30ec32a881d4c5a9fe 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -513,6 +513,15 @@
           return !(typeof val === 'undefined' || val === null);
         };
 
+        $scope.toggleLabel = function() {
+          $scope.node.defn = $scope.node.defn || {};
+          if ($scope.node.defn.title === false) {
+            delete $scope.node.defn.title;
+          } else {
+            $scope.node.defn.title = false;
+          }
+        };
+
         $scope.toggleRequired = function() {
           getSet('required', !getSet('required'));
           return false;

diff --git a/ext/afform/gui/ang/afGuiEditor/field-menu.html b/ext/afform/gui/ang/afGuiEditor/field-menu.html
index f572c5fac1fe4a7badb0d2a7259a83b81d00f2da..2fdf38aa37a7dd743fffc0adf537b2c867a9747b 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/field-menu.html
+++ b/ext/afform/gui/ang/afGuiEditor/field-menu.html
@@ -12,6 +12,12 @@
     {{ ts('Required') }}
   </a>
 </li>
+<li>
+  <a href ng-click="toggleLabel(); $event.stopPropagation();" title="{{ ts('Show field label') }}">
+    <i class="crm-i" ng-class="{'fa-square-o': node.defn.title === false, 'fa-check-square-o': node.defn.title !== false}"></i>
+    {{ ts('Label') }}
+  </a>
+</li>
 <li>
   <a href ng-click="toggleHelp('pre'); $event.stopPropagation();" title="{{ ts('Show help text above this field') }}">
     <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_pre'), 'fa-check-square-o': propIsset('help_pre')}"></i>

diff --git a/ext/afform/gui/ang/afGuiEditor/field.html b/ext/afform/gui/ang/afGuiEditor/field.html
index fe2988f63449bf82168215c777a0690fa7b1b0e6..efcb4fc6ca7449bd464626d89eaa05278d4b1e80 100644 (file)
--- a/ext/afform/gui/ang/afGuiEditor/field.html
+++ b/ext/afform/gui/ang/afGuiEditor/field.html
@@ -10,7 +10,7 @@
       </div>
     </div>
   </div>
-  <label ng-class="{'af-gui-field-required': getProp('required')}" class="af-gui-node-title">
+  <label ng-style="{visibility: node.defn.title === false ? 'hidden' : 'visible'}" ng-class="{'af-gui-field-required': getProp('required')}" class="af-gui-node-title">
     <span af-gui-editable ng-model="node.defn.title" default-value="getDefn().title">{{ getProp('title') }}</span>
   </label>
   <div class="af-gui-field-help" ng-if="propIsset('help_pre')">