From 9c57264159792ae53d63fe625c1991cfe958f55c Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 18 Nov 2019 08:22:37 -0500
Subject: [PATCH] GUI: Cleanup menus

---
 ext/afform/gui/ang/afGuiEditor.css            | 25 +++++++++--
 .../gui/ang/afGuiEditor/block-menu.html       |  5 +++
 ext/afform/gui/ang/afGuiEditor/block.html     |  8 +---
 .../gui/ang/afGuiEditor/button-menu.html      | 10 +++++
 ext/afform/gui/ang/afGuiEditor/button.html    | 12 +----
 .../gui/ang/afGuiEditor/field-menu.html       | 45 +++++++++++++++++++
 ext/afform/gui/ang/afGuiEditor/field.html     | 45 +------------------
 ext/afform/gui/ang/afGuiEditor/text-menu.html | 21 +++++++++
 ext/afform/gui/ang/afGuiEditor/text.html      | 23 +---------
 9 files changed, 106 insertions(+), 88 deletions(-)
 create mode 100644 ext/afform/gui/ang/afGuiEditor/block-menu.html
 create mode 100644 ext/afform/gui/ang/afGuiEditor/button-menu.html
 create mode 100644 ext/afform/gui/ang/afGuiEditor/field-menu.html
 create mode 100644 ext/afform/gui/ang/afGuiEditor/text-menu.html

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index 057031a2ce..2c215c37cf 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -262,13 +262,30 @@
   left: -4px;
 }
 
-#afGuiEditor li a.af-gui-field-select-in-dropdown {
-  padding-top: 2px;
-  padding-bottom: 2px;
-  background-color: white !important;
+#afGuiEditor .dropdown-menu li {
   cursor: default;
 }
 
+#afGuiEditor .dropdown-menu li .af-gui-field-select-in-dropdown {
+  padding: 2px 19px 2px 21px;
+  clear: both;
+  font-weight: 400;
+  line-height: 1.5384615385;
+  color: #4d4d69;
+  white-space: nowrap;
+}
+
+#afGuiEditor .dropdown-menu li > * > label {
+  font-weight: normal;
+}
+
+#afGuiEditor .dropdown-menu li .af-gui-field-select-in-dropdown > select {
+  max-width: 120px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+/* For editing field placeholder text */
 #afGuiEditor .af-gui-field-input input[type=text].form-control {
   color: #9a9a9a;
 }
diff --git a/ext/afform/gui/ang/afGuiEditor/block-menu.html b/ext/afform/gui/ang/afGuiEditor/block-menu.html
new file mode 100644
index 0000000000..f42066e6db
--- /dev/null
+++ b/ext/afform/gui/ang/afGuiEditor/block-menu.html
@@ -0,0 +1,5 @@
+<li><a href ng-click="addBlock('div.af-block')">{{ ts('Add block') }}</a></li>
+<li><a href ng-click="addBlock('p.af-text')">{{ ts('Add text box') }}</a></li>
+<li><a href ng-click="addBlock('button.af-button.btn-primary', {'crm-icon': 'fa-check', 'ng-click': 'modelListCtrl.submit()'})">{{ ts('Add button') }}</a></li>
+<li role="separator" class="divider"></li>
+<li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this block') }}</span></a></li>
diff --git a/ext/afform/gui/ang/afGuiEditor/block.html b/ext/afform/gui/ang/afGuiEditor/block.html
index 72d916f761..8fc03edcc4 100644
--- a/ext/afform/gui/ang/afGuiEditor/block.html
+++ b/ext/afform/gui/ang/afGuiEditor/block.html
@@ -13,13 +13,7 @@
     <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Add block') }}">
       <span><i class="crm-i fa-plus"></i></span>
     </button>
-    <ul class="dropdown-menu" ng-if="menu.open">
-      <li><a href ng-click="addBlock('div.af-block')">{{ ts('Add block') }}</a></li>
-      <li><a href ng-click="addBlock('p.af-text')">{{ ts('Add text box') }}</a></li>
-      <li><a href ng-click="addBlock('button.af-button.btn-primary', {'crm-icon': 'fa-check', 'ng-click': 'modelListCtrl.submit()'})">{{ ts('Add button') }}</a></li>
-      <li role="separator" class="divider"></li>
-      <li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this block') }}</span></a></li>
-    </ul>
+    <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/block-menu.html'"></ul>
   </div>
 </div>
 <div class="af-gui-bar" ng-if="node['#tag'] === 'af-form'" >
