From 9651d93cdb395895a5a40c86e78eccdfb05601d8 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sat, 9 Nov 2019 09:07:14 -0500
Subject: [PATCH] GUI: Entity tab style improvements

---
 ext/afform/gui/ang/afGuiEditor.css         | 49 ++++++++++++++++------
 ext/afform/gui/ang/afGuiEditor/button.html |  2 +-
 ext/afform/gui/ang/afGuiEditor/entity.html | 22 +++++-----
 3 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index 08944397a1..9a3be93329 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -2,10 +2,6 @@
   display: flex;
 }
 
-#afGuiEditor .panel.panel-default {
-  /*margin-bottom: 0;*/
-}
-
 #afGuiEditor #afGuiEditor-palette {
   flex: 1;
   margin-right: 5px;
@@ -16,8 +12,20 @@
   margin-left: 5px;
 }
 
-#afGuiEditor-canvas .panel-body {
+#afGuiEditor .panel-body {
+  padding: 5px 12px;
+  position: relative;
+}
+
+#afGuiEditor fieldset legend {
   padding-top: 5px;
+  font-size: 16px;
+  margin-bottom: 5px !important;
+}
+
+#afGuiEditor hr {
+  margin-top: 15px;
+  margin-bottom: 10px;
 }
 
 #afGuiEditor #afGuiEditor-palette-tabs li {
@@ -29,9 +37,20 @@
   font-size: 12px;
 }
 
-#afGuiEditor #afGuiEditor-palette-tabs .dropdown-menu {
-  max-height: 500px;
-  overflow-y: auto;
+#afGuiEditor .af-gui-columns {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+}
+#afGuiEditor .af-gui-columns > * {
+  flex: 1;
+  min-width: 200px;
+}
+
+#afGuiEditor .af-gui-remove-entity {
+  position: absolute;
+  right: 3px;
+  top: 3px;
 }
 
 #afGuiEditor .crm-editable-enabled,
@@ -123,10 +142,6 @@
   color: white;
 }
 
-#afGuiEditor .af-gui-entity-fields legend {
-  margin-bottom: 0 !important;
-}
-
 #afGuiEditor [ui-sortable] {
   min-height: 25px;
 }
@@ -208,3 +223,13 @@
   position: relative;
   top: -8px;
 }
+
+#afGuiEditor .af-gui-button > .btn.disabled {
+  cursor: default !important;
+  color: white !important;
+}
+
+#afGuiEditor .af-gui-button > .btn-default.disabled {
+  background-color: lightgrey !important;
+}
+
diff --git a/ext/afform/gui/ang/afGuiEditor/button.html b/ext/afform/gui/ang/afGuiEditor/button.html
index 60d8a0a8c2..391130c45a 100644
--- a/ext/afform/gui/ang/afGuiEditor/button.html
+++ b/ext/afform/gui/ang/afGuiEditor/button.html
@@ -22,7 +22,7 @@
     </div>
   </div>
 </div>
-<button type="button" class="btn {{ getStyle() }}">
+<button type="button" class="btn {{ getStyle() }} disabled">
   <span class="crm-editable-enabled" ng-click="pickIcon()" >
     <i class="crm-i {{ node['crm-icon'] }}"></i>
   </span>
diff --git a/ext/afform/gui/ang/afGuiEditor/entity.html b/ext/afform/gui/ang/afGuiEditor/entity.html
index 558110b11b..3359340867 100644
--- a/ext/afform/gui/ang/afGuiEditor/entity.html
+++ b/ext/afform/gui/ang/afGuiEditor/entity.html
@@ -1,17 +1,14 @@
-<div>
-  <a href ng-click="editor.removeEntity(entity.name)" class="btn btn-sm btn-danger-outline pull-right">
-    <i class="crm-i fa-trash"></i>
-  </a>
-
+<div class="af-gui-columns">
   <fieldset class="af-gui-entity-values">
     <legend>{{ ts('Values') }}</legend>
     <div class="form-inline" ng-if="entity.data" ng-repeat="(fieldName, value) in entity.data">
-      <label>{{ editor.getField(entity.type, fieldName).title }}:</label>
+      <label>{{ editor.getField(entity.type, fieldName).title }}:</label><br />
       <input class="form-control" af-gui-field-value="editor.getField(entity.type, fieldName)" ng-model="entity.data[fieldName]" />
-      <a href class="pull-right" ng-click="removeValue(entity, fieldName)">
+      <a href class="" ng-click="removeValue(entity, fieldName)">
         <i class="crm-i fa-times"></i>
       </a>
     </div>
+    <hr />
     <div class="form-inline">
       <input class="form-control" ng-model="controls.addValue" crm-ui-select="{data: valuesFields}" placeholder="Add value" />
     </div>
@@ -31,9 +28,12 @@
       </div>
     </div>
   </fieldset>
+</div>
 
-  <fieldset>
-    <legend>{{ ts('Options') }}</legend>
-  </fieldset>
+<a href ng-click="editor.removeEntity(entity.name)" class="btn btn-sm btn-danger-outline af-gui-remove-entity" title="{{ ts('Remove %1', {1: entity.type}) }}">
+  <i class="crm-i fa-trash"></i>
+</a>
 
-</div>
+<fieldset>
+  <legend>{{ ts('Options') }}</legend>
+</fieldset>
-- 
2.25.1