mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
* search input redesign
This commit is contained in:
Max Pozdeev
parent
3d5687b433
commit
b38d354b79
6 changed files with 80 additions and 62 deletions
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
BIN
src/themes/default/images/closetab.png
Normal file
BIN
src/themes/default/images/closetab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 656 B |
Binary file not shown.
|
Before Width: | Height: | Size: 615 B |
BIN
src/themes/default/images/search.png
Normal file
BIN
src/themes/default/images/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 B |
|
|
@ -73,7 +73,6 @@ $().ready(function(){
|
|||
<ul class="mtt-tabs"></ul>
|
||||
<div id="tabs_buttons">
|
||||
<div class="mtt-tabs-add-button mtt-tabs-button" title="<?php _e('list_new'); ?>"><span></span></div>
|
||||
<div class="mtt-tabs-search-button mtt-tabs-button" title="<?php _e('htab_search'); ?>"><span></span></div>
|
||||
<div class="mtt-tabs-select-button mtt-tabs-button" title="<?php _e('list_select'); ?>"><span></span></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -83,7 +82,21 @@ $().ready(function(){
|
|||
|
||||
<div id="toolbar" class="mtt-htabs">
|
||||
|
||||
<span id="htab_newtask">
|
||||
<div id="htab_search" style="float:right;">
|
||||
<table cellspacing="0" cellpadding="0" class="mtt-searchbox">
|
||||
<tr>
|
||||
<td class="mtt-searchbox-left"><span class="mtt-searchbox-icon mtt-icon-search"><span></span></span></td>
|
||||
<td class="mtt-searchbox-center">
|
||||
<form id="search_form" method="post">
|
||||
<input type="text" name="search" value="" maxlength="250" id="search" autocomplete="off" />
|
||||
</form>
|
||||
</td>
|
||||
<td class="mtt-searchbox-right"><span id="search_close" class="mtt-searchbox-icon mtt-icon-cancelsearch" title=""><span></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="htab_newtask">
|
||||
<form id="newtask_form" method="post">
|
||||
<table cellspacing="0" cellpadding="0"><tr>
|
||||
<td class="flex-cell"><input type="text" name="task" value="" maxlength="250" id="task" /></td>
|
||||
|
|
@ -93,20 +106,11 @@ $().ready(function(){
|
|||
</td>
|
||||
</tr></table>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span id="htab_search" style="display:none">
|
||||
<form id="search_form" method="post">
|
||||
<table cellspacing="0" cellpadding="0"><tr>
|
||||
<td class="flex-cell"><input type="text" name="search" value="" maxlength="250" id="search" autocomplete="off" /></td>
|
||||
<td class="flex-cell-companion">
|
||||
<input type="submit" value="<?php _e('btn_search');?>" />
|
||||
<a href="#" id="search_close" class="mtt-img-button" title=""><span></span></a>
|
||||
</td>
|
||||
</tr></table>
|
||||
</form>
|
||||
<div id="searchbar"><?php _e('searching');?> <span id="searchbarkeyword"></span></div>
|
||||
</span>
|
||||
<div id="searchbar" style="display:none"><?php _e('searching');?> <span id="searchbarkeyword"></span></div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue