From 4758d0c1a1d757f6f721e4412d603e023495003d Mon Sep 17 00:00:00 2001
From: Max Pozdeev <maxpozdeev@gmail.com>
Date: Mon, 21 Sep 2020 12:25:34 +0300
Subject: [PATCH] * can cancel tag filter by clicking on tag (not only close
 button)

---
 src/content/themes/default/style.css |  9 +++++----
 src/content/themes/ie8/mtt.js        |  4 ++++
 src/includes/mytinytodo.js           | 10 +++++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index 9df0241..6d000a3 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -142,17 +142,18 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 
 /* Tag Toolbar */
 #mtt-tag-toolbar { font-size:1.0rem; font-weight:normal; margin-top:0.5rem; line-height:1.5rem; display:flex; }
-.tag-toolbar-content { flex:auto; }
+.tag-toolbar-content { flex:auto; margin-bottom:-3px; }
 .tag-toolbar-close { flex-shrink:0; }
 .tag-toolbar-header { font-weight:normal; }
 .tag-filter { margin-left:3px; margin-right:3px; display:inline-flex; align-items:center;
-  border:1px solid #ddd; border-radius:2rem; background-color:#ddd; padding:0.1rem 0.5rem; margin-bottom:3px; }
+  border:1px solid #ddd; border-radius:2rem; background-color:#fff; padding:0.1rem 0.5rem; margin-bottom:3px; cursor:pointer;
+}
 .tag-filter-exclude { text-decoration:line-through; }
 .mtt-filter-header { font-weight:bold; margin-right:.33rem; }
-.mtt-filter-close { cursor:pointer; /*position:relative; bottom:1px; */ margin-left:3px; display:inline-block; width:1em; height:1em; /* em! */
+.tag-filter-btn { margin-left:3px; display:inline-block; width:1em; height:1em; /* em! */
   background:url(images/closetag.svg) no-repeat; background-size:1em 1em; background-position:bottom center;
   opacity:0.45; transition:opacity .1s ease-in; }
-.mtt-filter-close:hover { opacity:0.7; }
+.tag-filter:hover .tag-filter-btn { opacity:0.7; }
 #mtt-tag-toolbar-close span { background:url(images/close.svg) no-repeat; }
 
 
diff --git a/src/content/themes/ie8/mtt.js b/src/content/themes/ie8/mtt.js
index 4a7cd53..d5645be 100644
--- a/src/content/themes/ie8/mtt.js
+++ b/src/content/themes/ie8/mtt.js
@@ -25,6 +25,10 @@ if (window !== undefined && window.mytinytodo !== undefined)
 			'</div>'+
 			"</div></li>\n";
 	};
+	
+	mytinytodo.filter.prepareTagHtml = function(tagId, tag, classes) {
+		return '<span class="' + classes.join(' ') + '">' + tag + '<span class="mtt-filter-close" tagid="' + tagId + '"></span></span>';
+	}
 }
 
 function prepareHtml(s)
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index a069f47..7408b5e 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -218,7 +218,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
 			_mtt.menus.taskview.show(this);
 		});
 
-		$('#mtt-tag-filters').on('click', '.tag-filter .mtt-filter-close', function(){
+		$('#mtt-tag-filters').on('click', '.mtt-filter-close', function(){
 			cancelTagFilter($(this).attr('tagid'));
 		});
 		
@@ -739,8 +739,8 @@ var mytinytodo = window.mytinytodo = _mtt = {
 				if(this._filters[i].tagId && this._filters[i].tagId == tagId) return false;
 			}
 			this._filters.push({tagId:tagId, tag:tag, exclude:exclude});
-			$('#mtt-tag-filters').append('<span class="tag-filter tag-id-'+tagId+
-				(exclude ? ' tag-filter-exclude' : '')+'">'+tag+'<span class="mtt-filter-close" tagid="'+tagId+'"></span></span>');
+			var tagHtml = this.prepareTagHtml(tagId, tag, ['tag-filter', 'tag-id-'+tagId, exclude ? 'tag-filter-exclude' : '']) ;
+			$('#mtt-tag-filters').append(tagHtml);
 			$('#mtt-tag-toolbar').show();
 			return true;
 		},
@@ -768,6 +768,10 @@ var mytinytodo = window.mytinytodo = _mtt = {
 				}
 			}
 			return a.join(', ');
+		},
+		prepareTagHtml: function(tagId, tag, classes)
+		{
+			return '<span class="' + classes.join(' ') + ' mtt-filter-close" tagid="' + tagId + '">' + tag + '<span class="tag-filter-btn"></span></span>';
 		}
 	},