CRM-16158 - More compact quicksearch in menu

diff --git a/templates/CRM/common/navigation.js.tpl b/templates/CRM/common/navigation.js.tpl
index 553e248b9d9d8fcb1d7a430230177f668eaa50a2..bf0610f37faff89705f9a0d5faec37473976421e 100644 (file)
--- a/templates/CRM/common/navigation.js.tpl
+++ b/templates/CRM/common/navigation.js.tpl
@@ -29,7 +29,7 @@
       <li id="crm-qsearch" class="menumain">
         <form action="{crmURL p='civicrm/contact/search/advanced' h=0 }" name="search_block" id="id_search_block" method="post">
           <div id="quickSearch">
-            <input type="text" class="form-text" id="sort_name_navigation" placeholder="{ts}Find Contacts{/ts}" name="sort_name" style="width: 12em;" />
+            <input type="text" class="form-text" id="sort_name_navigation" placeholder="{ts}Contacts{/ts}" name="sort_name" style="width: 6em;" />
             <input type="text" id="sort_contact_id" style="display: none" />
             <input type="hidden" name="hidden_location" value="1" />
             <input type="hidden" name="qfKey" value="" />
@@ -111,7 +111,7 @@ $('#civicrm-menu').ready(function() {
           response(ret);
         })
       },
-      focus: function (event, ui){
+      focus: function (event, ui) {
         return false;
       },
       select: function (event, ui) {
@@ -125,6 +125,17 @@ $('#civicrm-menu').ready(function() {
     })
     .keydown(function() {
       $.Menu.closeAll();
+    })
+    .on('focus', function() {
+      if ($(this).attr('style').indexOf('14em') < 0) {
+        $(this).animate({width: '14em'});
+      }
+    })
+    .on('blur', function() {
+      // Shrink if no input and menu is not open
+      if (!$(this).val().length && $(this).attr('style').indexOf('6em') < 0 && !$('.crm-quickSearchField:visible', '#root-menu-div').length) {
+        $(this).animate({width: '6em'});
+      }
     });
   $('.crm-hidemenu').click(function(e) {
     $('#civicrm-menu').slideUp();