prehistoric-systems/mytinytodo
1
0
Fork 0
mirror of https://github.com/maxpozdeev/mytinytodo.git synced 2026-03-11 08:55:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

replace float in task; update 2 task icons

Browse source
This commit is contained in:
Max Pozdeev 2020-09-16 17:14:52 +03:00
parent 7022121c43
commit 9ff6e86e3d
5 changed files with 74 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/includes/mytinytodo.js
View file

@ -911,29 +911,44 @@ function loadTasks(opts)
function prepareTaskStr(item, noteExp)
{
// — = — = —
var id = item.id;
var prio = item.prio;
return '<li id="taskrow_'+id+'" class="' + (item.compl?'task-completed ':'') + item.dueClass + (item.note!=''?' task-has-note':'') +
return '<li id="taskrow_'+item.id+'" class="' + (item.compl?'task-completed ':'') + item.dueClass + (item.note!=''?' task-has-note':'') +
((curList.showNotes && item.note != '') || noteExp ? ' task-expanded' : '') + prepareTagsClass(item.tags_ids) + '">' +
'<div class="task-actions"><a href="#" class="taskactionbtn"></a></div>'+"\n"+
'<div class="task-left"><div class="task-toggle"></div>'+
'<input type="checkbox" '+(flag.readOnly?'disabled="disabled"':'')+(item.compl?'checked="checked"':'')+'/></div>'+"\n"+
'<div class="task-middle"><div class="task-through-right">'+prepareDuedate(item)+
'<span class="task-date-completed"><span title="'+item.dateInlineTitle+'">'+item.dateInline+'</span>&#8212;'+
'<span title="'+item.dateCompletedInlineTitle+'">'+item.dateCompletedInline+'</span></span></div>'+"\n"+
'<div class="task-through">'+preparePrio(prio,id)+'<span class="task-title">'+prepareHtml(item.title)+'</span> '+
(curList.id == -1 ? '<span class="task-listname">'+ tabLists.get(item.listId).name +'</span>' : '') + "\n" +
prepareTagsStr(item)+'<span class="task-date">'+item.dateInlineTitle+'</span></div>'+
'<div class="task-note-block">'+
'<div id="tasknote'+id+'" class="task-note"><span>'+prepareHtml(item.note)+'</span></div>'+
'<div id="tasknotearea'+id+'" class="task-note-area"><textarea id="notetext'+id+'"></textarea>'+
'<span class="task-note-actions"><a href="#" class="mtt-action-note-save">'+_mtt.lang.get('actionNoteSave')+
'</a> | <a href="#" class="mtt-action-note-cancel">'+_mtt.lang.get('actionNoteCancel')+'</a></span></div>'+
'</div>'+
"</div></li>\n";
prepareTaskBlocks(item) + "</li>\n";
};
function prepareTaskBlocks(item)
{
var id = item.id;
return ''+
'<div class="task-left">' +
'<div class="task-toggle"></div>' +
'<label><input type="checkbox" '+(flag.readOnly?'disabled="disabled"':'')+(item.compl?'checked="checked"':'')+'/></label>' +
"</div>\n" +
'<div class="task-middle">' +
'<div class="task-middle-top">' +
'<div class="task-through">' +
preparePrio(item.prio,id) +
'<span class="task-title">' + prepareHtml(item.title) + '</span> ' +
(curList.id == -1 ? '<span class="task-listname">'+ tabLists.get(item.listId).name +'</span>' : '') +
prepareTagsStr(item) +
'<span class="task-date">'+item.dateInlineTitle+'</span>' +
'</div>' +
'<div class="task-through-right">' + prepareDueDate(item) + prepareCompletedDate(item) + "</div>" +
'</div>' +
'<div class="task-note-block">' +
'<div id="tasknote'+id+'" class="task-note"><span>'+prepareHtml(item.note)+'</span></div>' +
'<div id="tasknotearea'+id+'" class="task-note-area"><textarea id="notetext'+id+'"></textarea>'+
'<span class="task-note-actions"><a href="#" class="mtt-action-note-save">'+_mtt.lang.get('actionNoteSave') +
'</a> | <a href="#" class="mtt-action-note-cancel">'+_mtt.lang.get('actionNoteCancel')+'</a></span>' +
'</div>' +
'</div>'+
"</div>" +
'<div class="task-actions"><div class="taskactionbtn"></div></div>';
};
function prepareHtml(s)
{
@ -974,12 +989,21 @@ function prepareTagsClass(ids)
return ' '+a.join(' ');
};
function prepareDuedate(item)
function prepareDueDate(item)
{
if(!item.duedate) return '';
return '<span class="duedate" title="'+item.dueTitle+'">'+item.dueStr+'</span>';
};
function prepareCompletedDate(item)
{
// &mdash; = &#8212; = —
return '<span class="task-date-completed">' +
'<span title="' + item.dateInlineTitle + '">' + item.dateInline + '</span>&#8212;' +
'<span title="' + item.dateCompletedInlineTitle + '">' + item.dateCompletedInline + '</span>' +
'</span>';
};
function submitNewTask(form)
{

6
src/themes/default/images/note-toggle.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<!--<rect x="0" y="0" width="16" height="16" fill="orange"/>-->
<polygon points="6 2, 12 8, 6 14" fill="#000"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<!--<rect x="0" y="0" width="14" height="14" fill="lightpink"/>-->
<polyline points="5 2, 10 7, 5 12" stroke-width="1.5" stroke="#000" fill="none" />
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 183 B

After

Width:  |  Height:  |  Size: 217 B

4
src/themes/default/images/task-menu.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<!--<rect x="0" y="0" width="14" height="14" fill="lightpink"/>-->
<polyline points="2 7, 7 12, 12 7" stroke-width="2" stroke="#000" fill="none" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 216 B

2
src/themes/default/mobile.css
View file

@ -32,7 +32,6 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
.task-note-actions { display:block; padding-top:8px; }
.task-note-block { margin-left:0px; border-left:1px solid #777777; background:none; padding-left:4px; display:none; }
.task-note-area textarea { width:95%; }
.task-middle { margin-right:0px; }
#tasklist li .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tasklist li:hover { background-color:#ffffff; }
@ -45,7 +44,6 @@ h2 { margin:0; margin-bottom:2px; font-size:1rem; }
/*#tasklist li.clicked.task-has-note .task-toggle { background-position:-48px 0; } */
#tasklist li.clicked.doubleclicked.task-has-note .task-note-block { display:none; }
.task-toggle { display:none; }
.task-middle { margin-left:25px; }
#page_taskedit { max-width:99.5%; border:none; position:static; padding:0; }
#page_taskedit .form-table { width:100%; }

33
src/themes/default/style.css
View file

@ -152,26 +152,34 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
#mtt-tag-toolbar-close span { background:url(images/close.svg) no-repeat; }
.task-left { float:left; }
.task-toggle { visibility:hidden; margin-top:1px; cursor:pointer; width:16px; height:16px; float:left;
background:url(images/note-toggle.svg) no-repeat; opacity:0.45;
.task-toggle { visibility:hidden; cursor:pointer; width:14px; height:14px; flex:0 0 14px; /* =1rem */ margin-right:2px;
background:url(images/note-toggle.svg) no-repeat; background-size:14px 14px; background-position:center; opacity:0.45;
transition:transform .1s linear, opacity .1s ease-in;
}
.task-toggle::after { content:'_'; visibility:hidden; } /* for baseline */
.task-toggle:hover { opacity:0.7; }
li.task-has-note .task-toggle { visibility:visible; }
li.task-expanded .task-toggle { transform:rotate(90deg); }
.task-middle { margin-left:40px; margin-right:20px; }
/* #tasklist input[type="checkbox"] { vertical-align:-1px; } /* Chrome */
#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 { padding:6px 2px 6px 6px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff;
display:flex; justify-content:start; align-items:baseline; }
#tasklist li:hover { background-color:#f6f6f6; }
.task-actions { float:right; width:20px; min-height:18px; padding-top:1px; text-align:right; }
.task-left { display:flex; align-items:baseline; }
.task-middle { flex-grow:1; margin-left: 5px; min-width:0; }
.task-middle-top { display:flex; align-items:baseline; }
.task-actions { flex:0 0 16px; margin-left:5px; }
.task-left label { min-width:18px; text-align:center; } /* Safari has small checkboxes */
.task-date { color:#999999; font-size:0.8rem; margin-left:4px; display:none; }
.task-date-completed { color:#999999; display:none; margin-left:5px; }
.show-inline-date .task-date { display:inline; }
.show-inline-date li.task-completed .task-date-completed { display:inline; }
.show-inline-date li.task-completed .task-date { display:none; }
.task-through { overflow:hidden; }
.task-through-right { float:right; }
.task-through { overflow:hidden; flex-grow:1; }
.task-through-right { }
.task-title a { color:#000000; }
.task-title a:hover { color:#af0000; }
#mtt_body.readonly #tasklist li .task-actions { display:none; }
@ -179,7 +187,7 @@ li.task-expanded .task-toggle { transform:rotate(90deg); }
.task-tags { padding:0px 2px; }
.task-tags .tag { font-size:0.8rem; font-weight:bold; color:#333333; text-decoration:underline; }
.task-tags .tag:hover { }
.duedate { color:#333333; padding:0px; padding-left:1px; margin-left:5px; }
.duedate { color:#333333; padding:0px; padding-left:1px; margin-left:5px; white-space:nowrap; }
.duedate:before { content:'\2192\20'; }
li.task-completed .duedate { /*font-size:0.8rem;*/ display:none; }
#tasklist li.soon .duedate { color:#008000; }
@ -197,8 +205,11 @@ li.task-completed .task-title a { color:#777777; }
border-radius:5px;
}
a.taskactionbtn { display:block; float:right; height:16px; width:16px; text-decoration:none; background:url(images/arrdown.svg) no-repeat; display:none; }
li:hover a.taskactionbtn, a.taskactionbtn.mtt-menu-button-active { background-image:url(images/arrdown-hover.svg); display:block;}
.taskactionbtn { height:1rem; width:1rem; background:url(images/task-menu.svg) no-repeat; background-size:cover; display:none;
opacity:0.45; transition:opacity .1s ease-in; }
.taskactionbtn::after { content:'_'; visibility:hidden; } /* for baseline */
li:hover .taskactionbtn { display:block; }
.taskactionbtn:hover, .taskactionbtn.mtt-menu-button-active { opacity:0.7; cursor:pointer; display:block; }
#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; }