From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 22 Aug 2014 15:09:57 +0000 (+0100)
Subject: Cleanup and rearrange adv search location pane
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=12fbb7b3fa775b3d8ef62201e020c0e91629db90;p=civicrm-core.git

Cleanup and rearrange adv search location pane
---

diff --git a/CRM/Contact/Form/Search/Criteria.php b/CRM/Contact/Form/Search/Criteria.php
index 20e8ca637e..2513ee6460 100644
--- a/CRM/Contact/Form/Search/Criteria.php
+++ b/CRM/Contact/Form/Search/Criteria.php
@@ -271,9 +271,10 @@ class CRM_Contact_Form_Search_Criteria {
 
 
   /**
-   * @param $form
+   * @param CRM_Core_Form $form
    */
   static function location(&$form) {
+    $config = CRM_Core_Config::singleton();
     // Build location criteria based on _submitValues if
     // available; otherwise, use $form->_formValues.
     $formValues = $form->_submitValues;
@@ -366,25 +367,24 @@ class CRM_Contact_Form_Search_Criteria {
       }
 
       if ($addressOptions['postal_code']) {
-        $form->addElement('text', 'postal_code_low', ts('Range-From'),
-          CRM_Utils_Array::value('postal_code', $attributes)
-        );
-        $form->addElement('text', 'postal_code_high', ts('To'),
-          CRM_Utils_Array::value('postal_code', $attributes)
-        );
+        $attr = array('class' => 'six') + (array) CRM_Utils_Array::value('postal_code', $attributes);
+        $form->addElement('text', 'postal_code_low', NULL, $attr + array('placeholder' => ts('From')));
+        $form->addElement('text', 'postal_code_high', NULL, $attr + array('placeholder' => ts('To')));
       }
     }
 
     CRM_Core_BAO_Address::addStateCountryMap($stateCountryMap);
 
     // extend addresses with proximity search
-    $form->addElement('text', 'prox_distance', ts('Find contacts within'), array('class' => 'six'));
-    $form->addElement('select', 'prox_distance_unit', NULL, array('miles' => ts('Miles'), 'kilos' => ts('Kilometers')));
-
-    // is there another form rule that does decimals besides money ? ...
-    $form->addRule('prox_distance', ts('Please enter positive number as a distance'), 'numeric');
+    if (!empty($config->geocodeMethod)) {
+      $form->addElement('text', 'prox_distance', ts('Find contacts within'), array('class' => 'six'));
+      $form->addElement('select', 'prox_distance_unit', NULL, array(
+        'miles' => ts('Miles'),
+        'kilos' => ts('Kilometers')
+      ));
+      $form->addRule('prox_distance', ts('Please enter positive number as a distance'), 'numeric');
+    }
 
-    $worldRegions = array('' => '') + CRM_Core_PseudoConstant::worldRegion();
     $form->addSelect('world_region', array('entity' => 'address', 'placeholder' => ts('- any -'), 'option_url' => NULL));
 
     // select for location type
diff --git a/css/civicrm.css b/css/civicrm.css
index e3086ff71b..7063dfe077 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -414,6 +414,7 @@ input.crm-form-entityref {
 }
 
 .crm-container .crm-section,
+.crm-container div.crm-field-wrapper,
 .crm-container-snippet .crm-section {
   margin-bottom: 1em;
 }
@@ -3074,7 +3075,7 @@ div a.helpicon:focus {
 }
 
 /* Override Drupal .2em margin-bottom on forms (we don't want to give up that space) */
-div#crm-container form {
+div.crm-container form {
   margin-bottom: 0em;
 }
 
diff --git a/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl b/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl
index 6b302739c5..c4cf066313 100644
--- a/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl
+++ b/templates/CRM/Contact/Form/Search/Criteria/Basic.tpl
@@ -69,31 +69,29 @@
   {/if}
   {if $form.group}
     <td>
-      <div id='groupselect'><label>{ts}Group(s){/ts} <span class="description">(<a id='searchbygrouptype'>{ts}search by group type{/ts}</a>)</span></label>
+      <div id='groupselect'><label>{ts}Group(s){/ts} <span class="description">(<a href="#" id='searchbygrouptype'>{ts}search by group type{/ts}</a>)</span></label>
         {$form.group.html}
     </div>
     <div id='grouptypeselect'>
-      <label>{ts}Group Type(s){/ts} <span class="description"> (<a id='searchbygroup'>{ts}search by group{/ts}</a>)</span></label>
+      <label>{ts}Group Type(s){/ts} <span class="description"> (<a href="#" id='searchbygroup'>{ts}search by group{/ts}</a>)</span></label>
       {$form.group_type.html}
         {literal}
         <script type="text/javascript">
         CRM.$(function($) {
-          function showGroupSearch(){
+          function showGroupSearch() {
             $('#grouptypeselect').hide();
             $('#groupselect').show();
             $('#group_type').select2('val', '');
+            return false;
           }
-          function showGroupTypeSearch(){
+          function showGroupTypeSearch() {
             $('#groupselect').hide();
             $('#grouptypeselect').show();
             $('#group').select2('val', '');
+            return false;
           }
-          $('#searchbygrouptype').click(function() {
-              showGroupTypeSearch();
-          });
-          $('#searchbygroup').click(function() {
-              showGroupSearch();
-          });
+          $('#searchbygrouptype').click(showGroupTypeSearch);
+          $('#searchbygroup').click(showGroupSearch);
 
           if ($('#group_type').val() ) {
             showGroupTypeSearch();
diff --git a/templates/CRM/Contact/Form/Search/Criteria/Location.tpl b/templates/CRM/Contact/Form/Search/Criteria/Location.tpl
index 9db8068a25..756ac6b2ef 100644
--- a/templates/CRM/Contact/Form/Search/Criteria/Location.tpl
+++ b/templates/CRM/Contact/Form/Search/Criteria/Location.tpl
@@ -27,82 +27,101 @@
   <table class="form-layout">
     <tr>
       <td>
-        <div>{$form.location_type.label} {help id="location_type" title=$form.location_type.label}</div>
-        {$form.location_type.html}
-      </td>
-      <td colspan="2">
-        <div id="streetAddress">
+        <div id="streetAddress" class="crm-field-wrapper">
           {$form.street_address.label}<br />
           {$form.street_address.html|crmAddClass:big}
           {if $parseStreetAddress}
-          <br /><a href="#" title="{ts}Use Address Elements{/ts}" onClick="processAddressFields( 'addressElements' , 1 );return false;">{ts}Use Address Elements{/ts}</a>
+            <div>
+              <a href="#" title="{ts}Use Address Elements{/ts}" rel="addressElements" class="address-elements-toggle">{ts}Use Address Elements{/ts}</a>
+            </div>
+          {/if}
         </div>
-        <div id="addressElements" class=hiddenElement>
+        {if $parseStreetAddress}
+        <div id="addressElements" class="crm-field-wrapper" style="display: none;">
           <table class="crm-block crm-form-block advanced-search-address-elements">
             <tr><td>{$form.street_number.label}<br />{$form.street_number.html}<br /><span class="description nowrap">{ts}or ODD / EVEN{/ts}</td>
               <td>{$form.street_name.label}<br />{$form.street_name.html}</td>
               <td>{$form.street_unit.label}<br />{$form.street_unit.html|crmAddClass:four}</td>
             </tr>
             <tr>
-              <td colspan="3"><a href="#" title="{ts}Use Complete Address{/ts}" onClick="processAddressFields( 'streetAddress', 1 );return false;">{ts}Use Street Address{/ts}</a></td>
+              <td colspan="3"><a href="#" title="{ts}Use Complete Address{/ts}" rel="streetAddress" class="address-elements-toggle">{ts}Use Street Address{/ts}</a></td>
             </tr>
           </table>
         </div>
         {/if}
-        <br />
-        {$form.city.label}<br />
-        {$form.city.html}
+        <div class="crm-field-wrapper">
+          {$form.city.label}<br />
+          {$form.city.html}
+        </div>
+        <div class="crm-field-wrapper">
+          {$form.country.label}<br />
+          {$form.country.html}
+        </div>
+        <div class="crm-field-wrapper">
+          {$form.state_province.label}<br />
+          {$form.state_province.html}
+        </div>
+        <div class="crm-field-wrapper">
+          {$form.county.label}<br />
+          {$form.county.html}
+        </div>
+        <div class="crm-field-wrapper">
+          {$form.world_region.label}<br />
+          {$form.world_region.html}
+        </div>
       </td>
-    </tr>
 
-    <tr>
       <td>
+        <div class="crm-field-wrapper">
+          <div>{$form.location_type.label} {help id="location_type" title=$form.location_type.label}</div>
+          {$form.location_type.html}
+        </div>
+        {if $form.address_name.html}
+          <div class="crm-field-wrapper">
+            {$form.address_name.label}<br />
+            {$form.address_name.html}
+          </div>
+        {/if}
         {if $form.postal_code.html}
-        <table class="inner-table">
-          <tr>
-            <td>
-              {$form.postal_code.label}<br />
+          <div class="crm-field-wrapper">
+            {$form.postal_code.label}
+            <input type="checkbox" id="postal-code-range-toggle" value="1"/>
+            <label for="postal-code-range-toggle">{ts}Range{/ts}</label><br />
+            <div class="postal_code-wrapper">
               {$form.postal_code.html}
-            </td>
-            <td>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-              <label>{ts}OR{/ts}</label>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            </td>
-            <td><label>{ts}Postal Code{/ts}</label>
-              {$form.postal_code_low.label|replace:'-':'<br />'}
-              &nbsp;&nbsp;{$form.postal_code_low.html|crmAddClass:six}
-              {$form.postal_code_high.label}
-              &nbsp;&nbsp;{$form.postal_code_high.html|crmAddClass:six}
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2">&nbsp;</td>
-            <td>{$form.prox_distance.label}<br />{$form.prox_distance.html}&nbsp;{$form.prox_distance_unit.html}</td>
-          </tr>
-          <tr>
-            <td colspan="2">{$form.address_name.label}<br />
-              {$form.address_name.html|crmAddClass:medium}
-            </td>
-            <td>{$form.world_region.label}<br />
-              {$form.world_region.html}&nbsp;
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2">{$form.county.label}<br />
-              {$form.county.html}&nbsp;
-            </td>
-            <td>{$form.country.label}<br />
-              {$form.country.html}&nbsp;
-            </td>
-          </tr>
-        </table>
-        {/if}&nbsp;
-      </td>
-      <td>{$form.state_province.label}<br />
-        {$form.state_province.html}
+            </div>
+            <div class="postal_code_range-wrapper" style="display: none;">
+              {$form.postal_code_low.html}&nbsp;-&nbsp;{$form.postal_code_high.html}
+            </div>
+          </div>
+          <script type="text/javascript">
+            {literal}
+            CRM.$(function($) {
+              $('#postal-code-range-toggle').change(function() {
+                if ($(this).is(':checked')) {
+                  $('.postal_code_range-wrapper').show();
+                  $('.postal_code-wrapper').hide().find('input').val('');
+                } else {
+                  $('.postal_code-wrapper').show();
+                  $('.postal_code_range-wrapper').hide().find('input').val('');
+                }
+              });
+              if ($('#postal_code_low').val() || $('#postal_code_high').val()) {
+                $('#postal-code-range-toggle').prop('checked', true).change();
+              }
+            });
+            {/literal}
+          </script>
+        {/if}
+        {if $form.prox_distance.html}
+          <div class="crm-field-wrapper">
+            {$form.prox_distance.label}<br />
+            {$form.prox_distance.html}&nbsp;{$form.prox_distance_unit.html}
+          </div>
+        {/if}
       </td>
     </tr>
+
     {if $addressGroupTree}
       <tr>
         <td colspan="2">
@@ -113,36 +132,28 @@
   </table>
 </div>
 
-{if $parseStreetAddress eq 1}
+{if $parseStreetAddress}
   {literal}
     <script type="text/javascript">
-      function processAddressFields(name, loadData) {
-        if (name == 'addressElements') {
-          if (loadData) {
-            cj('#street_address').val('');
-          }
-
-          cj('#addressElements').show();
-          cj('#streetAddress').hide();
-        } else {
-          if (loadData) {
-            cj('#street_name, #street_unit, #street_number').val('');
+      CRM.$(function($) {
+        function processAddressFields(name) {
+          $('#' + name).show();
+          if (name == 'addressElements') {
+            $('#streetAddress').hide().find('input').val('');
+          } else {
+            $('#addressElements').hide().find('input').val('');
           }
 
-          cj('#streetAddress').show();
-          cj('#addressElements').hide();
         }
-
-      }
-
-      CRM.$(function($) {
-          if ($('#street_name').val().length > 0 ||
-            $('#street_unit').val().length > 0 ||
-            $('#street_number').val().length > 0) {
-            processAddressFields('addressElements', 1);
-          }
+        $("a.address-elements-toggle").click(function(e) {
+          e.preventDefault();
+          processAddressFields(this.rel);
+        });
+        if ($('#street_name').val() || $('#street_unit').val() || $('#street_number').val()) {
+          processAddressFields('addressElements');
         }
-      );
+      }
+    );
 
     </script>
   {/literal}