fatter task action button, fix weird spacing

public/mytinytodo.js

@@ -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) {
@@ -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', {

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;
+    /*background: url(images/mzl.png) 0px -32px no-repeat;
-    right: 4px;
+    right: 4px;*/
 }
 
 #newtask_adv span {
@@ -627,9 +627,9 @@ li.task-expanded .task-toggle {
 }
 
 .task-actions {
-    float: right;
+    /*float: right;*/
-    width: 20px;
+    /*width: 20px;*/
-    text-align: right;
+    /*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;
+    /*background: url(images/icons.gif) 0 0 no-repeat;*/
-    display: none;
+    /*display: none;*/
 }
 
 li:hover a.taskactionbtn, a.taskactionbtn.mtt-menu-button-active {
-    background-position: -16px 0;
+    /*background-position: -16px 0;*/
-    display: block;
+    /*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;
+}