CRM-13966 - Improve select2 description formatting

diff --git a/api/v3/Contact.php b/api/v3/Contact.php
index e0e7e8d620d18c04dccdb5fce9afca79e66206cb..4031b9b0f47548045f87d4d624dc997ab97fc9c3 100644 (file)
--- a/api/v3/Contact.php
+++ b/api/v3/Contact.php
@@ -941,18 +941,27 @@ function _civicrm_api3_contact_getlist_params(&$request) {
 function _civicrm_api3_contact_getlist_output($result, $request) {
   $output = array();
   if (!empty($result['values'])) {
+    $addressFields = array_intersect(array('street_address', 'city', 'state_province', 'country'), $request['params']['return']);
     foreach ($result['values'] as $row) {
       $data = array(
         'id' => $row[$request['id_field']],
         'label' => $row[$request['label_field']],
+        'description' => array(),
       );
-      $description = array();
       foreach ($request['params']['return'] as $item) {
-        if (!strpos($item, '_name') && $item != 'contact_type' && !empty($row[$item])) {
-          $description[] = $row[$item];
+        if (!strpos($item, '_name') && $item != 'contact_type' && !in_array($item, $addressFields) && !empty($row[$item])) {
+          $data['description'][] = $row[$item];
         }
       }
-      $data['description'] = implode(' :: ', $description);
+      $address = array();
+      foreach($addressFields as $item) {
+        if (!empty($row[$item])) {
+          $address[] = $row[$item];
+        }
+      }
+      if ($address) {
+        $data['description'][] = implode(' ', $address);
+      }
       if (!empty($request['image_field'])) {
         $data['image'] = isset($row[$request['image_field']]) ? $row[$request['image_field']] : '';
       }

diff --git a/api/v3/Event.php b/api/v3/Event.php
index 359afee5d2cce46ff9b082e196eb2d5e99dac7cf..78fd0527340fdd87653f7ed5cc16be8afe1df7a6 100644 (file)
--- a/api/v3/Event.php
+++ b/api/v3/Event.php
@@ -261,13 +261,13 @@ function _civicrm_api3_event_getlist_output($result, $request) {
       $data = array(
         'id' => $row[$request['id_field']],
         'label' => $row[$request['label_field']],
-        'description' => CRM_Core_Pseudoconstant::getLabel('CRM_Event_BAO_Event', 'event_type_id', $row['event_type_id']),
+        'description' => array(CRM_Core_Pseudoconstant::getLabel('CRM_Event_BAO_Event', 'event_type_id', $row['event_type_id'])),
       );
       if (!empty($row['start_date'])) {
-        $data['description'] .= ': ' . CRM_Utils_Date::customFormat($row['start_date']);
+        $data['description'][0] .= ': ' . CRM_Utils_Date::customFormat($row['start_date']);
       }
       if (!empty($row['summary'])) {
-        $data['description'] .= '<br />' . $row['summary'];
+        $data['description'][] = $row['summary'];
       }
       $output[] = $data;
     }

diff --git a/api/v3/Generic/Getlist.php b/api/v3/Generic/Getlist.php
index 4ab281940f16e234d2a80445e655e5fc5ef90fb4..2754159c9e830c5fc5ef062409b64dce97e2e0ce 100644 (file)
--- a/api/v3/Generic/Getlist.php
+++ b/api/v3/Generic/Getlist.php
@@ -149,7 +149,7 @@ function _civicrm_api3_generic_getlist_output($result, $request) {
         'label' => $row[$request['label_field']],
       );
       if (!empty($request['description_field'])) {
-        $data['description'] = isset($row[$request['description_field']]) ? $row[$request['description_field']] : '';
+        $data['description'] = !empty($row[$request['description_field']]) ? array($row[$request['description_field']]) : NULL;
       };
       if (!empty($request['image_field'])) {
         $data['image'] = isset($row[$request['image_field']]) ? $row[$request['image_field']] : '';

diff --git a/css/civicrm.css b/css/civicrm.css
index d5ee1f0b143cfdcaae20cff89b9e82f2ee9112fe..9b0be57d6e5b7001abd013ba215ba7ec6dbdb228 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3869,37 +3869,40 @@ div.m ul#civicrm-menu,
   background-position: -18px 1px;
 }
 /* Style autocomplete results */
-.crm-container .select2-results table.crm-select2-row,
-.crm-container .select2-results table.crm-select2-row tbody,
-.crm-container .select2-results table.crm-select2-row tr,
-.crm-container .select2-results table.crm-select2-row td {
-  border: 0 none;
+.crm-container .select2-results {
+  padding: 0;
+}
+.crm-container .select2-results li,
+.crm-container .select2-results .crm-select2-row,
+.crm-container .select2-results .crm-select2-row .crm-select2-row-description p {
   padding: 0;
   margin: 0;
-  border-collapse: collapse;
 }
-.crm-container .select2-results table.crm-select2-row .crm-select2-row-label {
+.crm-container .select2-results .crm-select2-row .crm-select2-row-label {
   font-size: 1.1em;
 }
-.crm-container .select2-results table.crm-select2-row .crm-select2-row-description {
+.crm-container .select2-results .crm-select2-row .crm-select2-row-description p {
   font-size: 0.8em;
   line-height: 1.5em;
   color: #696969;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.crm-container .select2-results .select2-highlighted table.crm-select2-row .crm-select2-row-description {
+.crm-container .select2-results .select2-highlighted .crm-select2-row .crm-select2-row-description p {
   color: #f0f0f0;
 }
-.crm-container .select2-results td.crm-select2-icon {
+.crm-container .select2-results .crm-select2-icon {
   width: 20px;
+  height: 100%;
+  float: left;
 }
-.crm-container .select2-results td.crm-select2-icon .crm-icon {
+.crm-container .select2-results .crm-select2-icon .crm-icon {
   width: 16px;
   height: 16px;
   margin: 0;
 }
-.crm-container .select2-results {
-  padding: 0;
-}
 .crm-container .select2-results li.select2-no-results {
   padding-left: 4px;
   padding-top: 4px;

diff --git a/js/Common.js b/js/Common.js
index 37577b1bcdab7e85e00f9418f79baa407b26edb7..fda00936e06e727ce590aa19868aef9d1ef42634 100644 (file)
--- a/js/Common.js
+++ b/js/Common.js
@@ -272,16 +272,19 @@ CRM.validate = CRM.validate || {
   };
 
   CRM.utils.formatSelect2Result = function(row) {
-    var markup = '<table class="crm-select2-row"><tr>';
+    var markup = '<div class="crm-select2-row">';
     if (row.image !== undefined) {
-      markup += '<td class="crm-select2-image"><img src="' + row.image + '"/></td>';
+      markup += '<div class="crm-select2-image"><img src="' + row.image + '"/></div>';
     }
     else if (row.icon_class) {
-      markup += '<td class="crm-select2-icon"><div class="crm-icon ' + row.icon_class + '-icon"></div></td>';
+      markup += '<div class="crm-select2-icon"><div class="crm-icon ' + row.icon_class + '-icon"></div></div>';
     }
-    markup += '<td><div class="crm-select2-row-label">' + row.label + '</div>';
-    markup += '<div class="crm-select2-row-description">' + (row.description || '') + '</div>';
-    markup += '</td></tr></table>';
+    markup += '<div><div class="crm-select2-row-label">' + row.label + '</div>';
+    markup += '<div class="crm-select2-row-description">';
+    $.each(row.description || [], function(k, text) {
+      markup += '<p>' + text + '</p>';
+    });
+    markup += '</div></div></div>';
     return markup;
   };