mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
+ tasks actions moved into new context menu
This commit is contained in:
Max Pozdeev
parent
affc45e591
commit
510db006c7
5 changed files with 165 additions and 28 deletions
149
src/ajax.js
149
src/ajax.js
|
|
@ -13,14 +13,10 @@ var objPrio = {};
|
|||
var selTask = 0;
|
||||
var sortBy = 0;
|
||||
var flag = { needAuth:false, isLogged:false, tagsChanged:true, windowTaskEditMoved:false };
|
||||
var img = {
|
||||
'note': ['images/page_white_text_add_bw.png','images/page_white_text_add.png'],
|
||||
'edit': ['images/page_white_edit_bw.png','images/page_white_edit.png'],
|
||||
'del': ['images/page_cross_bw.png','images/page_cross.png']
|
||||
};
|
||||
var taskCnt = { total:0, past: 0, today:0, soon:0 };
|
||||
var tmp = {};
|
||||
var oBtnMenu = {};
|
||||
var cmenu;
|
||||
var tabLists = [];
|
||||
var curList = 0;
|
||||
var tagsList = [];
|
||||
|
|
@ -66,10 +62,8 @@ function prepareTaskStr(item, noteExp)
|
|||
var id = parseInt(item.id);
|
||||
var prio = parseInt(item.prio);
|
||||
var readOnly = (flag.needAuth && !flag.isLogged) ? true : false;
|
||||
return '<li id="taskrow_'+id+'" class="'+(item.compl?'task-completed ':'')+item.dueClass+'" onDblClick="editTask('+id+')"><div class="task-actions">'+
|
||||
'<a href="#" onClick="return toggleTaskNote('+id+')"><img src="'+img.note[0]+'" onMouseOver="this.src=img.note[1]" onMouseOut="this.src=img.note[0]" title="'+lang.actionNote+'"></a>'+
|
||||
'<a href="#" onClick="return editTask('+id+')"><img src="'+img.edit[0]+'" onMouseOver="this.src=img.edit[1]" onMouseOut="this.src=img.edit[0]" title="'+lang.actionEdit+'"></a>'+
|
||||
'<a href="#" onClick="return deleteTask('+id+')"><img src="'+img.del[0]+'" onMouseOver="this.src=img.del[1]" onMouseOut="this.src=img.del[0]" title="'+lang.actionDelete+'"></a></div>'+
|
||||
return '<li id="taskrow_'+id+'" class="'+(item.compl?'task-completed ':'')+item.dueClass+'" onDblClick="editTask('+id+')">'+
|
||||
'<div class="task-actions"><a href="#" class="taskactionbtn" onClick="return taskContextMenu(this,'+id+')"></a></div>'+
|
||||
'<div class="task-left"><div class="mtt-toggle '+(item.note==''?'invisible':(noteExp?'mtt-toggle-expanded':''))+'" onClick="toggleNote('+id+')"></div>'+
|
||||
'<input type="checkbox" '+(readOnly?'disabled':'')+' onClick="completeTask('+id+',this)" '+(item.compl?'checked':'')+'></div>'+
|
||||
'<div class="task-middle">'+prepareDuedate(item.duedate, item.dueClass, item.dueStr)+
|
||||
|
|
@ -299,7 +293,7 @@ function showEditForm(isAdd)
|
|||
{
|
||||
$('<div id="overlay"></div>').appendTo('body').css('opacity', 0.5).show();
|
||||
//clear selection
|
||||
if(document.selection && document.selection.empty) document.selection.empty();
|
||||
if(document.selection && document.selection.empty && document.selection.createRange().text) document.selection.empty();
|
||||
else if(window.getSelection) window.getSelection().removeAllRanges();
|
||||
if(isAdd) {
|
||||
$('#page_taskedit').removeClass('mtt-inedit').addClass('mtt-inadd');
|
||||
|
|
@ -724,16 +718,6 @@ function tagCloudClose(e)
|
|||
$('#tagcloud').hide();
|
||||
}
|
||||
|
||||
function preloadImg()
|
||||
{
|
||||
for(var i in img) {
|
||||
for(var ii in img[i]) {
|
||||
var o = new Image();
|
||||
o.src = img[i][ii];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeTaskCnt(cl, dir)
|
||||
{
|
||||
if(!dir) dir = 1;
|
||||
|
|
@ -1129,3 +1113,128 @@ function publishCurList()
|
|||
else $('#btnPublish').removeClass('mtt-item-checked');
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
function taskContextMenu(el, id)
|
||||
{
|
||||
if(!cmenu) cmenu = new mttMenu('taskcontextcontainer', {onclick:taskContextClick});
|
||||
cmenu.tag = id;
|
||||
cmenu.show(el);
|
||||
return false;
|
||||
}
|
||||
|
||||
function taskContextClick(el)
|
||||
{
|
||||
if(!el.id) return;
|
||||
var taskId = cmenu.tag;
|
||||
switch(el.id) {
|
||||
case 'cmenu_edit': editTask(taskId); break;
|
||||
case 'cmenu_note': toggleTaskNote(taskId); break;
|
||||
case 'cmenu_delete': deleteTask(taskId); break;
|
||||
}
|
||||
}
|
||||
|
||||
function mttMenu(container, options)
|
||||
{
|
||||
var menu = this;
|
||||
this.container = $('#'+container);
|
||||
this.menuOpen = false;
|
||||
this.options = options || {};
|
||||
|
||||
//create submenus
|
||||
this.container.find('li.mtt-menu-has-submenu').each(function()
|
||||
{
|
||||
var submenu = new mttMenu($(this).attr('submenu'));
|
||||
submenu.$caller = $(this);
|
||||
submenu.parent = menu;
|
||||
menu.submenu = submenu;
|
||||
|
||||
var showTimer, hideTimer;
|
||||
$(this).hover(
|
||||
function(){
|
||||
clearTimeout(hideTimer);
|
||||
showTimer = setTimeout(function(){
|
||||
submenu.showSub();
|
||||
}, 300);
|
||||
},
|
||||
function(){
|
||||
clearTimeout(showTimer);
|
||||
hideTimer = setTimeout(function(){
|
||||
submenu.hide();
|
||||
}, 300);
|
||||
}
|
||||
);
|
||||
|
||||
submenu.container.find('li').each(function()
|
||||
{
|
||||
$(this).hover(
|
||||
function(){
|
||||
clearTimeout(hideTimer);
|
||||
},
|
||||
function(){
|
||||
hideTimer = setTimeout(function(){
|
||||
submenu.hide();
|
||||
}, 300);
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
this.container.find('li').click(function(){
|
||||
menu.onclick(this);
|
||||
return false;
|
||||
});
|
||||
|
||||
this.onclick = function(item)
|
||||
{
|
||||
if($(item).is('.mtt-disabled')) return;
|
||||
menu.close();
|
||||
if(this.options.onclick) this.options.onclick(item);
|
||||
}
|
||||
|
||||
this.hide = function()
|
||||
{
|
||||
if(this.submenu) this.submenu.hide();
|
||||
this.container.hide();
|
||||
this.menuOpen = false;
|
||||
}
|
||||
|
||||
this.close = function(event)
|
||||
{
|
||||
if(!this.menuOpen) return;
|
||||
if(event)
|
||||
{
|
||||
var t = event.target;
|
||||
if(t == this.caller) return;
|
||||
while(t.parentNode) {
|
||||
if(t.parentNode == this.caller) return;
|
||||
t = t.parentNode;
|
||||
}
|
||||
}
|
||||
this.hide();
|
||||
$(document).unbind('click.mttmenuclose');
|
||||
}
|
||||
|
||||
this.show = function(caller)
|
||||
{
|
||||
if(this.menuOpen)
|
||||
{
|
||||
this.close();
|
||||
if(this.caller && this.caller == caller) return;
|
||||
}
|
||||
this.caller = caller;
|
||||
$caller = $(caller);
|
||||
var offset = $caller.offset();
|
||||
this.container.css({ position: 'absolute', top: offset.top+caller.offsetHeight-1, left: offset.left , 'min-width': $caller.width() }).show();
|
||||
var menu = this;
|
||||
$(document).bind('click.mttmenuclose', function(e){ menu.close(e) });
|
||||
this.menuOpen = true;
|
||||
}
|
||||
|
||||
this.showSub = function()
|
||||
{
|
||||
var offset = this.$caller.offset();
|
||||
var dy = this.parent.container.offset().top-this.parent.container.find('li:first').offset().top
|
||||
this.container.css({ position: 'absolute', top: offset.top+dy, left: offset.left+this.$caller.outerWidth() /*, 'min-width': this.$caller.outerWidth()*/ }).show();
|
||||
this.menuOpen = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
src/images/arrbtn.gif
Normal file
BIN
src/images/arrbtn.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 887 B |
BIN
src/images/arrbtn_bw.gif
Normal file
BIN
src/images/arrbtn_bw.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 888 B |
|
|
@ -65,7 +65,6 @@ $().ready(function(){
|
|||
}
|
||||
echo "\tloadLists(1, 1);\n";
|
||||
?>
|
||||
preloadImg();
|
||||
$("#duedate").datepicker({dateFormat: '<?php echo $duedateformat; ?>', firstDay: <?php echo Config::get('firstdayofweek'); ?>,
|
||||
showOn: 'button', buttonImage: 'images/calendar.png', buttonImageOnly: true, changeMonth:true,
|
||||
changeYear:true, constrainInput: false, duration:'', nextText:'>', prevText:'<', dayNamesMin:lang.daysMin,
|
||||
|
|
@ -214,6 +213,32 @@ $().ajaxStop( function(r,s) {$("#loading").fadeOut();} );
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="taskcontextcontainer" class="mtt-btnmenu-container mtt-btnmenu-hasimages" style="display:none">
|
||||
<ul>
|
||||
<li id="cmenu_edit"><b>Edit</b></li>
|
||||
<li id="cmenu_note">Edit Note</li>
|
||||
<!--
|
||||
<li id="cmenu_prio" class="mtt-menu-has-submenu" submenu="priocontainer">Set Priority...</li>
|
||||
<li id="cmenu_moveto" class="mtt-menu-has-submenu" submenu="priocontainer">Move to...</li>
|
||||
-->
|
||||
<li id="cmenu_delete">Delete</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="priocontainer" class="mtt-btnmenu-container mtt-btnmenu-hasimages" style="display:none">
|
||||
<ul>
|
||||
<li id="cmenu_prio_-1">-1</li>
|
||||
<li id="cmenu_prio_0">0</li>
|
||||
<li id="cmenu_prio_1">+1</li>
|
||||
<li id="cmenu_prio_2">+2</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="listsmenucontainer" class="mtt-btnmenu-container mtt-btnmenu-hasimages" style="display:none">
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="page_ajax" style="display:none"></div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
body, td, th, input,textarea,select { font-family: arial; font-size:10pt; }
|
||||
html { height:100%; }
|
||||
body { margin:0px; padding:0px; height:100%; min-height:100%; background-color:#fff; }
|
||||
#wrapper { margin:0px auto; max-width:1000px; height:100%; }
|
||||
#wrapper { margin:0px auto; max-width:950px; height:100%; }
|
||||
#container { height:auto !important;height:100%;min-height:100%; }
|
||||
#body { padding:8px; padding-bottom:16px; }
|
||||
form { display: inline; }
|
||||
|
|
@ -19,7 +19,7 @@ a { color:#0000ff; }
|
|||
.nodecor { text-decoration:none; }
|
||||
#bar_logout { display:none; }
|
||||
#bar_auth { display:none; }
|
||||
#authform { overflow: hidden; z-index:101; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px; width:160px; }
|
||||
#authform { overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px; width:160px; }
|
||||
#authform div { padding:2px 0px; }
|
||||
#authform div.h { font-weight:bold; }
|
||||
|
||||
|
|
@ -62,11 +62,11 @@ a { color:#0000ff; }
|
|||
.task-left { float:left; }
|
||||
.task-left .mtt-toggle { margin-top:2px; cursor:pointer; width:15px; height:15px; float:left; background:url(images/toggle_plus.gif) left top no-repeat; }
|
||||
.task-left .mtt-toggle.mtt-toggle-expanded { background-image:url(images/toggle_minus.gif); }
|
||||
.task-middle { margin-left:40px; margin-right:65px; }
|
||||
.task-middle { margin-left:40px; margin-right:25px; }
|
||||
#tasklist { list-style-type: none; margin: 0; padding: 0;}
|
||||
#tasklist li { padding:6px 2px 6px 6px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff; }
|
||||
#tasklist li:hover { background-color:#f6f6f6; }
|
||||
.task-actions { float:right; width:65px; text-align:right; }
|
||||
.task-actions { float:right; width:25px; text-align:right; }
|
||||
.task-actions a { margin-left:2px; margin-right:2px; }
|
||||
.task-actions img { border:none; width:16px; height:16px; }
|
||||
.task-date { color:#999999; font-size:8pt; margin-left:4px; display:none; }
|
||||
|
|
@ -87,6 +87,9 @@ li.task-completed .task-actions a { color:#7070ff; }
|
|||
li.task-completed { opacity:0.8; }
|
||||
li.task-completed .mtt-toggle { opacity:0.8; }
|
||||
|
||||
a.taskactionbtn { text-decoration:none; padding-left:15px; background:url(images/arrbtn_bw.gif) no-repeat bottom left; }
|
||||
li:hover a.taskactionbtn { background-image:url(images/arrbtn.gif); }
|
||||
|
||||
#tasklist.filter-past li, #tasklist.filter-today li, #tasklist.filter-soon li { display:none; }
|
||||
#tasklist.filter-past li.past, #tasklist.filter-today li.today, #tasklist.filter-soon li.soon { display:block; }
|
||||
#tasklist.filter-past li.task-completed, #tasklist.filter-today li.task-completed, #tasklist.filter-soon li.task-completed { display:none; }
|
||||
|
|
@ -128,7 +131,7 @@ div.task-note-area textarea { color:#999999; width:100%; display:block; height:6
|
|||
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; line-height: 16px; overflow: hidden; }
|
||||
.ac_over { background-color: #bbbbbb; color: white; }
|
||||
|
||||
#priopopup { overflow: hidden; z-index:101; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px; }
|
||||
#priopopup { overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px; }
|
||||
#priopopup .prio-o { display:inline; }
|
||||
#priopopup span { cursor:pointer; border:1px solid #f9f9f9; }
|
||||
#priopopup .prio-o:hover { border:1px solid #dedede; }
|
||||
|
|
@ -139,7 +142,7 @@ div.task-note-area textarea { color:#999999; width:100%; display:block; height:6
|
|||
#tagcloudbtn:hover { border-bottom:1px solid #bbb; }
|
||||
#tagcloudbtn .tag { font-weight:bold; }
|
||||
#tagcloudload { display:none; }
|
||||
#tagcloud { overflow: hidden; z-index:101; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px; width:400px; text-align:center; }
|
||||
#tagcloud { overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; padding:5px; width:400px; text-align:center; }
|
||||
#tagcloud .tag { margin:1px 0px; padding:2px; line-height:140%; color:black; }
|
||||
#tagcloud .tag:hover { background-color:#999988; color:white; }
|
||||
#tagcloud .w0 { font-size:80%; }
|
||||
|
|
@ -182,7 +185,7 @@ div.task-note-area textarea { color:#999999; width:100%; display:block; height:6
|
|||
.mtt-btnmenu { border-bottom:1px dashed #ccc; padding:2px 2px; -moz-user-select:none; -webkit-user-select: none; }
|
||||
.mtt-btnmenu:hover { cursor:pointer; border-bottom:1px solid #bbb; }
|
||||
|
||||
.mtt-btnmenu-container { overflow: hidden; z-index:103; background-color:#f9f9f9; border:1px solid #cccccc; padding:3px; }
|
||||
.mtt-btnmenu-container { overflow: hidden; z-index:100; background-color:#f9f9f9; border:1px solid #cccccc; padding:3px; }
|
||||
.mtt-btnmenu-container ul { list-style: none; padding:0; margin:0; }
|
||||
.mtt-btnmenu-container li { margin:1px 0px; padding:2px; cursor:pointer; color:#000; }
|
||||
.mtt-btnmenu-container li:hover { background-color:#316AC5; color:white; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue