diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 83d66e232..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,30 +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%; min-width: 150px; .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; + } } - .cp-kanban-filterTags-reset { + button.cp-kanban-filterTags-reset { cursor: pointer; - .tools_unselectable(); + white-space: normal !important; font-weight: bold; + .tools_unselectable(); i { margin-right: 5px; } } - .cp-kanban-filterTags-reset, .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 f845af6c7..56b4356c4 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -874,8 +874,8 @@ 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'), // XXX creates vertical alignment issues + 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); @@ -891,8 +891,8 @@ define([ var $hint = $(hint); var setTagFilterState = function (bool) { - $hint.css('display', bool? 'none': 'inherit'); - $reset.css('display', bool? 'inherit': 'none'); + $hint.css('visibility', bool? 'hidden': 'visible'); + $reset.css('visibility', bool? 'visible': 'hidden'); }; setTagFilterState();