mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-14 11:05:41 +05:00
Merge pull request #1812 from cryptpad/kanban-tags-toggle
Kanban "See all tags" button fix
This commit is contained in:
yflory
GitHub
commit
7fac976d17
@ -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_grey_700;
|
||||
@cp_buttons-default-border: @cryptpad_text_col;
|
||||
@cp_buttons-red: #E55236;
|
||||
@cp_buttons-red-text: @cryptpad_color_light_red;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -199,6 +199,16 @@
|
||||
background-color: @cp_buttons-default;
|
||||
}
|
||||
}
|
||||
&.btn-default-alt {
|
||||
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;
|
||||
color: @cp_buttons-default-color;
|
||||
background-color: @cp_toolbar-fade3;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger, &.btn-danger {
|
||||
background-color: @cp_buttons-red;
|
||||
|
||||
@ -145,6 +145,17 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cp-kanban-toggle-container.cp-kanban-container-flex {
|
||||
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 {
|
||||
margin: 0;
|
||||
@ -152,10 +163,6 @@
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.kanban-tag-btn-toggle {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px
|
||||
}
|
||||
#cp-app-kanban-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -430,12 +437,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;
|
||||
@ -449,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 {
|
||||
@ -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;
|
||||
|
||||
@ -943,18 +943,15 @@ 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');
|
||||
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', [
|
||||
|
||||
h('span.cp-kanban-filterTags-toggle', [
|
||||
hint,
|
||||
reset,
|
||||
@ -967,8 +964,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();
|
||||
|
||||
@ -1035,41 +1040,47 @@ define([
|
||||
commitTags();
|
||||
});
|
||||
|
||||
let toggleTagsButton = h('button.btn.btn-default.cp-kanban-toggle-tags', [
|
||||
h('i.fa.fa-tags'),
|
||||
h('span', Messages.fm_tagsName)
|
||||
]);
|
||||
let toggleContainer = h('div.cp-kanban-toggle-container', toggleTagsButton);
|
||||
|
||||
if ($(window).width() < 500) {
|
||||
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();
|
||||
});
|
||||
|
||||
$(tags).append(toggleTagsButton);
|
||||
|
||||
var hideTags = function () {
|
||||
for (var tag of list.children) {
|
||||
if (existing.indexOf(tag.innerHTML) > 10) {
|
||||
$(tag).hide();
|
||||
}
|
||||
const resizeTags = () => {
|
||||
if (toggleClicked) { return; }
|
||||
let visible = $tags.is(':visible');
|
||||
// Small screen and visible: hide
|
||||
if ($(window).width() < 600) {
|
||||
if (visible) {
|
||||
$(tags).show();
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
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();
|
||||
});
|
||||
|
||||
}
|
||||
return;
|
||||
}
|
||||
// Large screen: make visible by default
|
||||
if (visible) { return; }
|
||||
$(tags).hide();
|
||||
toggle();
|
||||
};
|
||||
|
||||
$(window).on('resize', resizeTags);
|
||||
|
||||
var container = h('div#cp-kanban-controls', [
|
||||
toggleContainer,
|
||||
tags,
|
||||
h('div.cp-kanban-changeView', [
|
||||
small,
|
||||
@ -1078,18 +1089,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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user