From 0c2694c746da88e98472ef2684bfb84194dd7d8f Mon Sep 17 00:00:00 2001 From: maxpozdeev Date: Tue, 22 Aug 2023 16:54:33 +0300 Subject: [PATCH] + use task viewer in mobile style --- src/content/mytinytodo.js | 99 ++++++++++++++++++----- src/content/theme/style.css | 154 +++++++++++++++++++++++++----------- src/includes/lang/en.json | 2 + src/includes/lang/ru.json | 2 + src/includes/theme.php | 22 ++++++ 5 files changed, 217 insertions(+), 62 deletions(-) diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js index 66bfdd8..c849b4d 100644 --- a/src/content/mytinytodo.js +++ b/src/content/mytinytodo.js @@ -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 '
  • ' + prepareTaskBlocks(item) + "
    • \n"; }; @@ -1188,7 +1212,7 @@ function prepareTaskBlocks(item) preparePrio(item.prio,id) + '' + prepareTaskTitleInlineHtml(item.title) + ' ' + (curList.id == -1 ? ''+ tabLists.get(item.listId).name +'' : '') + - prepareTagsStr(item) + + '' + prepareTagsStr(item) + '' + '' + '
    ' + prepareDueDate(item) + "
    " + '' + @@ -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] = ''+a[i]+''; } - return ''+a.join(', ')+''; + 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); diff --git a/src/content/theme/style.css b/src/content/theme/style.css index ebbccaf..e2daf1a 100644 --- a/src/content/theme/style.css +++ b/src/content/theme/style.css @@ -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); diff --git a/src/includes/lang/en.json b/src/includes/lang/en.json index 9f774f0..dc9b0db 100644 --- a/src/includes/lang/en.json +++ b/src/includes/lang/en.json @@ -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", diff --git a/src/includes/lang/ru.json b/src/includes/lang/ru.json index b44872c..1d6a5f8 100644 --- a/src/includes/lang/ru.json +++ b/src/includes/lang/ru.json @@ -29,8 +29,10 @@ "task": "Задача", "note": "Заметка", "tags": "Теги", + "list": "Список", "save": "Сохранить", "cancel": "Отмена", + "close": "Закрыть", "password": "Пароль", "btn_login": "Войти", "a_login": "Вход", diff --git a/src/includes/theme.php b/src/includes/theme.php index 3fb7d75..c9ca917 100644 --- a/src/includes/theme.php +++ b/src/includes/theme.php @@ -173,6 +173,28 @@ $().ready(function(){ + + + +