diff --git a/ext/afform/gui/ang/afGuiEditor/button-menu.html b/ext/afform/gui/ang/afGuiEditor/button-menu.html
new file mode 100644
index 0000000000..ab67fb5ccd
--- /dev/null
+++ b/ext/afform/gui/ang/afGuiEditor/button-menu.html
@@ -0,0 +1,10 @@
+<li>
+  <div ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown form-inline" >
+    <label>{{ ts('Style:') }}</label>
+    <select class="form-control {{ getSetStyle().replace('btn', 'text') }}" ng-model="getSetStyle" ng-model-options="{getterSetter: true}" title="{{ ts('Button style') }}">
+      <option ng-repeat="(style, label) in styles" class="{{ style.replace('btn', 'bg') }}" value="{{ style }}">{{ label }}</option>
+    </select>
+  </div>
+</li>
+<li role="separator" class="divider"></li>
+<li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this button') }}</span></a></li>
diff --git a/ext/afform/gui/ang/afGuiEditor/button.html b/ext/afform/gui/ang/afGuiEditor/button.html
index fe35de7674..be75644dff 100644
--- a/ext/afform/gui/ang/afGuiEditor/button.html
+++ b/ext/afform/gui/ang/afGuiEditor/button.html
@@ -4,17 +4,7 @@
       <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Configure') }}">
         <span><i class="crm-i fa-gear"></i></span>
       </button>
-      <ul class="dropdown-menu" ng-if="menu.open">
-        <li title="{{ ts('Button style') }}">
-          <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown" >
-            <select class="form-control {{ getSetStyle().replace('btn', 'text') }}" ng-model="getSetStyle" ng-model-options="{getterSetter: true}">
-              <option ng-repeat="(style, label) in styles" class="{{ style.replace('btn', 'bg') }}" value="{{ style }}">{{ ts('Color: %1', {1: label}) }}</option>
-            </select>
-          </a>
-        </li>
-        <li role="separator" class="divider"></li>
-        <li><a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this button') }}</span></a></li>
-      </ul>
+      <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/button-menu.html'"></ul>
     </div>
   </div>
 </div>
diff --git a/ext/afform/gui/ang/afGuiEditor/field-menu.html b/ext/afform/gui/ang/afGuiEditor/field-menu.html
new file mode 100644
index 0000000000..701dfcf8b5
--- /dev/null
+++ b/ext/afform/gui/ang/afGuiEditor/field-menu.html
@@ -0,0 +1,45 @@
+<li>
+  <div href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
+    <label>{{ ts('Type:') }}</label>
+    <select class="form-control" ng-model="getSet('input_type')" ng-model-options="{getterSetter: true}" title="{{ ts('Field type') }}">
+      <option ng-repeat="(type, label) in editor.meta.inputType" value="{{ type }}" ng-if="inputTypeCanBe(type)">{{ label }}</option>
+    </select>
+  </div>
+</li>
+<li>
+  <a href ng-click="toggleRequired(); $event.stopPropagation();" title="{{ ts('Require this field') }}">
+    <i class="crm-i" ng-class="{'fa-square-o': !getProp('required'), 'fa-check-square-o': getProp('required')}"></i>
+    {{ ts('Required') }}
+  </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>
+    {{ ts('Pre help text') }}
+  </a>
+</li>
+<li>
+  <a href ng-click="toggleHelp('post'); $event.stopPropagation();" title="{{ ts('Show help text below this field') }}">
+    <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_post'), 'fa-check-square-o': propIsset('help_post')}"></i>
+    {{ ts('Post help text') }}
+  </a>
+</li>
+<li role="separator" class="divider" ng-if="hasOptions()"></li>
+<li ng-if="hasOptions()" ng-click="$event.stopPropagation()">
+  <a href ng-click="resetOptions()" title="{{ ts('Reset the option list for this field') }}">
+    <i class="crm-i fa-{{ node.defn.options ? '' : 'check-' }}circle-o"></i>
+    {{ ts('Use default option list') }}
+  </a>
+</li>
+<li ng-if="hasOptions()">
+  <a href ng-click="editOptions()" title="{{ ts('Customize the option list for this field') }}">
+    <i class="crm-i fa-{{ !node.defn.options ? '' : 'check-' }}circle-o"></i>
+    {{ ts('Customize field options') }}
+  </a>
+</li>
+<li role="separator" class="divider"></li>
+<li>
+  <a href ng-click="block.removeBlock(node)" title="{{ ts('Remove field from form') }}">
+    <span class="text-danger">{{ ts('Delete this field') }}</span>
+  </a>
+</li>
diff --git a/ext/afform/gui/ang/afGuiEditor/field.html b/ext/afform/gui/ang/afGuiEditor/field.html
index b04caaf519..70288523f3 100644
--- a/ext/afform/gui/ang/afGuiEditor/field.html
+++ b/ext/afform/gui/ang/afGuiEditor/field.html
@@ -6,50 +6,7 @@
         <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Configure') }}">
           <span><i class="crm-i fa-gear"></i></span>
         </button>
