From 510db006c7748ce3d03c46ae6a5d7079b738f8be Mon Sep 17 00:00:00 2001 From: Max Pozdeev Date: Thu, 24 Dec 2009 20:28:42 +0300 Subject: [PATCH] + tasks actions moved into new context menu --- src/ajax.js | 149 +++++++++++++++++++++++++++++++++------ src/images/arrbtn.gif | Bin 0 -> 887 bytes src/images/arrbtn_bw.gif | Bin 0 -> 888 bytes src/index.php | 27 ++++++- src/style.css | 17 +++-- 5 files changed, 165 insertions(+), 28 deletions(-) create mode 100644 src/images/arrbtn.gif create mode 100644 src/images/arrbtn_bw.gif diff --git a/src/ajax.js b/src/ajax.js index fdb6c8e..9ea82bc 100644 --- a/src/ajax.js +++ b/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 '
  • '+ - ''+ - ''+ - '
    '+ + return '
  • '+ + '
    '+ '
    '+ '
    '+ '
    '+prepareDuedate(item.duedate, item.dueClass, item.dueStr)+ @@ -299,7 +293,7 @@ function showEditForm(isAdd) { $('
    ').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; + } +} diff --git a/src/images/arrbtn.gif b/src/images/arrbtn.gif new file mode 100644 index 0000000000000000000000000000000000000000..2a886b49eaeb255c724ef3afd3df6c14b760380f GIT binary patch literal 887 zcmZ?wbhEHbx0l3M@I%D&)H;gmd!~cLwEbqm+b%rRO^B8_Ps)1uQtY KSdN*A!5RQ0Vm68Z literal 0 HcmV?d00001 diff --git a/src/images/arrbtn_bw.gif b/src/images/arrbtn_bw.gif new file mode 100644 index 0000000000000000000000000000000000000000..06e926281abb1f2f51aae6e1951e8821c63b33f7 GIT binary patch literal 888 zcmZ?wbhEHbebh; zUw{7m3062tjE2B)3jxKSEQ|~c{~2^Z9s}hG298jM|FRMu8x$NH{|jlwtSC@8+|DWM zl%f%Muz^9skjq2hV}lcmq+!*Y6%!mAdsxIwWM&F1IngR4Jd0<7klN{KjCovFP9A9R Vnk}sPYL0}lhEubLEE@}hH2^vBK-K^N literal 0 HcmV?d00001 diff --git a/src/index.php b/src/index.php index 9203093..1f72b94 100644 --- a/src/index.php +++ b/src/index.php @@ -65,7 +65,6 @@ $().ready(function(){ } echo "\tloadLists(1, 1);\n"; ?> - preloadImg(); $("#duedate").datepicker({dateFormat: '', firstDay: , 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();} );
    + + + + + + diff --git a/src/style.css b/src/style.css index 990ad90..6341351 100644 --- a/src/style.css +++ b/src/style.css @@ -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; }