mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
+ use task viewer in mobile style
This commit is contained in:
maxpozdeev
parent
c6ceb562d0
commit
0c2694c746
5 changed files with 217 additions and 62 deletions
|
|
@ -75,6 +75,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
|
|||
calendarIcon: 'calendar.png', // need themeUrl+icon
|
||||
history: true,
|
||||
markdown: true,
|
||||
viewTaskOnClick: false,
|
||||
},
|
||||
|
||||
timers: {
|
||||
|
|
@ -447,6 +448,11 @@ var mytinytodo = window.mytinytodo = _mtt = {
|
|||
flag.editFormChanged = true;
|
||||
});
|
||||
|
||||
$('#taskviewer_edit_btn').on('click', function() {
|
||||
const id = document.getElementById('page_taskviewer').dataset.id;
|
||||
editTask(id);
|
||||
});
|
||||
|
||||
// tasklist handlers
|
||||
$("#tasklist").on('click', '> li.task-row .task-middle', function(e) {
|
||||
if ( findParentNode(e.target, 'A') ) {
|
||||
|
|
@ -454,6 +460,10 @@ var mytinytodo = window.mytinytodo = _mtt = {
|
|||
}
|
||||
var li = findParentNode(this, 'LI');
|
||||
if (li && li.id) {
|
||||
if (e.altKey) {
|
||||
viewTask(li.dataset.id);
|
||||
return;
|
||||
}
|
||||
if (lastClickedNodeId && li.id != lastClickedNodeId) {
|
||||
$('#'+lastClickedNodeId).removeClass('clicked');
|
||||
}
|
||||
|
|
@ -474,6 +484,20 @@ var mytinytodo = window.mytinytodo = _mtt = {
|
|||
}
|
||||
});
|
||||
|
||||
if (this.options.touchDevice) {
|
||||
this.options.viewTaskOnClick = true;
|
||||
}
|
||||
|
||||
if (this.options.viewTaskOnClick) {
|
||||
$('#mtt').addClass('view-task-on-click');
|
||||
$('#tasklist').on('click', '> li.task-row .task-title', function(){
|
||||
let id = parseInt(getLiTaskId(this));
|
||||
if (id) {
|
||||
viewTask(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#tasklist').on('click', '.taskactionbtn', function(){
|
||||
var id = parseInt(getLiTaskId(this));
|
||||
if(id) taskContextMenu(this, id);
|
||||
|
|
@ -683,6 +707,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
|
|||
//History
|
||||
if (this.options.history) {
|
||||
window.onpopstate = historyOnPopState;
|
||||
window.history.scrollRestoration = 'manual';
|
||||
}
|
||||
|
||||
// Appearance mode for CSS
|
||||
|
|
@ -880,9 +905,8 @@ var mytinytodo = window.mytinytodo = _mtt = {
|
|||
hideAlert();
|
||||
$(document).off('keydown.mttback');
|
||||
// If clicked on back button in settings we'll use history navigation
|
||||
if ( clicked &&
|
||||
this.pages.current && this.pages.current.page == 'ajax' && this.pages.current.pageClass == 'settings' &&
|
||||
this.pages.prev.length > 0 ) {
|
||||
if ( clicked && this.pages.current && this.pages.prev.length > 0 &&
|
||||
((_mtt.pages.current.page == 'ajax' && _mtt.pages.current.pageClass == 'settings') || _mtt.pages.current.page == 'taskviewer') ) {
|
||||
window.history.back();
|
||||
return;
|
||||
}
|
||||
|
|
@ -1164,7 +1188,7 @@ function prepareListHtml(list)
|
|||
|
||||
function prepareTaskStr(item, noteExp)
|
||||
{
|
||||
return '<li id="taskrow_'+item.id+'" class="task-row ' + (item.compl?'task-completed ':'') + item.dueClass + (item.note!=''?' task-has-note':'') +
|
||||
return '<li id="taskrow_'+item.id+'" ' + 'data-id="'+item.id + '" class="task-row ' + (item.compl?'task-completed ':'') + item.dueClass + (item.note!=''?' task-has-note':'') +
|
||||
((curList.showNotes && item.note != '') || noteExp ? ' task-expanded' : '') + prepareDomClassOfTags(item.tags_ids) + '">' +
|
||||
prepareTaskBlocks(item) + "</li>\n";
|
||||
};
|
||||
|
|
@ -1188,7 +1212,7 @@ function prepareTaskBlocks(item)
|
|||
preparePrio(item.prio,id) +
|
||||
'<span class="task-title">' + prepareTaskTitleInlineHtml(item.title) + '</span> ' +
|
||||
(curList.id == -1 ? '<span class="task-listname">'+ tabLists.get(item.listId).name +'</span>' : '') +
|
||||
prepareTagsStr(item) +
|
||||
'<span class="task-tags">' + prepareTagsStr(item) + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="task-through-right">' + prepareDueDate(item) + "</div>" +
|
||||
'</div>' +
|
||||
|
|
@ -1234,7 +1258,7 @@ function preparePrio(prio,id)
|
|||
};
|
||||
_mtt.preparePrio = preparePrio;
|
||||
|
||||
function prepareTagsStr(item)
|
||||
function prepareTagsStr(item, delimiter = ', ')
|
||||
{
|
||||
if (!item.tags || item.tags == '') return '';
|
||||
let a = item.tags.split(',');
|
||||
|
|
@ -1243,7 +1267,7 @@ function prepareTagsStr(item)
|
|||
for (let i in a) {
|
||||
a[i] = '<span class="tag" data-tag="'+a[i]+'" data-tag-id="'+b[i]+'">'+a[i]+'</span>';
|
||||
}
|
||||
return '<span class="task-tags">'+a.join(', ')+'</span>';
|
||||
return a.join(delimiter);
|
||||
};
|
||||
_mtt.prepareTagsStr = prepareTagsStr;
|
||||
|
||||
|
|
@ -1731,6 +1755,30 @@ function saveTaskNote(id)
|
|||
return false;
|
||||
};
|
||||
|
||||
function fillTaskViewer(id)
|
||||
{
|
||||
const item = taskList[id];
|
||||
if (!item) return false;
|
||||
$('#page_taskviewer').attr('data-id', item.id);
|
||||
$('#taskviewer_id').text('#' + item.id);
|
||||
$('#page_taskviewer .title').html(item.title);
|
||||
$('#page_taskviewer .note').html(item.note);
|
||||
$('#page_taskviewer .prio .content').html(preparePrio(item.prio,item.id));
|
||||
$('#page_taskviewer .due .content').html(item.duedate);
|
||||
$('#page_taskviewer .tags .content').html(prepareTagsStr(item, ''));
|
||||
$('#page_taskviewer .list .content').text(curList.name);
|
||||
return item;
|
||||
}
|
||||
|
||||
function viewTask(id)
|
||||
{
|
||||
const item = fillTaskViewer(id);
|
||||
if (!item) return;
|
||||
_mtt.pageSet('taskviewer');
|
||||
updateHistoryState({ task: item.id, list: item.listId }, '#task/'+item.id, dehtml(item.title) + ' - ' + curList.name + ' - ' + _mtt.options.title);
|
||||
}
|
||||
|
||||
|
||||
function editTask(id)
|
||||
{
|
||||
var item = taskList[id];
|
||||
|
|
@ -1814,23 +1862,32 @@ function showEditForm(isAdd)
|
|||
function saveTask(form)
|
||||
{
|
||||
$("#edittags").autocomplete('close');
|
||||
if(flag.readOnly) return false;
|
||||
if(form.isadd.value != 0)
|
||||
if (flag.readOnly)
|
||||
return false;
|
||||
if (form.isadd.value != 0)
|
||||
return submitFullTask(form);
|
||||
|
||||
_mtt.db.request('editTask', {id:form.id.value, title: form.task.value, note:form.note.value,
|
||||
prio:form.prio.value, tags:form.tags.value, duedate:form.duedate.value},
|
||||
function(json){
|
||||
if(!parseInt(json.total)) return;
|
||||
var item = json.list[0];
|
||||
function(json) {
|
||||
if (!parseInt(json.total))
|
||||
return;
|
||||
const item = json.list[0];
|
||||
changeTaskCnt(item, 0, taskList[item.id]);
|
||||
taskList[item.id] = item;
|
||||
var noteExpanded = (item.note != '' && $('#taskrow_'+item.id).is('.task-expanded')) ? 1 : 0;
|
||||
const noteExpanded = (item.note != '' && $('#taskrow_'+item.id).is('.task-expanded')) ? 1 : 0;
|
||||
$('#taskrow_'+item.id).replaceWith(_mtt.prepareTaskStr(item, noteExpanded));
|
||||
if(curList.sort != 0) changeTaskOrder(item.id);
|
||||
_mtt.pageBack(); //back to list
|
||||
if (curList.sort != 0)
|
||||
changeTaskOrder(item.id);
|
||||
refreshTaskCnt();
|
||||
$('#taskrow_'+item.id).effect("highlight", {color:_mtt.theme.editTaskFlashColor}, 'normal', function(){$(this).css('display','')});
|
||||
_mtt.pageBack(); //back to list or viewer
|
||||
if (_mtt.pages.current.page = 'taskviewer') {
|
||||
fillTaskViewer(item.id);
|
||||
}
|
||||
else {
|
||||
$('#taskrow_'+item.id).effect("highlight", {color:_mtt.theme.editTaskFlashColor}, 'normal', function(){$(this).css('display','')});
|
||||
}
|
||||
|
||||
});
|
||||
flag.tagsChanged = true;
|
||||
return false;
|
||||
|
|
@ -2994,12 +3051,18 @@ function updateHistoryState(state, url, title)
|
|||
function historyOnPopState(event)
|
||||
{
|
||||
if (!event.state) return;
|
||||
if (event.state.list && _mtt.pages.current && _mtt.pages.current.page == 'ajax' && _mtt.pages.current.pageClass == 'settings') {
|
||||
// Here we go back to tasklist from settings, no reload. Just show and hide pages without history actions.
|
||||
if (event.state.list && _mtt.pages.current &&
|
||||
((_mtt.pages.current.page == 'ajax' && _mtt.pages.current.pageClass == 'settings') || _mtt.pages.current.page == 'taskviewer') ) {
|
||||
// Here we go back to tasklist from settings or view task, no reload.
|
||||
// Just show and hide pages without history actions.
|
||||
_mtt.pageBack();
|
||||
flag.dontChangeHistoryOnce = true;
|
||||
updateHistoryState( { list:event.state.list }, event.state.url, event.state.title );
|
||||
}
|
||||
else if (event.state.task) {
|
||||
flag.dontChangeHistoryOnce = true;
|
||||
viewTask(event.state.task);
|
||||
}
|
||||
else if (event.state.list) {
|
||||
flag.dontChangeHistoryOnce = true;
|
||||
tabSelect(event.state.list);
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ body, td, th, input, textarea, select, button {
|
|||
#mtt {
|
||||
flex: 1 0 auto;
|
||||
width:100%;
|
||||
max-width:1000px;
|
||||
max-width:1100px;
|
||||
padding:8px;
|
||||
margin-bottom:8px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -584,8 +584,15 @@ li.task-row.task-expanded .task-toggle { transform:rotate(90deg); }
|
|||
}
|
||||
#mtt.show-inline-date .task-date { display: block; }
|
||||
.task-through { overflow:hidden; flex-grow:1; }
|
||||
.task-title a { color: var(--color-text-default); }
|
||||
.task-title a:hover { color: var(--color-tasklist-link-hover); }
|
||||
#mtt.view-task-on-click .task-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
.task-title a {
|
||||
color: var(--color-text-default);
|
||||
}
|
||||
.task-title a:hover {
|
||||
color: var(--color-tasklist-link-hover);
|
||||
}
|
||||
#mtt.readonly #tasklist li.task-row .task-actions { display:none; }
|
||||
.task-listname {
|
||||
background-color: var(--color-tasklist-listname-bg);
|
||||
|
|
@ -725,30 +732,10 @@ li.task-row.task-expanded .task-note-block { display:block; }
|
|||
padding: 5px;
|
||||
}
|
||||
#page_taskedit .form-row-short { float:left; margin-right:12px; }
|
||||
#alltags .tag {
|
||||
display: inline-block;
|
||||
color:var(--color-taglist-tag);
|
||||
background-color:var(--color-taglist-tag-bg);
|
||||
cursor: pointer;
|
||||
padding: 0 0.5em;
|
||||
border-radius: 1em;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom:2px;
|
||||
margin-right: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#alltags .tag:hover {
|
||||
/*background-color:var(--color-taglist-tag-hover-bg);*/
|
||||
border-color: var(--color-taglist-tag-hover-bg);;
|
||||
color: var(--color-taglist-tag-hover);
|
||||
}
|
||||
.alltags-cell { width:1%; white-space:nowrap; padding-left:5px; }
|
||||
#page_taskedit.mtt-inadd .mtt-inedit { display:none; }
|
||||
#page_taskedit.mtt-inedit .mtt-inadd { display:none; }
|
||||
#taskedit_id, #taskview_id {
|
||||
#taskedit_id, #taskviewer_id {
|
||||
color: var(--color-text-reduced2);
|
||||
font-weight: normal;
|
||||
margin-left: 5px;
|
||||
|
|
@ -756,6 +743,53 @@ li.task-row.task-expanded .task-note-block { display:block; }
|
|||
#taskedit_info { font-size:1rem; font-weight:normal; color:var(--color-text-reduced2); margin-bottom:6px; }
|
||||
#taskedit_info > div { margin-top:6px; }
|
||||
|
||||
#page_taskviewer .container {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
#page_taskviewer .container .left {
|
||||
flex-grow: 1;
|
||||
min-width: 0; /* to limit long text*/
|
||||
}
|
||||
#page_taskviewer .container .right {
|
||||
min-width:300px;
|
||||
max-width:300px;
|
||||
padding-left: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
#page_taskviewer .container .right .property {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
#page_taskviewer .container .right .property:not(:last-child) {
|
||||
border-bottom: 1px solid var(--color-tasklist-row-expanded-border);
|
||||
}
|
||||
#page_taskviewer .container .right .form-bottom-buttons .mtt-back-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#page_taskviewer .title {
|
||||
/*font-weight: bold;*/
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--color-tasklist-row-expanded-border);
|
||||
}
|
||||
#page_taskviewer .note {
|
||||
line-height: 1.3;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
padding: 1rem;
|
||||
border:1px solid var(--color-tasklist-row-expanded-border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
#page_taskviewer .property.tags .content {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a.mtt-back-button { font-size:1rem; }
|
||||
h3.page-title a.mtt-back-button {
|
||||
display:inline-block;
|
||||
|
|
@ -792,6 +826,7 @@ h3.page-title a.mtt-back-button {
|
|||
#priopopup .prio-pos:hover { border-color: var(--color-priority-urgent); }
|
||||
#priopopup .prio-pos-1:hover { border-color: var(--color-priority-high); }
|
||||
|
||||
|
||||
#tagcloudbtn {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
|
|
@ -813,26 +848,6 @@ h3.page-title a.mtt-back-button {
|
|||
#tagcloud > div {
|
||||
padding:5px;
|
||||
}
|
||||
#tagcloud .tag {
|
||||
display: inline-block;
|
||||
padding: 0 0.5em;
|
||||
border-radius: 1em;
|
||||
color:var(--color-taglist-tag);
|
||||
background-color:var(--color-taglist-tag-bg);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
background-clip: padding-box; /* for transparent border */
|
||||
border: 1px solid transparent;
|
||||
margin-bottom:2px;
|
||||
margin-right: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#tagcloud .tag:hover {
|
||||
border-color: var(--color-taglist-tag-hover-bg);
|
||||
color: var(--color-taglist-tag-hover);
|
||||
}
|
||||
#tagcloudload {
|
||||
display:none;
|
||||
height:24px;
|
||||
|
|
@ -859,6 +874,41 @@ h3.page-title a.mtt-back-button {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#tagcloud .tag,
|
||||
#alltags .tag,
|
||||
#page_taskviewer .property.tags .tag {
|
||||
display: inline-block;
|
||||
padding: 0 0.5em;
|
||||
border-radius: 1em;
|
||||
color:var(--color-taglist-tag);
|
||||
background-color:var(--color-taglist-tag-bg);
|
||||
cursor: pointer;
|
||||
background-clip: padding-box; /* for transparent border */
|
||||
border: 1px solid transparent;
|
||||
margin-bottom:2px;
|
||||
margin-right: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
#alltags .tag {
|
||||
margin-right: 3px;
|
||||
}
|
||||
#page_taskviewer .property.tags .tag {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom:0;
|
||||
margin-top:3px;
|
||||
}
|
||||
#tagcloud .tag:hover,
|
||||
#alltags .tag:hover,
|
||||
#page_taskviewer .property.tags .tag:hover {
|
||||
/*background-color:var(--color-taglist-tag-hover-bg);*/
|
||||
border-color: var(--color-taglist-tag-hover-bg);;
|
||||
color: var(--color-taglist-tag-hover);
|
||||
}
|
||||
|
||||
.ui-datepicker {
|
||||
width: 250px;
|
||||
|
|
@ -1215,6 +1265,7 @@ li.mtt-item-hidden { display:none; }
|
|||
|
||||
#tasklist li.task-row .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
#tasklist li.task-row.task-expanded .task-note-block { display:none; }
|
||||
/*
|
||||
#tasklist li.task-row.clicked {
|
||||
border:1px solid var(--color-tasklist-row-expanded-border);
|
||||
border-radius: 3px;
|
||||
|
|
@ -1225,6 +1276,7 @@ li.mtt-item-hidden { display:none; }
|
|||
#tasklist li.task-row.clicked .task-actions { display:block; }
|
||||
#tasklist li.task-row.clicked .task-through { white-space:normal; display:inline; }
|
||||
#tasklist li.task-row.clicked.task-has-note .task-note-block { display:block; }
|
||||
*/
|
||||
.task-toggle { display:none; }
|
||||
#tasklist .mtt-task-placeholder { line-height:1rem; padding-top:0.6rem; padding-bottom:0.6rem; }
|
||||
#tasklist .ui-sortable-helper { box-shadow:0px 0px 3px #555; }
|
||||
|
|
@ -1241,6 +1293,20 @@ li.mtt-item-hidden { display:none; }
|
|||
|
||||
.mtt-menu-container li { padding-top:0.3rem; padding-bottom:0.3rem; }
|
||||
|
||||
#page_taskviewer .container {
|
||||
flex-direction: column;
|
||||
}
|
||||
#page_taskviewer .container .right {
|
||||
max-width: unset;
|
||||
padding-left: 0;
|
||||
}
|
||||
#page_taskviewer .container .right .property {
|
||||
padding: 0.8rem 0.5rem;
|
||||
}
|
||||
#page_taskviewer .container .right .form-bottom-buttons .mtt-back-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mtt-settings-table .tr:not(.form-bottom-buttons) {
|
||||
display: block;
|
||||
background-color:var(--color-settings-row);
|
||||
|
|
|
|||
|
|
@ -29,8 +29,10 @@
|
|||
"task": "Task",
|
||||
"note": "Note",
|
||||
"tags": "Tags",
|
||||
"list": "List",
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"close": "Close",
|
||||
"password": "Password",
|
||||
"btn_login": "Login",
|
||||
"a_login": "Login",
|
||||
|
|
|
|||
|
|
@ -29,8 +29,10 @@
|
|||
"task": "Задача",
|
||||
"note": "Заметка",
|
||||
"tags": "Теги",
|
||||
"list": "Список",
|
||||
"save": "Сохранить",
|
||||
"cancel": "Отмена",
|
||||
"close": "Закрыть",
|
||||
"password": "Пароль",
|
||||
"btn_login": "Войти",
|
||||
"a_login": "Вход",
|
||||
|
|
|
|||
|
|
@ -173,6 +173,28 @@ $().ready(function(){
|
|||
</div>
|
||||
<!-- end of page_taskedit -->
|
||||
|
||||
<!-- Page: View Task -->
|
||||
<div id="page_taskviewer" style="display:none">
|
||||
<h3 class="page-title"><a class="mtt-back-button"></a><?php _e('task');?> <span id="taskviewer_id"></span></h3>
|
||||
<div class="title"></div>
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="note markdown-note"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="property prio"><?php _e('priority');?>: <span class="content"></span> </div>
|
||||
<div class="property due"><?php _e('due');?>: <span class="content"></span> </div>
|
||||
<div class="property tags"><?php _e('tags');?>: <span class="content"></span> </div>
|
||||
<div class="property list"><?php _e('list');?>: <span class="content"></span> </div>
|
||||
<div class="form-bottom-buttons">
|
||||
<button id="taskviewer_edit_btn"><?php _e('edit_task');?></button>
|
||||
<button class="mtt-back-button"><?php _e('close');?></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of page_taskviewer -->
|
||||
|
||||
|
||||
<div id="page_ajax" style="display:none">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue