From d2078c14440aea96388dff025f9175f88cf41a77 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 6 Mar 2025 16:23:45 +0100 Subject: [PATCH 1/5] Fix tags UI issues in kanban #1808 --- customize.dist/src/less2/include/forms.less | 10 ++++ www/kanban/app-kanban.less | 22 +++++--- www/kanban/inner.js | 58 ++++----------------- 3 files changed, 35 insertions(+), 55 deletions(-) diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 3c0b206db..0d00204f0 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -199,6 +199,16 @@ background-color: @cp_buttons-default; } } + &.btn-default-alt { + border-color: @cp_buttons-default; + color: @cp_buttons-default; + background-color: @cp_buttons-default-color; + &:hover, &:not(:disabled):active, &:focus { + border-color: @cp_buttons-default-color; + color: @cp_buttons-default-color; + background-color: @cp_toolbar-fade3; + } + } &.danger, &.btn-danger { background-color: @cp_buttons-red; diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 86e1052b5..ef0fc7fd8 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -145,6 +145,9 @@ margin-bottom: 15px; } + .cp-kanban-toggle-tags { + margin-right: 0.5rem; + } #cp-kanban-edit-tags { .tokenfield { margin: 0; @@ -152,10 +155,6 @@ } margin-bottom: 15px; } - .kanban-tag-btn-toggle { - margin-top: 10px; - margin-left: 10px - } #cp-app-kanban-container { flex: 1; display: flex; @@ -430,12 +429,10 @@ justify-content: space-between; position: relative; min-height: 50px; + align-items: center; .cp-kanban-filterTags { @media (min-width: 505px) { display: inline-flex; - .kanban-tag-btn-toggle { - margin-right: 10px; - } } align-items: center; flex: 1; @@ -571,7 +568,7 @@ display: flex; min-height: 0; .kanban-container { - padding: 30px 5px; + padding: 0px 5px; flex: 1; display: flex; max-height: 100%; @@ -700,6 +697,15 @@ } } + @media (pointer: none), (pointer:coarse) { + .kanban-container-outer { + .kanban-container { + padding: 30px 5px; + } + } + } + + &.cp-app-readonly { .kanban-item, .kanban-title-board { cursor: default !important; diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 947092c59..502da34ad 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -930,8 +930,6 @@ 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'); @@ -941,7 +939,6 @@ 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, @@ -1022,41 +1019,20 @@ define([ commitTags(); }); + let toggleTagsButton = h('button.btn.btn-default.cp-kanban-toggle-tags', [ + h('i.fa.fa-tags'), + h('span', Messages.fm_tagsName) + ]); - 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(); - }); - - } + let $toggleBtn = $(toggleTagsButton).click(function() { + let $t = $(tags).toggle(); + let visible = $t.is(':visible'); + $toggleBtn.toggleClass('btn-default', visible); + $toggleBtn.toggleClass('btn-default-alt', !visible); + }); var container = h('div#cp-kanban-controls', [ + toggleTagsButton, tags, h('div.cp-kanban-changeView', [ small, @@ -1065,18 +1041,6 @@ define([ ]); $container.before(container); - var common = framework._.sfCommon; - var $button = common.createButton('toggle', true, { - element: $(container), - icon: 'fa-tags', - text: Messages.fm_tagsName, - }, function () { - $button.toggleClass('cp-toolbar-button-active'); - - }); - $button.addClass('cp-toolbar-button-active'); - framework._.toolbar.$bottomL.append($button); - onRedraw.reg(function () { // Redraw if new tags have been added to items var old = Sortify(existing); From 1965c939b6e01af8b862b0d9b3c1acb3276dc273 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 7 Mar 2025 16:40:44 +0100 Subject: [PATCH 2/5] Fix initial tags state and UI issue --- .../src/less2/include/colortheme-dark.less | 1 + customize.dist/src/less2/include/forms.less | 4 +-- www/kanban/app-kanban.less | 3 ++ www/kanban/inner.js | 35 ++++++++++++++++--- 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 07117b0f9..1e9916267 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -164,6 +164,7 @@ @cp_buttons-hover: @cryptpad_color_brand_fadest; @cp_buttons-default: @cryptpad_color_grey_700; @cp_buttons-default-color: @cryptpad_text_col; +@cp_buttons-default-alt-color: @cryptpad_color_black; @cp_buttons-default-border: @cryptpad_text_col; @cp_buttons-red: #E55236; @cp_buttons-red-text: @cryptpad_color_light_red; diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 0d00204f0..61cc999b2 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -200,8 +200,8 @@ } } &.btn-default-alt { - border-color: @cp_buttons-default; - color: @cp_buttons-default; + border-color: @cp_toolbar-bottom-fg; + color: @cp_toolbar-bottom-fg; background-color: @cp_buttons-default-color; &:hover, &:not(:disabled):active, &:focus { border-color: @cp_buttons-default-color; diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index ef0fc7fd8..4e8d645ad 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -145,6 +145,9 @@ margin-bottom: 15px; } + .cp-kanban-toggle-container.cp-kanban-container-flex { + flex: 1; + } .cp-kanban-toggle-tags { margin-right: 0.5rem; } diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 502da34ad..5050ef749 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -1023,16 +1023,43 @@ define([ h('i.fa.fa-tags'), h('span', Messages.fm_tagsName) ]); + let toggleContainer = h('div.cp-kanban-toggle-container', toggleTagsButton); - let $toggleBtn = $(toggleTagsButton).click(function() { - let $t = $(tags).toggle(); - let visible = $t.is(':visible'); + let toggleClicked = false; + let $tags = $(tags); + let toggle = () => { + $tags.toggle(); + let visible = $tags.is(':visible'); + $(toggleContainer).toggleClass('cp-kanban-container-flex', !visible); $toggleBtn.toggleClass('btn-default', visible); $toggleBtn.toggleClass('btn-default-alt', !visible); + }; + let $toggleBtn = $(toggleTagsButton).click(function() { + toggleClicked = true; + toggle(); }); + const resizeTags = () => { + if (toggleClicked) { return; } + let visible = $tags.is(':visible'); + // Small screen and visible: hide + if ($(window).width() < 500) { + if (visible) { + $(tags).show(); + toggle(); + } + return; + } + // Large screen: make visible by default + if (visible) { return; } + $(tags).hide(); + toggle(); + }; + + $(window).on('resize', resizeTags); + var container = h('div#cp-kanban-controls', [ - toggleTagsButton, + toggleContainer, tags, h('div.cp-kanban-changeView', [ small, From 10afbca9b0fb5289fa6a4ddc3257b34e09d03eb9 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 7 Mar 2025 16:43:17 +0100 Subject: [PATCH 3/5] Update screen size limit for tags --- www/kanban/inner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 5050ef749..425f859b4 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -1043,7 +1043,7 @@ define([ if (toggleClicked) { return; } let visible = $tags.is(':visible'); // Small screen and visible: hide - if ($(window).width() < 500) { + if ($(window).width() < 600) { if (visible) { $(tags).show(); toggle(); From a070e3c3449b984e06ef3d468f9902c6de1bbac3 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 7 Mar 2025 17:28:54 +0100 Subject: [PATCH 4/5] Fix tags button style --- www/kanban/app-kanban.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 4e8d645ad..4a81b68b2 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -149,7 +149,12 @@ flex: 1; } .cp-kanban-toggle-tags { + text-transform: unset; margin-right: 0.5rem; + padding: 3px 10px; + span { + font: @colortheme_app-font; + } } #cp-kanban-edit-tags { .tokenfield { From cbfee93c3a3839ab776aef67b860eb5e0aca9e8a Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 7 Mar 2025 17:53:43 +0100 Subject: [PATCH 5/5] Fix kanban tags issues --- .../src/less2/include/colortheme-dark.less | 2 +- customize.dist/src/less2/include/colortheme.less | 1 + customize.dist/src/less2/include/forms.less | 4 ++-- www/kanban/app-kanban.less | 8 -------- www/kanban/inner.js | 12 ++++++++++-- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 1e9916267..1f5aee211 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -164,7 +164,7 @@ @cp_buttons-hover: @cryptpad_color_brand_fadest; @cp_buttons-default: @cryptpad_color_grey_700; @cp_buttons-default-color: @cryptpad_text_col; -@cp_buttons-default-alt-color: @cryptpad_color_black; +@cp_buttons-default-alt-color: @cryptpad_color_grey_700; @cp_buttons-default-border: @cryptpad_text_col; @cp_buttons-red: #E55236; @cp_buttons-red-text: @cryptpad_color_light_red; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index faaca5285..ece9f6fe0 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -164,6 +164,7 @@ @cp_buttons-default: #CCC; @cp_buttons-default-color: @cryptpad_text_col; @cp_buttons-default-border: @cryptpad_text_col; +@cp_buttons-default-alt-color: @cryptpad_color_grey_50; @cp_buttons-red: #E55236; @cp_buttons-red-text: @cp_buttons-red; @cp_buttons-red-color: #FFF; diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 61cc999b2..745d24ab0 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -200,8 +200,8 @@ } } &.btn-default-alt { - border-color: @cp_toolbar-bottom-fg; - color: @cp_toolbar-bottom-fg; + border-color: @cp_buttons-default-alt-color; + color: @cp_buttons-default-alt-color; background-color: @cp_buttons-default-color; &:hover, &:not(:disabled):active, &:focus { border-color: @cp_buttons-default-color; diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 4a81b68b2..b050791b7 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -454,16 +454,8 @@ } 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 { diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 425f859b4..df9a676f1 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -933,9 +933,9 @@ define([ // Tags filter var existing = getExistingTags(kanban.options.boards); var list = h('div.cp-kanban-filterTags-list'); - var reset = h('button.btn.btn-cancel.cp-kanban-filterTags-reset', [ + var reset = h('button.btn.btn-cancel.cp-kanban-filterTags-reset.cp-kanban-toggle-tags', [ h('i.fa.fa-times'), - Messages.kanban_clearFilter + h('span', Messages.kanban_clearFilter) ]); var hint = h('span.cp-kanban-filterTags-name', Messages.kanban_tags); var tags = h('div.cp-kanban-filterTags', [ @@ -951,8 +951,16 @@ define([ var $hint = $(hint); var setTagFilterState = function (bool) { + //$hint.toggle(!bool); + //$reset.toggle(!!bool); $hint.css('visibility', bool? 'hidden': 'visible'); + $hint.css('height', bool ? 0 : ''); + $hint.css('padding-top', bool ? 0 : ''); + $hint.css('padding-bottom', bool ? 0 : ''); $reset.css('visibility', bool? 'visible': 'hidden'); + $reset.css('height', !bool ? 0 : ''); + $reset.css('padding-top', !bool ? 0 : ''); + $reset.css('padding-bottom', !bool ? 0 : ''); }; setTagFilterState();