web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
MTRNord 2018-07-31 19:27:13 +02:00
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 Expand all files Collapse all files

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

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

35
www/kanban/inner.js
View File

@ -10,6 +10,7 @@ define([
'/common/modes.js', '/common/modes.js',
'/customize/messages.js', '/customize/messages.js',
'/kanban/jkanban.js', '/kanban/jkanban.js',
'/kanban/jscolor.js',
'css!/kanban/jkanban.css', 'css!/kanban/jkanban.css',
], function ( ], function (
$, $,
@ -105,7 +106,7 @@ define([
var kanban = new window.jKanban({ var kanban = new window.jKanban({
element: '#cp-app-kanban-content', element: '#cp-app-kanban-content',
gutter: '15px', gutter: '5px',
widthBoard: '300px', widthBoard: '300px',
buttonContent: '❌', buttonContent: '❌',
colors: COLORS, colors: COLORS,
@ -209,22 +210,26 @@ define([
verbose("in color click"); verbose("in color click");
var board = $(el.parentNode).attr("data-id"); var board = $(el.parentNode).attr("data-id");
var boardJSON = kanban.getBoardJSON(board); var boardJSON = kanban.getBoardJSON(board);
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);
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; var currentColor = boardJSON.color;
verbose("Current color " + currentColor); jscolorL.fromString(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);
kanban.onChange();
}, },
buttonClick: function (el, boardId, e) { buttonClick: function (el, boardId) {
e.stopPropagation();
if (framework.isReadOnly() || framework.isLocked()) { return; } if (framework.isReadOnly() || framework.isLocked()) { return; }
UI.confirm(Messages.kanban_deleteBoard, function (yes) { UI.confirm(Messages.kanban_deleteBoard, function (yes) {
if (!yes) { return; } if (!yes) { return; }

64
www/kanban/jkanban.js
View File

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

1855
www/kanban/jscolor.js Normal file
View File

File diff suppressed because it is too large Load Diff