-        <ul class="dropdown-menu dropdown-menu-right" ng-if="menu.open">
-          <li title="{{ ts('Field type') }}">
-            <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
-              <select class="form-control" ng-model="getSet('input_type')" ng-model-options="{getterSetter: true}">
-                <option ng-repeat="(type, label) in editor.meta.inputType" value="{{ type }}" ng-if="inputTypeCanBe(type)">{{ label }}</option>
-              </select>
-            </a>
-          </li>
-          <li title="{{ ts('Require this field') }}">
-            <a href ng-click="toggleRequired(); $event.stopPropagation();">
-              <i class="crm-i" ng-class="{'fa-square-o': !getProp('required'), 'fa-check-square-o': getProp('required')}"></i>
-              {{ ts('Required') }}
-            </a>
-          </li>
-          <li title="{{ ts('Show help text above this field') }}">
-            <a href ng-click="toggleHelp('pre'); $event.stopPropagation();">
-              <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_pre'), 'fa-check-square-o': propIsset('help_pre')}"></i>
-              {{ ts('Pre help text') }}
-            </a>
-          </li>
-          <li title="{{ ts('Show help text below this field') }}">
-            <a href ng-click="toggleHelp('post'); $event.stopPropagation();">
-              <i class="crm-i" ng-class="{'fa-square-o': !propIsset('help_post'), 'fa-check-square-o': propIsset('help_post')}"></i>
-              {{ ts('Post help text') }}
-            </a>
-          </li>
-          <li role="separator" class="divider" ng-if="hasOptions()"></li>
-          <li title="{{ ts('Reset the option list for this field') }}" ng-if="hasOptions()" ng-click="$event.stopPropagation()">
-            <a href ng-click="resetOptions()">
-              <i class="crm-i fa-{{ node.defn.options ? '' : 'check-' }}circle-o"></i>
-              {{ ts('Use default option list') }}
-            </a>
-          </li>
-          <li title="{{ ts('Customize the option list for this field') }}" ng-if="hasOptions()">
-            <a href ng-click="editOptions()">
-              <i class="crm-i fa-{{ !node.defn.options ? '' : 'check-' }}circle-o"></i>
-              {{ ts('Customize field options') }}
-            </a>
-          </li>
-          <li role="separator" class="divider"></li>
-          <li title="{{ ts('Remove field from form') }}">
-            <a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this field') }}</span></a>
-          </li>
-        </ul>
+        <ul class="dropdown-menu dropdown-menu-right" ng-if="menu.open" ng-include="'~/afGuiEditor/field-menu.html'"></ul>
       </div>
     </div>
   </div>
diff --git a/ext/afform/gui/ang/afGuiEditor/text-menu.html b/ext/afform/gui/ang/afGuiEditor/text-menu.html
new file mode 100644
index 0000000000..8fed55388d
--- /dev/null
+++ b/ext/afform/gui/ang/afGuiEditor/text-menu.html
@@ -0,0 +1,21 @@
+<li>
+  <div class="af-gui-field-select-in-dropdown" ng-click="$event.stopPropagation()">
+    <label>{{ ts('Style:') }}</label>
+    <select class="form-control" ng-model="node['#tag']" title="{{ ts('Text style') }}">
+      <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
+    </select>
+  </div>
+</li>
+<li>
+  <div class="af-gui-field-select-in-dropdown" ng-click="$event.stopPropagation()">
+    <div class="btn-group btn-group-sm" role="group">
+      <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>
+  </div>
+</li>
+<li role="separator" class="divider"></li>
+<li>
+  <a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this text') }}</span></a>
+</li>
diff --git a/ext/afform/gui/ang/afGuiEditor/text.html b/ext/afform/gui/ang/afGuiEditor/text.html
index 7c69daac64..a5a6261fc6 100644
--- a/ext/afform/gui/ang/afGuiEditor/text.html
+++ b/ext/afform/gui/ang/afGuiEditor/text.html
@@ -4,28 +4,7 @@
       <button type="button" class="btn btn-default btn-xs dropdown-toggle af-gui-add-block-button" data-toggle="dropdown" title="{{ ts('Configure') }}">
         <span><i class="crm-i fa-gear"></i></span>
       </button>
-      <ul class="dropdown-menu" ng-if="menu.open">
-        <li title="{{ ts('Text style') }}">
-          <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
-            <select class="form-control" ng-model="node['#tag']">
-              <option ng-repeat="(opt, label) in tags" value="{{ opt }}">{{ label }}</option>
-            </select>
-          </a>
-        </li>
-        <li>
-          <a href ng-click="$event.stopPropagation()" class="af-gui-field-select-in-dropdown">
-            <div class="btn-group btn-group-sm" role="group">
-              <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>
-          </a>
-        </li>
-        <li role="separator" class="divider"></li>
-        <li>
-          <a href ng-click="block.removeBlock(node)"><span class="text-danger">{{ ts('Delete this text') }}</span></a>
-        </li>
-      </ul>
+      <ul class="dropdown-menu" ng-if="menu.open" ng-include="'~/afGuiEditor/text-menu.html'"></ul>
     </div>
   </div>
 </div>
-- 
2.25.1