From b38d354b7988b3e98ebbb0b8557f2bf969900fab Mon Sep 17 00:00:00 2001 From: Max Pozdeev Date: Sat, 4 Sep 2010 16:42:11 +0400 Subject: [PATCH] * search input redesign --- src/mytinytodo.js | 72 ++++++++++++++---------- src/themes/default/images/closetab.png | Bin 0 -> 656 bytes src/themes/default/images/magnifier.png | Bin 615 -> 0 bytes src/themes/default/images/search.png | Bin 0 -> 251 bytes src/themes/default/index.php | 34 ++++++----- src/themes/default/style.css | 36 ++++++------ 6 files changed, 80 insertions(+), 62 deletions(-) create mode 100644 src/themes/default/images/closetab.png delete mode 100644 src/themes/default/images/magnifier.png create mode 100644 src/themes/default/images/search.png diff --git a/src/mytinytodo.js b/src/mytinytodo.js index 0f3da5b..c791914 100644 --- a/src/mytinytodo.js +++ b/src/mytinytodo.js @@ -109,9 +109,6 @@ var mytinytodo = window.mytinytodo = _mtt = { _mtt.menus.selectlist.show(this); }); - $('.mtt-tabs-search-button').click(function(){ - addsearchToggle(1); - }); $('#newtask_form').submit(function(){ submitNewTask(this); @@ -124,16 +121,36 @@ var mytinytodo = window.mytinytodo = _mtt = { }); $('#search_form').submit(function(){ - searchTasks(); + searchTasks(1); return false; }); $('#search_close').click(function(){ - addsearchToggle(0); + liveSearchToggle(0); return false; }); - $('#search').keyup(timerSearch); + $('#search').keyup(function(event){ + if(event.keyCode == 27) return; + if($(this).val() == '') $('#search_close').hide(); //actual value is only on keyup + else $('#search_close').show(); + clearTimeout(searchTimer); + searchTimer = setTimeout(function(){searchTasks()}, 400); + }) + .keydown(function(event){ + if(event.keyCode == 27) { // cancel on Esc (NB: no esc event on keypress in Chrome and on keyup in Opera) + if($(this).val() != '') { + $(this).val(''); + $('#search_close').hide(); + searchTasks(); + } + else { + liveSearchToggle(0); + } + return false; //need to return false in firefox (for AJAX?) + } + }); + $('#taskview').click(function(){ @@ -678,6 +695,9 @@ function loadTasks(opts) taskOrder.push(parseInt(item.id)); changeTaskCnt(item, 1); }); + if(opts.beforeShow && opts.beforeShow.call) { + opts.beforeShow(); + } refreshTaskCnt(); $('#tasklist').html(tasks); }); @@ -962,11 +982,7 @@ function tabSelected(elementOrId) if(curList.id != id) { $('#tasklist').html(''); - if(filter.search != '') { - filter.search = ''; - $('#searchbarkeyword').text(''); - $('#searchbar').hide(); - } + if(filter.search != '') liveSearchToggle(0, 1); mytinytodo.doAction('listSelected', tabLists.get(id)); } curList = tabLists.get(id); @@ -1237,39 +1253,35 @@ function addFilterTag(tag, tagId, exclude) loadTasks(); }; -function addsearchToggle(toSearch) +function liveSearchToggle(toSearch, dontLoad) { if(toSearch) { - showhide($('#htab_search'), $('#htab_newtask')); + if(flag.readOnly) $('#htab_newtask').hide(); $('#search').focus(); } else { - if(flag.readOnly) $('#htab_search').hide(); - else showhide($('#htab_newtask'), $('#htab_search')); + if(!flag.readOnly) $('#htab_newtask').show(); - // reload tasks when we return to task tab (from search tab) - if(filter.search != '') { + if($('#search').val() != '') { filter.search = ''; + $('#search').val(''); $('#searchbarkeyword').text(''); $('#searchbar').hide(); - loadTasks(); + $('#search_close').hide(); + if(!dontLoad) loadTasks(); } - $('#task').focus(); + + $('#search').blur(); } }; -function timerSearch(event) +function searchTasks(force) { - if(event.keyCode == 13) return; // do not process Enter key - clearTimeout(searchTimer); - searchTimer = setTimeout(function(){searchTasks()}, 500); -}; - -function searchTasks() -{ - filter.search = $('#search').val(); + var newkeyword = $('#search').val(); + if(newkeyword == filter.search && !force) return false; + filter.search = newkeyword; $('#searchbarkeyword').text(filter.search); if(filter.search != '') $('#searchbar').fadeIn('fast'); else $('#searchbar').fadeOut('fast'); @@ -1815,13 +1827,13 @@ function updateAccessStatus() flag.readOnly = true; $("#bar_public").show(); $('#page_tasks').addClass('readonly') - addsearchToggle(1); + liveSearchToggle(1); } else { flag.readOnly = false; $('#page_tasks').removeClass('readonly') $("#bar_public").hide(); - addsearchToggle(0); + liveSearchToggle(0); } $('#page_ajax').hide(); } diff --git a/src/themes/default/images/closetab.png b/src/themes/default/images/closetab.png new file mode 100644 index 0000000000000000000000000000000000000000..118be6dcab57d89459ae39abce26f5b1e29b7429 GIT binary patch literal 656 zcmV;B0&o3^P)1RCwB?Q$46sVHno)qZk@`B@9Jz z2+4F1qoF`BacXcX9Sn(ZF+`iB#X)pX6cNEDCuwkS(IFfHw;-ejxx~d53B+8kqTXBQ z9M7@m120_fxdd@PcsTEQzvumV-t!*iZnsn1%j*MIc;ecEQTF$iX0t7^5{NhXuw!O;<}Yz8Ki z>G5nfJ8!q!oL;a0lFeqnb-Uf?2vEA+?oPE@{nKi-Yz)JQgo}_*2QxrW5%z}oSe9iH zi9{!#&(q|+SS<3DO67$h2qGB?W}{s$m+uZbP^;BjRO5*(olbWPt>1xtvQK``U@&MF zi^USbBDkVVg2&^LMx&9!Xf#rgA))O>p-?cc*K4{|Dy@7zpAd~ksrh^^I-O2YHblSQ zPbSVrA`unQTrQXSMx*f>x?kmTInm{Eb;98=3yvxf2&`m#u-R;$ghHWbwJRZM`BqAya_}*mecA_YIsqO5 q_b>emKY{PS@S^g+68zWsE5HEhF!g>tm1S4}0000gNuvOO$0ks zMIj=HnnBRUR?tKXG11rxCU4&7dG4NbuvR2_mEvc)n?Cow;~Wve|KR^>9@p5l)|QB+ z$jmun3q#x>;ss-PW_mnr2MHVzLAl1RW&0?VkixF*4t!St0YVb2wnKdU(kmOHiL;aW zK8Xte%(k>MVGG$E4no6dcNnb>BhVHHGD&1pv4YZ68kE2V03t5#PCEFm7=ad$6)+3B zTCmn*?A?=u(o~ET7~-7g0)ZB=6|lumi4}B}MLgy~Ysy6)Q5%Al7|05&1z3Jpu>cF8 z3?VXs*3<}%h3`5Wld)N2zJnk%Agw<~3k)sPTLFd=F5;d8-bj-09SkQuynfflNcZLN z!^_37fdZvzrq=9~mp*($%mcDRKC&qvaaZuX+C=AT6O*~tHl>0mcP<_q>-z%$xO(@! zYluq5a8VQI$S@4?r*v;gPo!QQ%pX3A#>xx4t=w-L6COWx?aj&`f+!YePsFtj=hOQR zP3=E2j@9L7s8;T^&s?u(Hdpu?CubjMrGn{t_37>9$|AD)QE08weJlKn8|OyjL~7oP zC8mPT`jzuH*Dh^I0048RGafUIT)4H~*m8m>egI0iH=(LB%b@@O002ovPDHLkV1lw0 B3(O<=I|d83Yfz$%6xKW;^iHT(@%QnMRxl>=3TMGK&+(l7KEaEOhg>5}7pXRI2k;~(XQUmNrged5GTWoQFJ^IOwPZbG ud$cs5_pVEJOI8|NlDLAHqNlPI8-qRX!8PZ^HI0A{W$<+Mb6Mw<&;$VAEmST5 literal 0 HcmV?d00001 diff --git a/src/themes/default/index.php b/src/themes/default/index.php index 536d6a5..e929866 100644 --- a/src/themes/default/index.php +++ b/src/themes/default/index.php @@ -73,7 +73,6 @@ $().ready(function(){
    -
    @@ -83,7 +82,21 @@ $().ready(function(){
    - + + +
    @@ -93,20 +106,11 @@ $().ready(function(){
    - +
    - + + +
    diff --git a/src/themes/default/style.css b/src/themes/default/style.css index 7f0bd3f..a1c7f98 100644 --- a/src/themes/default/style.css +++ b/src/themes/default/style.css @@ -73,7 +73,6 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } .mtt-tabs-button { float:left; font-size:9pt; - cursor:pointer; padding:1px; /* makes button bigger */ border:1px solid transparent; /* preallocate space for :hover border */ } @@ -90,8 +89,6 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } .mtt-tabs-add-button>span { background:url(images/buttons.png) 0 0 no-repeat; } .mtt-tabs-add-button:hover>span { background-position:-16px 0; } -.mtt-tabs-search-button>span { background:url(images/buttons.png) 0 -16px no-repeat; } -.mtt-tabs-search-button:hover>span { background-position:-16px -16px; } .mtt-tabs-select-button>span { background:url(images/icons.gif) -64px 0 no-repeat; } .mtt-tabs-select-button:hover>span, .mtt-tabs-select-button.mtt-menu-button-active>span { background-position:-80px 0; } @@ -102,11 +99,7 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } .mtt-img-button span { display:inline-block; width:16px; height:16px; } #newtask_adv span { position:relative; top:3px; background:url(images/buttons.png) 0 -48px no-repeat; } -#newtask_adv:hover span { background-position:-16px -48px; } -#search_close span { position:relative; top:3px; background:url(images/buttons.png) 0 -32px no-repeat; } -#search_close:hover span { background-position:-16px -32px; } -#rss_icon { float:right;margin-top:4px; } -#rss_icon img { border:none; } +#newtask_adv:hover span { background-position:-16px -48px; } .arrdown { display:inline-block; height:7px; width:9px; background:url(images/arrdown.gif); } .arrdown2 { display:inline-block; height:7px; width:7px; background:url(images/arrdown2.gif); } @@ -116,20 +109,29 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; } .flex-cell-companion { white-space:nowrap; } #newtask_form .flex-cell { width:350px } -#search_form .flex-cell { width:250px; } -#newtask_form .flex-cell-companion, #search_form .flex-cell-companion { padding-left:2px; } +#newtask_form .flex-cell-companion { padding-left:2px; } #task { color:#444444; width:100%; } -#search { - color:#444444; - background:#fff url(images/magnifier.png) no-repeat 2px 2px; - padding-left:20px; /* text-indent:18px here is not working in webkit */ -} -#search_form .flex-cell { padding-right:24px; } /* padding 6px + 18px indent (20px-2px) */ -.small-bar{ font-size:8pt; color:#999999; font-weight:normal;} + +/* Live Search */ +#search { color:#444444; width:100%; height:18px; outline:none; border:0 none; } +#search_close { display:none; } + + +.mtt-searchbox { background-color:#fff; border:1px inset #f0f0f0; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } +.mtt-searchbox-left { width:16px; padding-left:3px; } +.mtt-searchbox-center { width:150px; } +.mtt-searchbox-right { width:16px; padding-right:3px; } +.mtt-searchbox-icon > span { display:block; width:16px; height:16px; } + +.mtt-searchbox-icon.mtt-icon-search > span { background:url(images/search.png) center no-repeat; } +.mtt-searchbox-icon.mtt-icon-cancelsearch > span { background:url(images/closetab.png) center no-repeat; } + #searchbar { font-size:10pt; font-weight:normal; display:none; margin-top:5px; } #searchbarkeyword { font-weight:bold; } + +/* */ .mtt-notes-showhide { font-size:8pt; font-weight:normal; margin-left:2px; margin-right:2px; } .mtt-notes-showhide a { text-decoration:none; border-bottom:1px dotted; }