Kanban filter UI

pull/1/head
yflory 5 years ago
parent 3bc3c45485
commit 9cb9362187

@ -3,6 +3,7 @@
@import (reference) "../../customize/src/less2/include/tools.less"; @import (reference) "../../customize/src/less2/include/tools.less";
@import (reference) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/markdown.less";
@import (reference) "../../customize/src/less2/include/avatar.less"; @import (reference) "../../customize/src/less2/include/avatar.less";
@import (reference) "../../customize/src/less2/include/buttons.less";
// body // body
&.cp-app-kanban { &.cp-app-kanban {
@ -309,30 +310,46 @@
position: relative; position: relative;
min-height: 50px; min-height: 50px;
.cp-kanban-filterTags { .cp-kanban-filterTags {
.buttons_main();
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: center;
flex: 1; flex: 1;
//max-width: 80%; //max-width: 80%;
min-width: 150px; min-width: 150px;
.cp-kanban-filterTags-toggle { .cp-kanban-filterTags-toggle {
min-width: 100px; 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; cursor: pointer;
.tools_unselectable(); white-space: normal !important;
font-weight: bold; font-weight: bold;
.tools_unselectable();
i { i {
margin-right: 5px; margin-right: 5px;
} }
} }
.cp-kanban-filterTags-reset, .cp-kanban-filterTags-name {
flex-shrink: 0;
}
.cp-kanban-filterTags-list { .cp-kanban-filterTags-list {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&:not(:empty) {
margin-top: -5px;
}
em { em {
font-size: 14px; font-size: 14px;
color: lighten(@cryptpad_text_col, 10%); color: lighten(@cryptpad_text_col, 10%);

@ -874,8 +874,8 @@ define([
// Tags filter // Tags filter
var existing = getExistingTags(kanban.options.boards); var existing = getExistingTags(kanban.options.boards);
var list = h('div.cp-kanban-filterTags-list'); var list = h('div.cp-kanban-filterTags-list');
var reset = h('span.cp-kanban-filterTags-reset', [ var reset = h('button.btn.btn-secondary.cp-kanban-filterTags-reset', [
//h('i.fa.fa-times'), // XXX creates vertical alignment issues h('i.fa.fa-times'),
Messages.kanban_clearFilter Messages.kanban_clearFilter
]); ]);
var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags); var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags);
@ -891,8 +891,8 @@ define([
var $hint = $(hint); var $hint = $(hint);
var setTagFilterState = function (bool) { var setTagFilterState = function (bool) {
$hint.css('display', bool? 'none': 'inherit'); $hint.css('visibility', bool? 'hidden': 'visible');
$reset.css('display', bool? 'inherit': 'none'); $reset.css('visibility', bool? 'visible': 'hidden');
}; };
setTagFilterState(); setTagFilterState();

Loading…
Cancel
Save