From 3bc3c45485edd4ffc37f57020607a903c8ace33b Mon Sep 17 00:00:00 2001 From: ansuz Date: Fri, 12 Jun 2020 14:09:16 -0400 Subject: [PATCH 1/2] use more space for tags in the kanban UI --- www/kanban/app-kanban.less | 12 +++++++----- www/kanban/inner.js | 34 ++++++++++++++++++++-------------- 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 3777fa0a6..83d66e232 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -312,22 +312,24 @@ display: inline-flex; align-items: baseline; flex: 1; - max-width: 80%; + //max-width: 80%; min-width: 150px; - + .cp-kanban-filterTags-toggle { + min-width: 100px; + } .cp-kanban-filterTags-reset { cursor: pointer; - margin-left: 10px; - flex-shrink: 0; .tools_unselectable(); + font-weight: bold; i { margin-right: 5px; } } - .cp-kanban-filterTags-name { + .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; diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 84b7ea762..f845af6c7 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('span.cp-kanban-filterTags-reset', [ + //h('i.fa.fa-times'), // XXX creates vertical alignment issues + 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('display', bool? 'none': 'inherit'); + $reset.css('display', bool? 'inherit': 'none'); + }; + 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(); }); From 9cb9362187cab1f806341dabdb9cb199e32fc60c Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 15 Jun 2020 15:16:33 +0200 Subject: [PATCH 2/2] Kanban filter UI --- www/kanban/app-kanban.less | 29 +++++++++++++++++++++++------ www/kanban/inner.js | 8 ++++---- 2 files changed, 27 insertions(+), 10 deletions(-) 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();