The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

Fix tags UI issues in kanban #1808

Browse Source
This commit is contained in:
yflory 2025-03-06 16:23:45 +01:00
parent 94f3e5a9d2
commit d2078c1444
3 changed files with 35 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
customize.dist/src/less2/include/forms.less
View File

@ -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;

22
www/kanban/app-kanban.less
View File

@ -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;

58
www/kanban/inner.js
View File

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