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

restructure task row

Browse source
This commit is contained in:
Max Pozdeev 2021-07-19 21:37:45 +03:00
parent e4d147eeba
commit 8fe4cbf882
5 changed files with 68 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/content/themes/default/images/note.svg
View file

@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<defs>
<linearGradient id="gradient1" x1="10%" y1="90%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#eee"/>
</linearGradient>
<style type="text/css"><![CDATA[
.line1 { stroke:#333; stroke-width:0.3; }
]]></style>
</defs>
<polygon points="2 1, 11 1, 14 4, 14 15, 2 15" stroke-width="0.2" stroke="#333" fill="#fff" fill-opacity="0.0" />
<line x1="5" y1="4" x2="10" y2="4" class="line1"/>
<line x1="5" y1="6" x2="11" y2="6" class="line1"/>
<line x1="5" y1="8" x2="11" y2="8" class="line1"/>
<line x1="5" y1="10" x2="11" y2="10" class="line1"/>
<line x1="5" y1="12" x2="11" y2="12" class="line1"/>
<polygon points="3 2, 10 2, 10 5, 13 5, 13 14, 3 14" fill="url(#gradient1)" fill-opacity="0.4" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 856 B

2
src/content/themes/default/markdown.css
View file

@ -113,8 +113,6 @@
/* narrow screens */
@media only screen and (max-width: 600px) {
.markdown-note { padding-top: 0.5rem; }
.markdown-note pre,
.markdown-note code,
.markdown-note tt {

20
src/content/themes/default/print.css
View file

@ -19,9 +19,25 @@
#taskview .arrdown { display:none; }
#tasklist { list-style-type: decimal; list-style-position: outside; }
#tasklist li { border-bottom:none; margin-left:2.5rem; /*border-bottom:1px solid #f0f0f0;*/ }
#tasklist li.task-row {
border-bottom:none;
margin-left:2.5rem;
/*border-bottom:1px solid #f0f0f0;*/
border: none;
}
#tasklist li.task-row:hover { box-shadow: none; }
#tasklist li.task-row.task-has-note.task-expanded .task-block,
#tasklist li.task-row.task-has-note.clicked .task-block,
#tasklist li.task-row.task-expanded { border: none; }
div.task-note-block { border-left:1px solid #777777; background:none; padding-left:5px; margin-top:5px; padding-top:0px; font-size:9pt; color:#333333; }
div.task-note-block {
border-left:1px solid #777777;
padding-left:10px;
margin-left:3px;
padding-top:0px;
font-size:9pt;
color:#333333;
}
.task-middle { margin-left:0px; margin-right:3px; }
.task-left { display:none; }
.task-actions { display:none; }

40
src/content/themes/default/style.css
View file

@ -164,7 +164,6 @@ li.task-row.task-expanded .task-toggle { transform:rotate(90deg); }
#tasklist { list-style-type: none; margin: 0; padding: 0;}
#tasklist li.task-row {
padding:0px 2px;
border:1px solid transparent; /* allocate space for expanded border */
border-bottom:1px solid #DEDEDE;
margin-bottom: 4px;
@ -178,11 +177,30 @@ li.task-row.task-expanded .task-toggle { transform:rotate(90deg); }
/* transition: box-shadow .1s ease-in; */
z-index: 1;
}
#tasklist .task-container { display:flex; justify-content:flex-start; align-items:baseline; }
#tasklist li.task-row.task-expanded { border:1px solid #DEDEDE; border-radius: 3px; }
#tasklist .task-block {
display:flex;
justify-content:flex-start;
align-items:baseline;
padding:0px 3px;
}
#tasklist li.task-row.task-expanded {
border:1px solid #DEDEDE;
border-radius: 3px;
}
#tasklist li.task-row.task-has-note.task-expanded .task-block,
#tasklist li.task-row.task-has-note.clicked .task-block {
border-bottom: 1px solid #f0f0f0;
}
.task-left { display:inline-block; }
.task-middle { flex-grow:1; margin:0.6rem 0px; margin-left:5px; min-width:0; /*for long text*/ flex-basis:0; /* IE11 */}
.task-middle-top { display:flex; align-items:baseline; }
.task-middle {
flex-grow:1;
margin:0.6rem 0px;
margin-left:5px;
min-width:0; /*for long text*/
flex-basis:0; /* IE11 */
display:flex;
align-items:baseline;
}
.task-actions { flex:0 0 1rem; margin-left:5px; }
.task-left label { min-width:18px; text-align:center; } /* Safari has small checkboxes */
@ -239,13 +257,10 @@ li.task-row:hover .taskactionbtn { visibility:visible; }
}
.task-note-block {
margin-left:2px;
padding: 0px 2rem;
color:#444;
background:url(images/note.svg) left 0px no-repeat;
background-size:16px 16px;
padding-left:19px;
min-height:16px;
margin-top:6px;
display:none;
white-space:normal;
word-wrap:break-word;
@ -462,11 +477,14 @@ li.mtt-item-hidden { display:none; }
#toolbar.mtt-insearch .searchbox-c { width:100%; max-width:100%; }
#search { padding:5px 20px; border-radius:15px; }
#tasklist li.task-row { padding:0px 3px; }
.task-actions { display:none; }
.task-date { display:none; }
.task-note-actions { display:block; padding-top:8px; }
.task-note-block { margin-left:0px; background:none; display:none; padding-left:0px; padding-right:0px; border-top:1px solid #f0f0f0; }
.task-note-block {
padding-left: 0.9rem;
padding-right: 0.9rem;
display: none;
}
.task-note-area textarea { width:95%; }
#tasklist li.task-row .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

43
src/includes/mytinytodo.js
View file

@ -397,7 +397,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
});
// tasklist handlers
$("#tasklist").on('click', '> li.task-row .task-middle-top', function(e) {
$("#tasklist").on('click', '> li.task-row .task-middle', function(e) {
if ( findParentNode(e.target, 'A') ) {
return; //ignore clicks on links
}
@ -977,8 +977,8 @@ function loadTasks(opts)
function prepareTaskStr(item, noteExp)
{
return '<li id="taskrow_'+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) + '"><div class="task-container">' +
prepareTaskBlocks(item) + "</div></li>\n";
((curList.showNotes && item.note != '') || noteExp ? ' task-expanded' : '') + prepareDomClassOfTags(item.tags_ids) + '">' +
prepareTaskBlocks(item) + "</li>\n";
};
_mtt.prepareTaskStr = prepareTaskStr;
@ -987,15 +987,14 @@ function prepareTaskBlocks(item)
var id = item.id;
var markdown = '';
if (_mtt.options.markdown == true) markdown = 'markdown-note';
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" +
return '' +
'<div class="task-block">' +
'<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-middle">' +
'<div class="task-through">' +
preparePrio(item.prio,id) +
'<span class="task-title">' + prepareTaskTitleInlineHtml(item.title) + '</span> ' +
@ -1004,18 +1003,18 @@ function prepareTaskBlocks(item)
'<span class="task-date">'+item.dateInlineTitle+'</span>' +
'</div>' +
'<div class="task-through-right">' + prepareDueDate(item) + prepareCompletedDate(item) + "</div>" +
"</div>" +
'<div class="task-actions"><div class="taskactionbtn"></div></div>' +
'</div>' +
'<div class="task-note-block">' +
'<div id="tasknote' + id + '" class="task-note ' + markdown + '">' + prepareTaskNoteInlineHtml(item.note, item.noteText) + '</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 class="task-note-block">' +
'<div id="tasknote' + id + '" class="task-note ' + markdown + '">' + prepareTaskNoteInlineHtml(item.note, item.noteText) + '</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>';
'</div>';
};
_mtt.prepareTaskBlocks = prepareTaskBlocks;