diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 285cb5ffa..8d50f1e91 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -164,7 +164,10 @@ } margin-bottom: 15px; } - + .kanban-tag-btn-toggle { + margin-top: 10px; + margin-left: 10px + } #cp-app-kanban-container { flex: 1; display: flex; @@ -432,7 +435,12 @@ position: relative; min-height: 50px; .cp-kanban-filterTags { - display: inline-flex; + @media (min-width: 505px) { + display: inline-flex; + .kanban-tag-btn-toggle { + margin-right: 10px; + } + } align-items: center; flex: 1; //max-width: 80%; @@ -440,6 +448,9 @@ .cp-kanban-filterTags-toggle { min-width: 100px; display: flex; + @media (max-width: 505px) { + margin-left: 10px; + } flex-flow: column; flex-shrink: 0; & > * { @@ -457,6 +468,10 @@ button.cp-kanban-filterTags-reset { cursor: pointer; white-space: normal !important; + @media (max-width: 505px) { + margin-bottom: 10px; + margin-right: 10px; + } .tools_unselectable(); i { margin-right: 5px; diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 22db72ca4..5df509f81 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -56,6 +56,9 @@ define([ jKanban, Export) { + Messages.kanban_showTags = 'See all tags'; // XXX + Messages.kanban_hideTags = 'See less tags'; // XXX + var verbose = function (x) { console.log(x); }; verbose = function () {}; // comment out to enable verbose logging var onRedraw = Util.mkEvent(); @@ -937,6 +940,8 @@ define([ //framework._.sfCommon.setPadAttribute('quickMode', false); }); + var toggleTagsButton = h('button.btn.btn-default.kanban-tag-btn-toggle', Messages.kanban_showTags); + // Tags filter var existing = getExistingTags(kanban.options.boards); var list = h('div.cp-kanban-filterTags-list'); @@ -946,12 +951,14 @@ define([ ]); var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags); var tags = h('div.cp-kanban-filterTags', [ + h('span.cp-kanban-filterTags-toggle', [ hint, reset, ]), list, ]); + var $reset = $(reset); var $list = $(list); var $hint = $(hint); @@ -967,6 +974,7 @@ define([ return String($(this).data('tag')); }).get(); }; + var commitTags = function () { var t = getTags(); setTagFilterState(t.length); @@ -1024,6 +1032,40 @@ define([ commitTags(); }); + + if ($(window).width() < 500) { + + $(tags).append(toggleTagsButton); + + var hideTags = function () { + for (var tag of list.children) { + if (existing.indexOf(tag.innerHTML) > 10) { + $(tag).hide(); + } + } + }; + hideTags(); + + var toggleTags = function () { + for (var tag of list.children) { + if (existing.indexOf(tag.innerHTML) > 10 && kanban.options.tags.indexOf(tag.innerHTML) === -1) { + if ($(tag).is(":visible")) { + $(tag).hide(); + $(toggleTagsButton).text(Messages.kanban_showTags); + } else { + $(tag).show(); + $(toggleTagsButton).text(Messages.kanban_hideTags); + } + } + } + }; + + $(toggleTagsButton).click(function() { + toggleTags(); + }); + + } + var container = h('div#cp-kanban-controls', [ tags, h('div.cp-kanban-changeView', [