dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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";
.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) {

35
www/kanban/inner.js
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 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;
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);
kanban.onChange();
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; }

64
www/kanban/jkanban.js
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
@ -229,7 +235,7 @@
// if (board1==board2 && pos2<pos1)
// pos2 = pos2;
// moving element to target array
// moving element to target array
board1.item.splice(pos1, 1);
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) {
// add Element to JSON
// add Element to JSON
var boardJSON = __findBoardJSON(boardID);
boardJSON.item.push({
title: element.title
@ -272,8 +287,19 @@
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 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
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.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 Normal file
View File

File diff suppressed because it is too large Load Diff