infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add Color picker for board title and let it have less space between boards. (Default colors are still working)

Browse Source
pull/1/head
MTRNord 6 years ago
parent 0769452f04
commit 8df1dc19f2
No known key found for this signature in database
GPG Key ID: E5B89311FAB91B9F
4 changed files with 1939 additions and 37 deletions
Show Stats Download Patch File Download Diff File

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

@ -3,8 +3,8 @@
@import (once) "../../customize/src/less2/include/tools.less";
.framework_main( @bg-color: @colortheme_kanban-bg,
@warn-color: @colortheme_kanban-warn,
@color: @colortheme_kanban-color);
@warn-color: @colortheme_kanban-warn,
@color: @colortheme_kanban-color);
// body
&.cp-app-kanban {
@ -115,39 +115,39 @@
}
.kanban-header-yellow {
background: #FC3;
background: #FC3 !important;
}
.kanban-header-orange {
background: #F91;
background: #F91 !important;
}
.kanban-header-blue {
background: #0AC;
background: #0AC !important;
}
.kanban-header-red {
background: #E43;
background: #E43 !important;
}
.kanban-header-green {
background: #8C4;
background: #8C4 !important;
}
.kanban-header-purple {
background: #c851ff;
background: #c851ff !important;
}
.kanban-header-cyan {
background: #00ffff;
background: #00ffff !important;
}
.kanban-header-lightgreen {
background: #c3ff5b;
background: #c3ff5b !important;
}
.kanban-header-lightblue {
background: #adeeff;
background: #adeeff !important;
}
@media (max-width: @browser_media-medium-screen) {

33
www/kanban/inner.js
Unescape Escape View File

@ -10,6 +10,7 @@ define([
'/common/modes.js',
'/customize/messages.js',
'/kanban/jkanban.js',
'/kanban/jscolor.js',
'css!/kanban/jkanban.css',
], function (
$,
@ -105,7 +106,7 @@ define([
var kanban = new window.jKanban({
element: '#cp-app-kanban-content',
gutter: '15px',
gutter: '5px',
widthBoard: '300px',
buttonContent: '❌',
colors: COLORS,
@ -209,22 +210,26 @@ define([
verbose("in color click");
var board = $(el.parentNode).attr("data-id");
var boardJSON = kanban.getBoardJSON(board);
var currentColor = boardJSON.color;
var onchange = function (colorL) {
var elL = el;
var boardL = $(elL.parentNode).attr("data-id");
var boardJSONL = kanban.getBoardJSON(boardL);
var currentColor = boardJSONL.color;
verbose("Current color " + currentColor);
var index = kanban.options.colors.findIndex(function (element) {
return (element === currentColor);
}) + 1;
verbose("Next index " + index);
if (index >= kanban.options.colors.length) { index = 0; }
var nextColor = kanban.options.colors[index];
verbose("Next color " + nextColor);
boardJSON.color = nextColor;
$(el).removeClass("kanban-header-" + currentColor);
$(el).addClass("kanban-header-" + nextColor);
if (currentColor !== colorL.toString()) {
$(elL).removeClass("kanban-header-" + currentColor);
boardJSONL.color = colorL.toString();
kanban.onChange();
}
};
var jscolorL;
el._jscLinkedInstance = undefined;
jscolorL = new jscolor(el,{onFineChange: onchange, valueElement:undefined});
jscolorL.show();
var currentColor = boardJSON.color;
jscolorL.fromString(currentColor);
},
buttonClick: function (el, boardId, e) {
e.stopPropagation();
buttonClick: function (el, boardId) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
UI.confirm(Messages.kanban_deleteBoard, function (yes) {
if (!yes) { return; }

56
www/kanban/jkanban.js
Unescape Escape View File

@ -52,6 +52,7 @@
widthBoard: '250px',
responsive: '700',
colors: ["yellow", "green", "blue", "red", "orange"],
responsivePercentage: false,
boards: [],
dragBoards: true,
addItemButton: false,
@ -85,12 +86,12 @@
//Init Drag Board
self.drakeBoard = self.dragula([self.container], {
moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; }
if (self.options.readOnly) { return false; }
if (!self.options.dragBoards) return false;
return (handle.classList.contains('kanban-board-header') || handle.classList.contains('kanban-title-board'));
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
if (self.options.readOnly) { return false; }
return target.classList.contains('kanban-container');
},
revertOnSpill: true,
@ -112,7 +113,7 @@
el.classList.remove('is-moving');
self.options.dropBoard(el, target, source, sibling);
if (typeof (el.dropfn) === 'function')
el.dropfn(el, target, source, sibling);
el.dropfn(el, target, source, sibling); el.dropfn(el, target, source, sibling);
// TODO: update board object board order
console.log("Drop " + $(el).attr("data-id") + " just before " + (sibling ? $(sibling).attr("data-id") : " end "));
@ -145,15 +146,18 @@
//Init Drag Item
self.drake = self.dragula(self.boardContainer, {
moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; }
if (self.options.readOnly) { return false; }
return handle.classList.contains('kanban-item');
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
if (self.options.readOnly) { return false; }
return true;
},
revertOnSpill: true
})
.on('cancel', function(el, container, source) {
self.enableAllBoards();
})
.on('drag', function (el, source) {
// we need to calculate the position before starting to drag
self.dragItemPos = self.findElementPosition(el);
@ -184,7 +188,9 @@
var boardId = source.parentNode.dataset.id;
self.options.dragcancelEl(el, boardId);
})
.on('drop', function (el, target, source, sibling) {
.on('drop', function(el, target, source, sibling) {
self.enableAllBoards();
console.log("In drop");
// TODO: update board object board order
@ -240,6 +246,15 @@
}
};
this.enableAllBoards = function() {
var allB = document.querySelectorAll('.kanban-board');
if (allB.length > 0 && allB !== undefined) {
for (var i = 0; i < allB.length; i++) {
allB[i].classList.remove('disabled-board');
}
}
};
this.addElement = function (boardID, element) {
// add Element to JSON
@ -272,8 +287,19 @@
return self;
};
this.addBoards = function (boards) {
this.addBoards = function(boards) {
if (self.options.responsivePercentage) {
self.container.style.width = '100%';
self.options.gutter = '1%';
if (window.innerWidth > self.options.responsive) {
var boardWidth = (100 - boards.length * 2) / boards.length;
} else {
var boardWidth = 100 - (boards.length * 2);
}
} else {
var boardWidth = self.options.widthBoard;
}
var addButton = self.options.addItemButton;
var buttonContent = self.options.buttonContent;
@ -285,12 +311,24 @@
if (self.options.boards !== boards)
self.options.boards.push(board);
/*if (!self.options.responsivePercentage) {
//add width to container
if (self.container.style.width === '') {
self.container.style.width = parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
} else {
self.container.style.width = parseInt(self.container.style.width) + parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
}
}*/
//create node
var boardNode = document.createElement('div');
boardNode.dataset.id = board.id;
boardNode.classList.add('kanban-board');
//set style
if (self.options.responsivePercentage) {
boardNode.style.width = boardWidth + '%';
} else {
boardNode.style.width = boardWidth;
}
boardNode.style.marginLeft = self.options.gutter;
boardNode.style.marginRight = self.options.gutter;
// header board
@ -303,6 +341,10 @@
headerBoard.classList.add(value);
});
if (board.color !== '' && board.color !== undefined) {
headerBoard._jscLinkedInstance = undefined;
jscolorL = new jscolor(headerBoard,{valueElement:undefined});
jscolorL.fromString(board.color);
headerBoard._jscLinkedInstance = undefined;
headerBoard.classList.add("kanban-header-" + board.color);
}
titleBoard = document.createElement('div');

1855
www/kanban/jscolor.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save