Merge branch 'kanban' into staging
ansuz
7 years ago
commit
2170fcb9ad
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,126 @@
|
||||
@import (once) "../../customize/src/less2/include/browser.less";
|
||||
@import (once) "../../customize/src/less2/include/framework.less";
|
||||
@import (once) "../../customize/src/less2/include/tools.less";
|
||||
|
||||
.framework_main( @bg-color: @colortheme_kanban-bg,
|
||||
@warn-color: @colortheme_kanban-warn,
|
||||
@color: @colortheme_kanban-color);
|
||||
|
||||
// body
|
||||
&.cp-app-kanban {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-height: 100%;
|
||||
min-height: auto;
|
||||
|
||||
#cp-app-kanban-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
#cp-app-kanban-editor {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#cp-app-kanban-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.kanban-container-outer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.kanban-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.kanban-title-board {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#kanban-edit {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#kanban-edit {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
@button-size: 50px;
|
||||
#kanban-addboard {
|
||||
margin: 30px;
|
||||
border: 1px solid;
|
||||
width: @button-size;
|
||||
height: @button-size;
|
||||
line-height: @button-size;
|
||||
text-align: center;
|
||||
background: @colortheme_kanban-bg;
|
||||
font-weight: bold;
|
||||
align-self: flex-start;
|
||||
font-size: 50px;
|
||||
cursor: pointer;
|
||||
.tools_unselectable();
|
||||
}
|
||||
|
||||
.kanban-removeboard {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
padding: 3px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
background: #eee;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
.tools_unselectable();
|
||||
}
|
||||
|
||||
.kanban-header-yellow {
|
||||
background: #FC3;
|
||||
}
|
||||
|
||||
.kanban-header-orange {
|
||||
background: #F91;
|
||||
}
|
||||
|
||||
.kanban-header-blue {
|
||||
background: #0AC;
|
||||
}
|
||||
|
||||
.kanban-header-red {
|
||||
background: #E43;
|
||||
}
|
||||
|
||||
.kanban-header-green {
|
||||
background: #8C4;
|
||||
}
|
||||
|
||||
@media (max-width: @browser_media-medium-screen) {
|
||||
#cp-app-kanban-container {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>CryptPad</title>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#sbox-iframe {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<iframe id="sbox-iframe">
|
||||
</iframe>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="cp-app-noscroll">
|
||||
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
|
||||
<script async data-bootload="/kanban/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
.loading-hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="cp-app-kanban">
|
||||
<div id="cme_toolbox" class="cp-toolbar-container"></div>
|
||||
<div id="cp-app-kanban-editor">
|
||||
<div id="cp-app-kanban-container">
|
||||
<div id="cp-app-kanban-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,328 @@
|
||||
define([
|
||||
'jquery',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/sframe-app-framework.js',
|
||||
'/common/common-util.js',
|
||||
'/common/common-hash.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/modes.js',
|
||||
'/customize/messages.js',
|
||||
'/kanban/jkanban.js',
|
||||
'css!/kanban/jkanban.css',
|
||||
], function (
|
||||
$,
|
||||
nThen,
|
||||
SFCommon,
|
||||
Framework,
|
||||
Util,
|
||||
Hash,
|
||||
UI,
|
||||
Modes,
|
||||
Messages)
|
||||
{
|
||||
|
||||
var verbose = function (x) { console.log(x); };
|
||||
verbose = function () {}; // comment out to enable verbose logging
|
||||
|
||||
// Kanban code
|
||||
var initKanban = function (framework, boards) {
|
||||
var defaultBoards = [{
|
||||
"id": "todo",
|
||||
"title": Messages.kanban_todo,
|
||||
"color": "blue",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [1])
|
||||
}, {
|
||||
"title": Messages._getKey('kanban_item', [2])
|
||||
}]
|
||||
}, {
|
||||
"id": "working",
|
||||
"title": Messages.kanban_working,
|
||||
"color": "orange",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [3])
|
||||
}, {
|
||||
"title": Messages._getKey('kanban_item', [4])
|
||||
}]
|
||||
}, {
|
||||
"id": "done",
|
||||
"title": Messages.kanban_done,
|
||||
"color": "green",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [5])
|
||||
}, {
|
||||
"title": Messages._getKey('kanban_item', [6])
|
||||
}]
|
||||
}];
|
||||
|
||||
if (!boards) {
|
||||
verbose("Initializing with default boards content");
|
||||
boards = defaultBoards;
|
||||
} else {
|
||||
verbose("Initializing with boards content " + boards);
|
||||
}
|
||||
|
||||
// Remove any existing elements
|
||||
$(".kanban-container-outer").remove();
|
||||
|
||||
var getInput = function () {
|
||||
return $('<input>', {
|
||||
'type': 'text',
|
||||
'id': 'kanban-edit',
|
||||
'size': '30'
|
||||
});
|
||||
};
|
||||
|
||||
var kanban = new window.jKanban({
|
||||
element: '#cp-app-kanban-content',
|
||||
gutter: '15px',
|
||||
widthBoard: '300px',
|
||||
onChange: function () {
|
||||
verbose("Board object has changed");
|
||||
framework.localChange();
|
||||
},
|
||||
click: function (el) {
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
var name = $(el).text();
|
||||
$(el).html('');
|
||||
var $input = getInput().val(name).appendTo(el).focus();
|
||||
$input[0].select();
|
||||
var save = function () {
|
||||
// Store the value
|
||||
var name = $input.val();
|
||||
// Remove the input
|
||||
$(el).text(name);
|
||||
// Save the value for the correct board
|
||||
var board = $(el.parentNode.parentNode).attr("data-id");
|
||||
var pos = kanban.findElementPosition(el);
|
||||
kanban.getBoardJSON(board).item[pos].title = name;
|
||||
kanban.onChange();
|
||||
// Unlock edit mode
|
||||
kanban.inEditMode = false;
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
return;
|
||||
}
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$(el).text(name);
|
||||
kanban.inEditMode = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
boardTitleClick: function (el, e) {
|
||||
e.stopPropagation();
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
var name = $(el).text();
|
||||
$(el).html('');
|
||||
var $input = getInput().val(name).appendTo(el).focus();
|
||||
$input[0].select();
|
||||
var save = function () {
|
||||
// Store the value
|
||||
var name = $input.val();
|
||||
// Remove the input
|
||||
$(el).text(name);
|
||||
// Save the value for the correct board
|
||||
var board = $(el.parentNode.parentNode).attr("data-id");
|
||||
kanban.getBoardJSON(board).title = name;
|
||||
kanban.onChange();
|
||||
// Unlock edit mode
|
||||
kanban.inEditMode = false;
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
return;
|
||||
}
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$(el).text(name);
|
||||
kanban.inEditMode = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
colorClick: function (el) {
|
||||
verbose("in color click");
|
||||
var board = $(el.parentNode).attr("data-id");
|
||||
var boardJSON = kanban.getBoardJSON(board);
|
||||
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();
|
||||
|
||||
},
|
||||
removeClick: function (el) {
|
||||
UI.confirm(Messages.kanban_deleteBoard, function (yes) {
|
||||
if (!yes) { return; }
|
||||
verbose("Delete board");
|
||||
var boardName = $(el.parentNode.parentNode).attr("data-id");
|
||||
for (var index in kanban.options.boards) {
|
||||
if (kanban.options.boards[index].id === boardName) {
|
||||
break;
|
||||
}
|
||||
index++;
|
||||
}
|
||||
kanban.options.boards.splice(index, 1);
|
||||
kanban.removeBoard(boardName);
|
||||
kanban.onChange();
|
||||
});
|
||||
},
|
||||
buttonClick: function (el, boardId, e) {
|
||||
e.stopPropagation();
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
// create a form to enter element
|
||||
var $item = $('<div>', {'class': 'kanban-item'});
|
||||
var $input = getInput().val(name).appendTo($item);
|
||||
kanban.addForm(boardId, $item[0]);
|
||||
$input.focus();
|
||||
var save = function () {
|
||||
$item.remove();
|
||||
kanban.addElement(boardId, {
|
||||
"title": $input.val(),
|
||||
});
|
||||
kanban.inEditMode = false;
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
return;
|
||||
}
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$(el).text(name);
|
||||
kanban.inEditMode = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
addItemButton: true,
|
||||
boards: boards,
|
||||
dragcancelEl: function (el, boardId) {
|
||||
var pos = kanban.findElementPosition(el);
|
||||
UI.confirm(Messages.kanban_deleteItem, function (yes) {
|
||||
if (!yes) { return; }
|
||||
var board;
|
||||
kanban.options.boards.some(function (b) {
|
||||
if (b.id === boardId) {
|
||||
return (board = b);
|
||||
}
|
||||
});
|
||||
if (!board) { return; }
|
||||
board.item.splice(pos, 1);
|
||||
$(el).remove();
|
||||
kanban.onChange();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var addBoardDefault = document.getElementById('kanban-addboard');
|
||||
addBoardDefault.addEventListener('click', function () {
|
||||
var counter = 1;
|
||||
|
||||
// Get the new board id
|
||||
while (kanban.options.boards.indexOf("board" + counter) !== -1) {
|
||||
counter++;
|
||||
}
|
||||
|
||||
kanban.addBoards([{
|
||||
"id": "board" + counter,
|
||||
"title": Messages.kanban_newBoard,
|
||||
"color": "yellow",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [1]),
|
||||
}]
|
||||
}]);
|
||||
kanban.onChange();
|
||||
});
|
||||
|
||||
return kanban;
|
||||
};
|
||||
|
||||
// Start of the main loop
|
||||
var andThen2 = function (framework) {
|
||||
|
||||
var kanban = initKanban(framework);
|
||||
|
||||
framework.onContentUpdate(function (newContent) {
|
||||
// Need to update the content
|
||||
verbose("Content should be updated to " + newContent);
|
||||
var currentContent = kanban.getBoardsJSON();
|
||||
var remoteContent = newContent.content;
|
||||
|
||||
if (currentContent !== remoteContent) {
|
||||
// reinit kanban (TODO: optimize to diff only)
|
||||
verbose("Content is different.. Applying content");
|
||||
kanban.setBoards(remoteContent);
|
||||
}
|
||||
});
|
||||
|
||||
framework.setContentGetter(function () {
|
||||
// var content = $("#cp-app-kanban-content").val();
|
||||
var content = kanban.getBoardsJSON();
|
||||
verbose("Content current value is " + content);
|
||||
return {
|
||||
content: content
|
||||
};
|
||||
});
|
||||
|
||||
framework.onReady(function () {
|
||||
$("#cp-app-kanban-content").focus();
|
||||
});
|
||||
|
||||
framework.start();
|
||||
};
|
||||
|
||||
var main = function () {
|
||||
// var framework;
|
||||
nThen(function (waitFor) {
|
||||
|
||||
// Framework initialization
|
||||
Framework.create({
|
||||
toolbarContainer: '#cme_toolbox',
|
||||
contentContainer: '#cp-app-kanban-editor',
|
||||
}, waitFor(function (framework) {
|
||||
andThen2(framework);
|
||||
}));
|
||||
});
|
||||
};
|
||||
main();
|
||||
});
|
||||
@ -0,0 +1,100 @@
|
||||
.kanban-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
position: relative;
|
||||
float: left;
|
||||
background: #E2E4E6;
|
||||
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.kanban-board.disabled-board {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.kanban-board.is-moving.gu-mirror {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.kanban-board.is-moving.gu-mirror .kanban-drag {
|
||||
overflow: hidden;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.kanban-board header {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.kanban-board header .kanban-title-board {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.kanban-board header .kanban-title-button {
|
||||
float: right;
|
||||
line-height: 1;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
.kanban-board .kanban-drag {
|
||||
min-height: 200px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.kanban-item {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.kanban-item:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.kanban-item:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kanban-item.is-moving.gu-mirror {
|
||||
transform: rotate(3deg);
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Dragula CSS */
|
||||
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.gu-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gu-unselectable {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.gu-transit {
|
||||
opacity: 0.2 !important;
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
text-align: right;
|
||||
margin-button: 5px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue