From: Michael M Slusarz Date: Thu, 16 Apr 2009 19:07:38 +0000 (-0600) Subject: First pass at improving search input UI X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=0560c9f604038e3895560285d93ac7b69913f1c7;p=horde.git First pass at improving search input UI --- diff --git a/imp/js/src/DimpBase.js b/imp/js/src/DimpBase.js index 0bc7eb07b..3e8c0efe9 100644 --- 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, '#{1}'); }); @@ -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 16a674a4f..b260b1931 100644 --- 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)
-
- -
- 'quicksearch_close', 'style' => 'display:none', 'title' => _("Clear Search")), $hordeimg) ?> +
+
+ +
+ + 'quicksearch_close', 'style' => 'display:none', 'title' => _("Clear Search")), $hordeimg) ?> + +
diff --git a/imp/themes/graphics/search.png b/imp/themes/graphics/search.png new file mode 100644 index 000000000..8b7937d95 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 4ea81ab24..4ce29d2fb 100644 --- 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 174cb8ff4..710cb85ec 100644 --- 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 0d49cb3a4..5bb427261 100644 --- 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 index 000000000..908612e39 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 9154bd784..c295184dd 100644 --- 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"); }