From 0560c9f604038e3895560285d93ac7b69913f1c7 Mon Sep 17 00:00:00 2001 From: Michael M Slusarz Date: Thu, 16 Apr 2009 13:07:38 -0600 Subject: [PATCH] First pass at improving search input UI --- imp/js/src/DimpBase.js | 23 ++++++++++--------- imp/templates/index/index-dimp.inc | 12 ++++++---- imp/themes/graphics/search.png | Bin 0 -> 795 bytes imp/themes/ie6_or_less-dimp.css | 2 +- imp/themes/ie7-dimp.css | 2 +- imp/themes/screen-dimp.css | 40 +++++++++++++++++++++++++--------- imp/themes/silver/graphics/search.png | Bin 0 -> 692 bytes imp/themes/silver/screen-dimp.css | 5 +++++ 8 files changed, 56 insertions(+), 28 deletions(-) create mode 100644 imp/themes/graphics/search.png create mode 100644 imp/themes/silver/graphics/search.png 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 0000000000000000000000000000000000000000..8b7937d9595e0f464a8116e2b6a7662dd8c46c43 GIT binary patch literal 795 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GXl47;6K3LR`On`~LISpReD3SU3m1 zeD@`@aZYSemrHPpe?oD?>>V}JHZ{-N-MV0J%iNtEi}tn5+0nUZpR<2#e)G)Mx!Ze| z?CV{!w|(};>1&U+Ok1^R>#56kUtE9i>iWHBPhWp>3`}wgO15+l&F@@N+`A&HX?Awg zthAcRv4w33C7s!gGujsJ?O43OxNBin{nW&g4oAP}g0?wX^;5c+9n7qq)VtzvTtU;6 zHAkneIWlGS;qLicW~@CtedX@H`5WeMJTh_7=8cE1t=@BX+wq(04_w@O?E20V*LNN{ zf9Cq5org|8fBX6IvzK4L|FrdvC~TjzXxqsv_g`MS^YHS`d!N4jyn5&1&Ye3qZrnIw z!i1`-s`B#k($do6;^KmWg8cmayu7@$w6wUmxR{uj=;-K(h=}m;@UXD3prD|DfB=7g ze@{2EP z4h{}>c6K&4Hda3-6fpdMXu}C~$~jLL#}J9B z$t#$fSA2PMYu2787j{{(8Q8B3xo{#n`tWKUIVFL}w4}Gs)E^&S8YadicH+Y3ujwCB zCYn7>@n__IBE7?ab%V#v%r1?mO{`g8Z6)s3%JNj6`H`)_WYxGSi0@d`ok@qbCNwIQ zYKN;k>)I8&AI;g|Ahx+nLVtV1j?F7-WIPmXw#{-5J#^^Uy-91ecvL1#2##L0Kzqp< zt?-!~B@rpPp{{{ZX^FnMjzKIJUK;*%R6M$}wBSI1kW6fJbh}Cb-;?9Y+()ioQ&ar- an!#^Yv|s6xj8>q}7(8A5T-G@yGywoTfvkc6 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..908612e394525fc2e52a7e9b94689c25ce167381 GIT binary patch literal 692 zcmV;l0!#ggP)m+BBgry{~j2fHLegbHP( zrgXNbr0}2;^nywdjLjZe?uxtrd3D(pZH@fFFc0{BW_~jxoO1w7-VX;6vK@ROA$$R6 zEmo;Ht-Mj|>5jUy{bQ^V5@53LRI8AgLpUm|m+15sqcz@QtVSo|oz7ArM8?pIn+>gN z0b=4_b5O|4A*;Q+vc9Vqr~%3V155*NV~@gTz}KSUiKB-uJzjMZ>5%Q#n24H!V{ zTY(LLAE*NAHZ}C#wnj%Bw5OFIkRhkkAW#kDC3j9Wm0YXRaXlyyp>#mVfYG)eC;@ab zDb=T-BCAY4LI(Z@GOTr2V_A{pRwSmz+8Be>CjAw(=gnbVWAeguvZa93JmL(EDxv1m z0OP4q=fpAK1Mq!C2`OkEn37o;m#wF#(t(8Pu#S?2f#x<~4EO{@fmm`p9veD6RZ_jp z@Au4};q&`XuKEYgIiB4((kgxOs#YdqJw0fY>9^K_agEu5+$#k;w#%I2N>n_?)YIqu z`tq&#_^p?-%K*U0^}|7+9U(&k0?s;=r=uCZ%)H9_edH8wK}gB(nUB1FFk+2Ol%BXV zHoFY`D~2x|2