Improvements to DIMP Search UI

diff --git a/imp/js/src/DimpBase.js b/imp/js/src/DimpBase.js
index 3e8c0ef..7b1255d 100644 (file)
--- a/imp/js/src/DimpBase.js
+++ b/imp/js/src/DimpBase.js
@@ -90,7 +90,7 @@ var DimpBase = {
         // from the search input, because the user may immediately start
         // keyboard navigation after that. Thus, we need to ensure that a
         // message click loses focus on the search input.
-        $('quicksearch_input').blur();
+        $('qsearch_input').blur();
 
         if (opts.shift) {
             if (selcount) {
@@ -406,7 +406,7 @@ var DimpBase = {
             onAjaxRequest: function(id) {
                 var p = this.isSearch(id)
                     ? $H({
-                        qsearch: $F('quicksearch_input'),
+                        qsearch: $F('qsearch_input'),
                         qsearchmbox: this.sfolder
                     })
                     : $H();
@@ -494,9 +494,9 @@ var DimpBase = {
 
                 // Check for search strings
                 if (this.isSearch()) {
-                    re = new RegExp("(" + $F('quicksearch_input') + ")", "i");
+                    re = new RegExp("(" + $F('qsearch_input') + ")", "i");
                     [ 'from', 'subject' ].each(function(h) {
-                        row[h] = row[h].gsub(re, '<span class="quicksearchMatch">#{1}</span>');
+                        row[h] = row[h].gsub(re, '<span class="qsearchMatch">#{1}</span>');
                     });
                 }
 
@@ -1216,16 +1216,10 @@ var DimpBase = {
         return (id ? id : this.folder) == this.qsearchid;
     },
 
-    _quicksearchOnFocus: function()
-    {
-        if (!$('quicksearch').hasClassName('quicksearchActive')) {
-            this._setFilterText(false);
-        }
-    },
-
     _quicksearchOnBlur: function()
     {
-        if (!$F('quicksearch_input')) {
+        $('qsearch').removeClassName('qsearchFocus');
+        if (!$F('qsearch_input')) {
             this._setFilterText(true);
         }
     },
@@ -1236,7 +1230,7 @@ var DimpBase = {
             this.viewport.reload();
         } else {
             this.sfolder = this.folder;
-            $('quicksearch_close').show();
+            $('qsearch_close').show();
             this.loadMailbox(this.qsearchid);
         }
     },
@@ -1245,8 +1239,10 @@ var DimpBase = {
     quicksearchClear: function(noload)
     {
         if (this.isSearch()) {
-            this._setFilterText(true);
-            $('quicksearch_close').hide();
+            $('qsearch_close').hide();
+            if (!$('qsearch').hasClassName('qsearchFocus')) {
+                this._setFilterText(true);
+            }
             this.resetSelected();
             if (!noload) {
                 this.loadMailbox(this.sfolder);
@@ -1258,8 +1254,8 @@ var DimpBase = {
     // d = (boolean) Deactivate filter input?
     _setFilterText: function(d)
     {
-        $('quicksearch_input').setValue(d ? DIMP.text.search : '');
-        [ $('quicksearch') ].invoke(d ? 'removeClassName' : 'addClassName', 'quicksearchActive');
+        $('qsearch_input').setValue(d ? DIMP.text.search : '');
+        [ $('qsearch') ].invoke(d ? 'removeClassName' : 'addClassName', 'qsearchActive');
     },
 
     /* Enable/Disable DIMP action buttons as needed. */
@@ -1334,7 +1330,7 @@ var DimpBase = {
             case Event.KEY_ESC:
             case Event.KEY_TAB:
                 // Catch escapes in search box
-                if (elt.readAttribute('id') == 'quicksearch_input') {
+                if (elt.readAttribute('id') == 'qsearch_input') {
                     if (kc == Event.KEY_ESC || !elt.getValue()) {
                         this.quicksearchClear();
                     }
@@ -1348,8 +1344,8 @@ var DimpBase = {
                 if (form.readAttribute('id') == 'RB_folder') {
                     this.cfolderaction(e);
                     e.stop();
-                } else if (elt.readAttribute('id') == 'quicksearch_input') {
-                    if ($F('quicksearch_input')) {
+                } else if (elt.readAttribute('id') == 'qsearch_input') {
+                    if ($F('qsearch_input')) {
                         this.quicksearchRun();
                     } else {
                         this.quicksearchClear();
@@ -1588,8 +1584,17 @@ var DimpBase = {
                 }
                 break;
 
-            case 'quicksearch_close':
+            case 'qsearch_close':
                 this.quicksearchClear();
+                e.stop();
+                return;
+
+            case 'qsearch':
+                elt.addClassName('qsearchFocus');
+                if (!elt.hasClassName('qsearchActive')) {
+                    this._setFilterText(false);
+                }
+                $('qsearch_input').focus();
                 break;
 
             default:
@@ -2240,8 +2245,7 @@ var DimpBase = {
     {
         DimpCore.init();
 
-        var DM = DimpCore.DMenu,
-            qs = $('quicksearch_input');
+        var DM = DimpCore.DMenu;
 
         /* Register global handlers now. */
         document.observe('keydown', this.keydownHandler.bindAsEventListener(this));
@@ -2315,8 +2319,7 @@ var DimpBase = {
         this.setPollFolders();
 
         /* Init quicksearch. */
-        qs.observe('focus', this._quicksearchOnFocus.bind(this));
-        qs.observe('blur', this._quicksearchOnBlur.bind(this));
+        $('qsearch_input').observe('blur', this._quicksearchOnBlur.bind(this));
 
         if (DIMP.conf.is_ie6) {
             /* Disable text selection in preview pane for IE 6. */

diff --git a/imp/templates/index/index-dimp.inc b/imp/templates/index/index-dimp.inc
index b260b19..88cfa3e 100644 (file)
--- a/imp/templates/index/index-dimp.inc
+++ b/imp/templates/index/index-dimp.inc
@@ -172,12 +172,12 @@ function _simpleButton($id, $text, $image, $imagedir = null)
      </div>
 
      <div class="dimpActions">
-      <div id="quicksearch">
+      <div id="qsearch">
        <form action="#" method="post">
-        <input autocomplete="off" id="quicksearch_input" type="text" size="25" />
+        <input autocomplete="off" id="qsearch_input" type="text" size="25" />
        </form>
        <span>
-        <?php echo IMP::img('close.png', '', array('id' => 'quicksearch_close', 'style' => 'display:none', 'title' => _("Clear Search")), $hordeimg) ?>
+        <?php echo IMP::img('close.png', '', array('id' => 'qsearch_close', 'style' => 'display:none', 'title' => _("Clear Search")), $hordeimg) ?>
        </span>
       </div>
       <span>

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index d00d99e..838fe9d 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -829,8 +829,8 @@ a.address:hover img {
 }
 
 /* Search-related styles */
-#quicksearch {
-    background: #f3f3f3 url("graphics/search.png") 1px center no-repeat;
+#qsearch {
+    background: #f3f3f3 url("graphics/search.png") 2px center no-repeat;
     padding: 1px 0 1px 20px;
     float: right;
     border: 1px solid #999;
@@ -838,30 +838,31 @@ a.address:hover img {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
 }
-#quicksearch form {
+#qsearch form {
     display: inline;
 }
-#quicksearch span {
+#qsearch span {
     display: -moz-inline-stack;
     display: inline-block;
-    width: 20px;
+    margin-left: -2px;
+    width: 17px;
 }
-#quicksearch_input {
+#qsearch_input {
     border: none;
     color: #a0a0a0;
     margin-bottom: 1px;
     padding: 0;
 }
-#quicksearch_close {
+#qsearch_close {
     margin-top: -1px;
 }
-.quicksearchActive {
+.qsearchFocus {
     background-color: #fff !important;
 }
-.quicksearchActive #quicksearch_input {
+.qsearchFocus #qsearch_input {
     color: #000 !important;
 }
-.quicksearchMatch {
+.qsearchMatch {
     font-weight: bold;
     text-decoration: underline;
 }

diff --git a/imp/themes/silver/screen-dimp.css b/imp/themes/silver/screen-dimp.css
index c295184..a437c32 100644 (file)
--- a/imp/themes/silver/screen-dimp.css
+++ b/imp/themes/silver/screen-dimp.css
@@ -150,7 +150,7 @@ span.dimpactionDrafts {
     background-image: url("graphics/quotauncover.gif");
 }
 
-#quicksearch {
+#qsearch {
     background-image: url("graphics/search.png");
 }