* can cancel tag filter by clicking on tag (not only close button)

This commit is contained in:
Max Pozdeev 2020-09-21 12:25:34 +03:00
parent 2ea33b5854
commit 4758d0c1a1
3 changed files with 16 additions and 7 deletions

View file

@ -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; }

View file

@ -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)

View file

@ -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>';
}
},