From 30a8f784a0a139fc5576cc430a3326088beb76fd Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 23 Feb 2021 08:31:38 -0500
Subject: [PATCH] SearchKit - More efficient use of space when configuring
 display fields

---
 .../crmSearchAdminLinkSelect.component.js     | 29 ++++++++++++-------
 .../crmSearchAdminLinkSelect.html             | 14 +++++----
 .../displays/common/fieldOptions.html         | 16 +++++-----
 ext/search/css/crmSearchAdmin.css             | 11 +++++++
 4 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js
index 5a2a8ab853..dc916ad98d 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.component.js
@@ -49,23 +49,32 @@
         return links;
       }
 
-      function onChange() {
-        var val = $('select', $element).val();
-        if (val !== ctrl.column.link) {
-          var link = ctrl.getLink(val);
-          if (link) {
-            ctrl.column.link = link.path;
-            ctrl.column.title = link.title;
-          } else if (val === 'civicrm/') {
+      this.setValue = function(val) {
+        var link = ctrl.getLink(val),
+          oldLink = ctrl.getLink(ctrl.column.link);
+        if (link) {
+          ctrl.column.link = link.path;
+          ctrl.column.title = link.title;
+        } else {
+          if (val === 'civicrm/') {
             ctrl.column.link = val;
-            $timeout(function() {
-              $('input', $element).focus();
+            $timeout(function () {
+              $('input[type=text]', $element).focus();
             });
           } else {
             ctrl.column.link = '';
+          }
+          if (oldLink && ctrl.column.title === oldLink.title) {
             ctrl.column.title = '';
           }
         }
+      };
+
+      function onChange() {
+        var val = $('select', $element).val();
+        if (val !== ctrl.column.link) {
+          ctrl.setValue(val);
+        }
       }
 
       this.$onInit = function() {
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html
index 74bc729130..3f0fa40aeb 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminLinkSelect.html
@@ -1,5 +1,9 @@
-<select class="form-control">
-  <option value="" ng-selected="!$ctrl.column.link" >{{ ts('None') }}</option>
+<label title="{{ ts('Display as clickable link') }}" >
+  <input type="checkbox" ng-checked="$ctrl.column.link" ng-click="$ctrl.setValue($ctrl.column.link ? '' : ($ctrl.links[0] && $ctrl.links[0].path || 'civicrm/'))" >
+  {{ $ctrl.column.link ? ts('Link:') : ts('Link') }}
+</label>
+<select class="form-control" ng-show="$ctrl.links.length && $ctrl.column.link">
+  <option value="">{{ ts('None') }}</option>
   <option ng-repeat="link in $ctrl.links" value="{{ link.path }}" ng-selected="$ctrl.column.link === link.path">
     {{ link.title }}
   </option>
@@ -7,7 +11,5 @@
     {{ ts('Other...') }}
   </option>
 </select>
-<div class="form-group" ng-if="$ctrl.column.link && !$ctrl.getLink($ctrl.column.link)">
-  <input class="form-control" type="text" ng-model="$ctrl.column.link" ng-model-options="{updateOn: 'blur'}" />
-  <crm-search-admin-token-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="$ctrl.column" field="link"></crm-search-admin-token-select>
-</div>
+<input class="form-control" type="text" ng-if="$ctrl.column.link && !$ctrl.getLink($ctrl.column.link)" ng-model="$ctrl.column.link" ng-model-options="{updateOn: 'blur'}" />
+<crm-search-admin-token-select ng-if="$ctrl.column.link && !$ctrl.getLink($ctrl.column.link)" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="$ctrl.column" field="link"></crm-search-admin-token-select>
diff --git a/ext/search/ang/crmSearchAdmin/displays/common/fieldOptions.html b/ext/search/ang/crmSearchAdmin/displays/common/fieldOptions.html
index 8524d41091..81f1b302f6 100644
--- a/ext/search/ang/crmSearchAdmin/displays/common/fieldOptions.html
+++ b/ext/search/ang/crmSearchAdmin/displays/common/fieldOptions.html
@@ -1,9 +1,9 @@
-<div class="form-inline">
-  <label>{{:: ts('Link:') }}</label>
-  <crm-search-admin-link-select column="col" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></crm-search-admin-link-select>
-</div>
-<div class="form-inline">
-  <label>{{:: ts('Tooltip:') }}</label>
-  <input class="form-control" type="text" ng-model="col.title" />
-  <crm-search-admin-token-select api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="title"></crm-search-admin-token-select>
+<crm-search-admin-link-select class="form-inline crm-search-admin-flex-row" column="col" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams"></crm-search-admin-link-select>
+<div class="form-inline crm-search-admin-flex-row">
+  <label>
+    <input type="checkbox" ng-checked="col.title" ng-click="col.title = col.title ? null : $ctrl.parent.getFieldLabel(col.key)" >
+    {{ col.title ? ts('Tooltip:') : ts('Tooltip') }}
+  </label>
+  <input class="form-control" type="text" ng-model="col.title" ng-if="col.title" ng-model-options="{updateOn: 'blur'}" />
+  <crm-search-admin-token-select ng-if="col.title" api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" model="col" field="title"></crm-search-admin-token-select>
 </div>
diff --git a/ext/search/css/crmSearchAdmin.css b/ext/search/css/crmSearchAdmin.css
index 69a780068a..2121cd507a 100644
--- a/ext/search/css/crmSearchAdmin.css
+++ b/ext/search/css/crmSearchAdmin.css
@@ -153,6 +153,17 @@
   top: 0;
 }
 
+#bootstrap-theme .crm-search-admin-flex-row {
+  display: flex;
+  align-items: center;
+}
+#bootstrap-theme .crm-search-admin-flex-row > *:not(:first-child) {
+  margin-left: 6px;
+}
+#bootstrap-theme .crm-search-admin-flex-row > input[type=text] {
+  flex: 1;
+}
+
 #bootstrap-theme input[type=search]::placeholder {
   font-family: FontAwesome;
   text-align: right;
-- 
2.25.1