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 7 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"; @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
Unescape Escape 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
Unescape Escape 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
View File

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