From 8fe4cbf882fd14306af4a1a224663c8cc542e24d Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Mon, 19 Jul 2021 21:37:45 +0300
Subject: [PATCH] restructure task row

---
 src/content/themes/default/images/note.svg | 19 ----------
 src/content/themes/default/markdown.css    |  2 -
 src/content/themes/default/print.css       | 20 +++++++++-
 src/content/themes/default/style.css       | 40 ++++++++++++++------
 src/includes/mytinytodo.js                 | 43 +++++++++++-----------
 5 files changed, 68 insertions(+), 56 deletions(-)
 delete mode 100644 src/content/themes/default/images/note.svg

diff --git a/src/content/themes/default/images/note.svg b/src/content/themes/default/images/note.svg
deleted file mode 100644
index a1fb5ac..0000000
--- a/src/content/themes/default/images/note.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/content/themes/default/markdown.css b/src/content/themes/default/markdown.css
index 8e057ac..5c9de2d 100644
--- a/src/content/themes/default/markdown.css
+++ b/src/content/themes/default/markdown.css
@@ -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 {
diff --git a/src/content/themes/default/print.css b/src/content/themes/default/print.css
index 017bf6d..aca576d 100644
--- a/src/content/themes/default/print.css
+++ b/src/content/themes/default/print.css
@@ -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; }
diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index df174f9..b1650fa 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -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; }
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index 068b4a1..98567d8 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -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;