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)
''+
"\n";
};
+
+ mytinytodo.filter.prepareTagHtml = function(tagId, tag, classes) {
+ return '' + tag + '';
+ }
}
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(''+tag+'');
+ 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 '' + tag + '';
}
},