From 9cb9362187cab1f806341dabdb9cb199e32fc60c Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 15 Jun 2020 15:16:33 +0200
Subject: [PATCH] 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();