From 078674a06f9f2f6e0f83ace17bffbd8aa0c072e3 Mon Sep 17 00:00:00 2001
From: Bel LaPointe <breel@qualtrics.com>
Date: Fri, 17 Sep 2021 09:43:13 -0600
Subject: [PATCH] fatter task action button, fix weird spacing

---
 public/mytinytodo.js            | 75 +++++++++++++++++++++++++++------
 public/themes/default/style.css | 33 +++++++++------
 2 files changed, 84 insertions(+), 24 deletions(-)

diff --git a/public/mytinytodo.js b/public/mytinytodo.js
index 8f6f08d..d9290a3 100755
--- a/public/mytinytodo.js
+++ b/public/mytinytodo.js
@@ -1,7 +1,7 @@
 /*
-	This file is part of myTinyTodo.
-	(C) Copyright 2009-2010 Max Pozdeev <maxpozdeev@gmail.com>
-	Licensed under the GNU GPL v2 license. See file COPYRIGHT for details.
+    This file is part of myTinyTodo.
+    (C) Copyright 2009-2010 Max Pozdeev <maxpozdeev@gmail.com>
+    Licensed under the GNU GPL v2 license. See file COPYRIGHT for details.
 */
 
 /**
@@ -204,7 +204,7 @@ function getGetParamValue(url, paramName) {
 
             $('#search').keyup(function (event) {
                 if (event.keyCode == 27) return;
-                if ($(this).val() == '') $('#search_close').hide();	//actual value is only on keyup
+                if ($(this).val() == '') $('#search_close').hide();    //actual value is only on keyup
                 else $('#search_close').show();
                 clearTimeout(searchTimer);
                 searchTimer = setTimeout(function () {
@@ -308,12 +308,12 @@ function getGetParamValue(url, paramName) {
 
             $('#lists li.mtt-tab .list-action').live('click', function () {
                 listMenu(this);
-                return false;	//stop bubble to tab click
+                return false;    //stop bubble to tab click
             });
 
             $('#list_all .list-action').click(function (event) {
                 listMenu(this);
-                return false;	//stop bubble to tab click
+                return false;    //stop bubble to tab click
             });
 
             //Priority popup
@@ -876,6 +876,43 @@ function getGetParamValue(url, paramName) {
     }
 
     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' : '') + prepareTagsClass(item.tags_ids) + '"><div class="task-container">' +
+            prepareTaskBlocks(item) + "</div></li>\n";
+    }
+
+    function prepareTaskBlocks(item, noteExp) {
+        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>';
+        /*
         // &mdash; = &#8212; = —
         var id = item.id;
         var prio = item.prio;
@@ -897,6 +934,7 @@ function getGetParamValue(url, paramName) {
             '</a> | <a href="#" class="mtt-action-note-cancel">' + _mtt.lang.get('actionNoteCancel') + '</a></span></div>' +
             '</div>' +
             "</div></li>\n";
+            */
     }
 
     function prepareHtml(s) {
@@ -911,7 +949,7 @@ function getGetParamValue(url, paramName) {
         if (prio < 0) {
             cl = 'prio-neg prio-neg-' + Math.abs(prio);
             v = '&#8722;' + Math.abs(prio);
-        }	// &#8722; = &minus; = −
+        }    // &#8722; = &minus; = −
         else if (prio > 0) {
             cl = 'prio-pos prio-pos-' + prio;
             v = '+' + prio;
@@ -919,7 +957,7 @@ function getGetParamValue(url, paramName) {
         else {
             cl = 'prio-zero';
             v = '&#177;0';
-        }													// &#177; = &plusmn; = ±
+        }                                                    // &#177; = &plusmn; = ±
         return '<span class="task-prio ' + cl + '">' + v + '</span>';
     }
 
@@ -944,11 +982,24 @@ function getGetParamValue(url, paramName) {
         return ' ' + a.join(' ');
     }
 
+    function prepareDueDate(item) {
+        return prepareDuedate(item);
+    }
+
     function prepareDuedate(item) {
         if (!item.duedate) return '';
         return '<span class="duedate" title="' + item.dueTitle + '"><span class="duedate-arrow">→</span> ' + 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) {
         if (form.task.value == '') return false;
         _mtt.db.request('newTask', {
@@ -1637,7 +1688,7 @@ function getGetParamValue(url, paramName) {
                     submenu = new mttMenu($(this).attr('submenu'));
                     submenu.$caller = $(this);
                     submenu.parent = menu;
-                    if (menu.root) submenu.root = menu.root;	//!! be careful with circular references
+                    if (menu.root) submenu.root = menu.root;    //!! be careful with circular references
                     else submenu.root = menu;
                     menu.submenu.push(submenu);
                     submenu.ts = submenu.container.mttmenu = submenu.root.ts;
@@ -2087,7 +2138,7 @@ function getGetParamValue(url, paramName) {
     }
 
     /*
-	Errors and Info messages
+    Errors and Info messages
     */
 
     function flashError(str, details) {
@@ -2113,7 +2164,7 @@ function getGetParamValue(url, paramName) {
 
 
     /*
-	Authorization
+    Authorization
     */
     function updateAccessStatus() {
         // flag.needAuth is not changed after pageload
@@ -2195,7 +2246,7 @@ function getGetParamValue(url, paramName) {
 
 
     /*
-	Settings
+    Settings
     */
 
     function showSettings() {
diff --git a/public/themes/default/style.css b/public/themes/default/style.css
index d3004ff..0736b5d 100755
--- a/public/themes/default/style.css
+++ b/public/themes/default/style.css
@@ -198,7 +198,7 @@ a {
 .mtt-tab a {
     position: relative;
     margin: 0;
-    font-size: 0.9em;
+    /*font-size: 0.9em;*/
     font-weight: bold;
     text-decoration: none;
     text-align: center;
@@ -454,8 +454,8 @@ a {
 }
 
 .mtt-taskbox-icon.mtt-icon-submittask {
-    background: url(images/mzl.png) 0px -32px no-repeat;
-    right: 4px;
+    /*background: url(images/mzl.png) 0px -32px no-repeat;
+    right: 4px;*/
 }
 
 #newtask_adv span {
@@ -627,9 +627,9 @@ li.task-expanded .task-toggle {
 }
 
 .task-actions {
-    float: right;
-    width: 20px;
-    text-align: right;
+    /*float: right;*/
+    /*width: 20px;*/
+    /*text-align: right;*/
 }
 
 .task-date {
@@ -760,18 +760,20 @@ li.task-completed .task-title a {
 }
 
 a.taskactionbtn {
-    display: block;
+    /*display: block;*/
+    /*
     float: right;
     height: 15px;
     width: 15px;
+    */
     text-decoration: none;
-    background: url(images/icons.gif) 0 0 no-repeat;
-    display: none;
+    /*background: url(images/icons.gif) 0 0 no-repeat;*/
+    /*display: none;*/
 }
 
 li:hover a.taskactionbtn, a.taskactionbtn.mtt-menu-button-active {
-    background-position: -16px 0;
-    display: block;
+    /*background-position: -16px 0;*/
+    /*display: block;*/
 }
 
 #tasklist.filter-past li, #tasklist.filter-today li, #tasklist.filter-soon li {
@@ -1484,7 +1486,7 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 
 /* Quick Task Add */
 .taskbox-c { flex-grow:1; display:flex; align-items:center; }
-.mtt-taskbox { position:relative; padding-left:22px; /*input padding+border*/ flex-grow:1; max-width:430px; }
+.mtt-taskbox { position:relative; /*padding-left:22px;*/ /*input padding+border*/ flex-grow:1; max-width:430px; }
 #task { color:#444444; background:#fff; height:1.35rem; padding:2px 4px; padding-right:20px; border:1px solid #ccc; border-radius:3px; width:100%; margin-left:-24px; }
 #mtt_body.show-all-tasks .taskbox-c, #mtt_body.readonly .taskbox-c { display:none; }
 
@@ -1756,3 +1758,10 @@ li.mtt-item-hidden { display:none; }
 .mtt-settings-table select { padding:2px; border:1px solid #ccc; border-radius:2px; }
 .mtt-settings-table .form-bottom-buttons input { padding:4px; border:1px solid #ccc; border-radius:3px; background-color:#efefef; margin:2px; }
 .mtt-settings-table input:focus, .mtt-settings-table select:focus { outline:none; border-color:#5a8df0; box-shadow:0 0 0 2px rgba(90,141,240,0.7); }
+
+
+/* bel post 165 */
+
+.task-actions .taskactionbtn {
+   width: 2.5em;
+}