Merge branch 'more-tag-space' into staging

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%);

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();
             });