diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 3777fa0a6..663e295f1 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -3,6 +3,7 @@ @import (reference) "../../customize/src/less2/include/tools.less"; @import (reference) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/avatar.less"; +@import (reference) "../../customize/src/less2/include/buttons.less"; // body &.cp-app-kanban { @@ -309,28 +310,46 @@ position: relative; min-height: 50px; .cp-kanban-filterTags { + .buttons_main(); display: inline-flex; - align-items: baseline; + align-items: center; flex: 1; - max-width: 80%; + //max-width: 80%; min-width: 150px; - - .cp-kanban-filterTags-reset { - cursor: pointer; - margin-left: 10px; + .cp-kanban-filterTags-toggle { + min-width: 100px; + display: flex; + flex-flow: column; flex-shrink: 0; + & > * { + visibility: hidden; + } + & > span { + display: inline-block; + height: 38px; + line-height: 38px; + } + & > button { + margin-top: -38px; + } + } + button.cp-kanban-filterTags-reset { + cursor: pointer; + white-space: normal !important; + font-weight: bold; .tools_unselectable(); i { margin-right: 5px; } } - .cp-kanban-filterTags-name { - flex-shrink: 0; - } .cp-kanban-filterTags-list { + margin-right: 10px; margin-left: 10px; display: flex; flex-wrap: wrap; + &:not(:empty) { + margin-top: -5px; + } em { font-size: 14px; color: lighten(@cryptpad_text_col, 10%); diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 84b7ea762..56b4356c4 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -874,14 +874,27 @@ define([ // Tags filter var existing = getExistingTags(kanban.options.boards); var list = h('div.cp-kanban-filterTags-list'); - var reset = h('span.cp-kanban-filterTags-reset', [h('i.fa.fa-times'), Messages.kanban_clearFilter]); + var reset = h('button.btn.btn-secondary.cp-kanban-filterTags-reset', [ + h('i.fa.fa-times'), + Messages.kanban_clearFilter + ]); + var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags); var tags = h('div.cp-kanban-filterTags', [ - h('span.cp-kanban-filterTags-name', Messages.kanban_tags), + h('span.cp-kanban-filterTags-toggle', [ + hint, + reset, + ]), list, - reset ]); var $reset = $(reset); var $list = $(list); + var $hint = $(hint); + + var setTagFilterState = function (bool) { + $hint.css('visibility', bool? 'hidden': 'visible'); + $reset.css('visibility', bool? 'visible': 'hidden'); + }; + setTagFilterState(); var getTags = function () { return $list.find('span.active').map(function () { @@ -890,11 +903,7 @@ define([ }; var commitTags = function () { var t = getTags(); - if (t.length) { - $reset.css('visibility', ''); - } else { - $reset.css('visibility', 'hidden'); - } + setTagFilterState(t.length); //framework._.sfCommon.setPadAttribute('tagsFilter', t); kanban.options.tags = t; kanban.setBoards(kanban.options.boards); @@ -938,14 +947,11 @@ define([ return $(this).data('tag') === t; }).addClass('active'); }); - if (tags.length) { - $reset.css('visibility', ''); - } else { - $reset.css('visibility', 'hidden'); - } + setTagFilterState(tags.length); //framework._.sfCommon.setPadAttribute('tagsFilter', tags); }; - $reset.css('visibility', 'hidden').click(function () { + setTagFilterState(); + $reset.click(function () { setTags([]); commitTags(); });