First pass at improving search input UI

diff --git a/imp/js/src/DimpBase.js b/imp/js/src/DimpBase.js
index 0bc7eb0..3e8c0ef 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').blur();
+        $('quicksearch_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'),
+                        qsearch: $F('quicksearch_input'),
                         qsearchmbox: this.sfolder
                     })
                     : $H();
@@ -494,7 +494,7 @@ var DimpBase = {
 
                 // Check for search strings
                 if (this.isSearch()) {
-                    re = new RegExp("(" + $F('quicksearch') + ")", "i");
+                    re = new RegExp("(" + $F('quicksearch_input') + ")", "i");
                     [ 'from', 'subject' ].each(function(h) {
                         row[h] = row[h].gsub(re, '<span class="quicksearchMatch">#{1}</span>');
                     });
@@ -1218,14 +1218,14 @@ var DimpBase = {
 
     _quicksearchOnFocus: function()
     {
-        if ($('quicksearch').hasClassName('quicksearchDefault')) {
+        if (!$('quicksearch').hasClassName('quicksearchActive')) {
             this._setFilterText(false);
         }
     },
 
     _quicksearchOnBlur: function()
     {
-        if (!$F('quicksearch')) {
+        if (!$F('quicksearch_input')) {
             this._setFilterText(true);
         }
     },
@@ -1258,9 +1258,8 @@ var DimpBase = {
     // d = (boolean) Deactivate filter input?
     _setFilterText: function(d)
     {
-        var qs = $('quicksearch');
-        qs.setValue(d ? DIMP.text.search : '');
-        [ qs ].invoke(d ? 'addClassName' : 'removeClassName', 'quicksearchDefault');
+        $('quicksearch_input').setValue(d ? DIMP.text.search : '');
+        [ $('quicksearch') ].invoke(d ? 'removeClassName' : 'addClassName', 'quicksearchActive');
     },
 
     /* Enable/Disable DIMP action buttons as needed. */
@@ -1335,7 +1334,7 @@ var DimpBase = {
             case Event.KEY_ESC:
             case Event.KEY_TAB:
                 // Catch escapes in search box
-                if (elt.readAttribute('id') == 'quicksearch') {
+                if (elt.readAttribute('id') == 'quicksearch_input') {
                     if (kc == Event.KEY_ESC || !elt.getValue()) {
                         this.quicksearchClear();
                     }
@@ -1349,8 +1348,8 @@ var DimpBase = {
                 if (form.readAttribute('id') == 'RB_folder') {
                     this.cfolderaction(e);
                     e.stop();
-                } else if (elt.readAttribute('id') == 'quicksearch') {
-                    if ($F('quicksearch')) {
+                } else if (elt.readAttribute('id') == 'quicksearch_input') {
+                    if ($F('quicksearch_input')) {
                         this.quicksearchRun();
                     } else {
                         this.quicksearchClear();
@@ -2242,7 +2241,7 @@ var DimpBase = {
         DimpCore.init();
 
         var DM = DimpCore.DMenu,
-            qs = $('quicksearch');
+            qs = $('quicksearch_input');
 
         /* Register global handlers now. */
         document.observe('keydown', this.keydownHandler.bindAsEventListener(this));

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

diff --git a/imp/themes/graphics/search.png b/imp/themes/graphics/search.png
new file mode 100644 (file)
index 0000000..8b7937d
Binary files /dev/null and b/imp/themes/graphics/search.png differ

diff --git a/imp/themes/ie6_or_less-dimp.css b/imp/themes/ie6_or_less-dimp.css
index 4ea81ab..4ce29d2 100644 (file)
--- a/imp/themes/ie6_or_less-dimp.css
+++ b/imp/themes/ie6_or_less-dimp.css
@@ -63,7 +63,7 @@ form#compose {
 }
 
 /* Fixes broken inline-block. */
-div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg {
+div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg, #quicksearch span {
     zoom: 1;
     *display: inline;
 }

diff --git a/imp/themes/ie7-dimp.css b/imp/themes/ie7-dimp.css
index 174cb8f..710cb85 100644 (file)
--- a/imp/themes/ie7-dimp.css
+++ b/imp/themes/ie7-dimp.css
@@ -51,7 +51,7 @@ form#compose {
 }
 
 /* Fixes broken inline-block. */
-div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg {
+div.msgStatus div, #msgHeadersContent .subject span, span.iconImg, span.contextImg, span.spellcheckPopdownImg, #quicksearch span  {
     zoom: 1;
     *display: inline;
 }

diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css
index 0d49cb3..5bb4272 100644 (file)
--- a/imp/themes/screen-dimp.css
+++ b/imp/themes/screen-dimp.css
@@ -462,10 +462,6 @@ div.vpRow.flagDeleted {
     padding: 1px 3px 3px 3px;
     cursor: pointer;
 }
-.dimpActions form {
-    float: right;
-    padding: 0;
-}
 .dimpActions .disabled a, .dimpActions .disabled a:visited, .dimpActions .disabled a:active, .dimpActions .disabled a:hover {
     cursor: default;
     text-decoration: none;
@@ -830,18 +826,42 @@ a.address:hover img {
 }
 
 /* Search-related styles */
-.quicksearchDefault {
+#quicksearch {
+    background: #f3f3f3 url("graphics/search.png") 1px center no-repeat;
+    padding: 1px 0 1px 20px;
+    float: right;
+    border: 1px solid #999;
+    cursor: default;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+}
+#quicksearch form {
+    display: inline;
+}
+#quicksearch span {
+    display: -moz-inline-stack;
+    display: inline-block;
+    width: 20px;
+}
+#quicksearch_input {
+    border: none;
     color: #a0a0a0;
+    margin-bottom: 1px;
+    padding: 0;
+}
+#quicksearch_close {
+    margin-top: -1px;
+}
+.quicksearchActive {
+    background-color: #fff !important;
+}
+.quicksearchActive #quicksearch_input {
+    color: #000 !important;
 }
 .quicksearchMatch {
     font-weight: bold;
     text-decoration: underline;
 }
-#quicksearch_close {
-    cursor: pointer;
-    float: right;
-    padding: 2px 5px 0 0;
-}
 
 /* Redbox styles. */
 .RBForm {

diff --git a/imp/themes/silver/graphics/search.png b/imp/themes/silver/graphics/search.png
new file mode 100644 (file)
index 0000000..908612e
Binary files /dev/null and b/imp/themes/silver/graphics/search.png differ

diff --git a/imp/themes/silver/screen-dimp.css b/imp/themes/silver/screen-dimp.css
index 9154bd7..c295184 100644 (file)
--- a/imp/themes/silver/screen-dimp.css
+++ b/imp/themes/silver/screen-dimp.css
@@ -149,6 +149,11 @@ span.dimpactionDrafts {
 #quota span.iconImg {
     background-image: url("graphics/quotauncover.gif");
 }
+
+#quicksearch {
+    background-image: url("graphics/search.png");
+}
+
 #th_expand span.iconImg, #partlist_col {
     background-image: url("graphics/arrow_collapsed.png");
 }