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

Improve kanban UI

Browse Source
pull/1/head
yflory 7 years ago
parent 86be9abb62
commit 73183a69fd
5 changed files with 189 additions and 123 deletions
Show Stats Download Patch File Download Diff File

1
customize.dist/src/less2/include/tools.less
Unescape Escape View File

@ -19,6 +19,7 @@
} }
.tools_unselectable () { .tools_unselectable () {
user-select: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;

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

@ -1,5 +1,6 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (once) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/framework.less"; @import (once) "../../customize/src/less2/include/framework.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,
@ -13,13 +14,9 @@
min-height: auto; min-height: auto;
#cp-app-kanban-container { #cp-app-kanban-container {
display: inline-flex; flex: 1;
display: flex;
flex-flow: column; flex-flow: column;
height: 100%;
min-height: 100%;
width: 200%;
resize: horizontal;
overflow: hidden;
} }
#cp-app-kanban-editor { #cp-app-kanban-editor {
flex: 1; flex: 1;
@ -28,6 +25,95 @@
height: 100%; height: 100%;
overflow: hidden; 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);
}
#kanban-addboard {
margin: 30px;
border: 1px solid;
width: 100px;
text-align: center;
background: @colortheme_kanban-bg;
font-weight: bold;
height: 100px;
align-self: flex-start;
font-size: 50px;
line-height: 100px;
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) { @media (max-width: @browser_media-medium-screen) {
#cp-app-kanban-container { #cp-app-kanban-container {

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

@ -21,7 +21,6 @@ define([
Modes, Modes,
Messages) Messages)
{ {
console.log(Messages);
// Kanban code // Kanban code
var initKanban = function (framework, boards) { var initKanban = function (framework, boards) {
@ -64,6 +63,14 @@ define([
// Remove any existing elements // Remove any existing elements
$(".kanban-container-outer").remove(); $(".kanban-container-outer").remove();
var getInput = function () {
return $('<input>', {
'type': 'text',
'id': 'kanban-edit',
'size': '30'
});
};
var kanban = new window.jKanban({ var kanban = new window.jKanban({
element: '#cp-app-kanban-content', element: '#cp-app-kanban-content',
gutter: '15px', gutter: '15px',
@ -80,30 +87,41 @@ define([
kanban.inEditMode = true; kanban.inEditMode = true;
var name = $(el).text(); var name = $(el).text();
$(el).html(''); $(el).html('');
$('<input></input>') var $input = getInput().val(name).appendTo(el).focus();
.attr({ $input[0].select();
'type': 'text', var save = function () {
'name': 'text', // Store the value
'id': 'kanban_edit', var name = $input.val();
'size': '30', // Remove the input
'value': name
})
.appendTo(el);
$('#kanban_edit').focus();
$('#kanban_edit').blur(function () {
var name = $('#kanban_edit').val();
$(el).text(name); $(el).text(name);
// Save the value for the correct board
var board = $(el.parentNode.parentNode).attr("data-id"); var board = $(el.parentNode.parentNode).attr("data-id");
var pos = kanban.findElementPosition(el); var pos = kanban.findElementPosition(el);
console.log(pos);
console.log(board);
kanban.getBoardJSON(board).item[pos].title = name; kanban.getBoardJSON(board).item[pos].title = name;
kanban.onChange(); kanban.onChange();
// Unlock edit mode
kanban.inEditMode = false; 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) { boardTitleClick: function (el, e) {
e.stopPropagation();
if (kanban.inEditMode) { if (kanban.inEditMode) {
console.log("An edit is already active"); console.log("An edit is already active");
return; return;
@ -111,25 +129,36 @@ define([
kanban.inEditMode = true; kanban.inEditMode = true;
var name = $(el).text(); var name = $(el).text();
$(el).html(''); $(el).html('');
$('<input></input>') var $input = getInput().val(name).appendTo(el).focus();
.attr({ $input[0].select();
'type': 'text', var save = function () {
'name': 'text', // Store the value
'id': 'kanban_edit', var name = $input.val();
'size': '30', // Remove the input
'value': name
})
.appendTo(el);
$('#kanban_edit').focus();
$('#kanban_edit').blur(function () {
var name = $('#kanban_edit').val();
$(el).text(name); $(el).text(name);
// Save the value for the correct board
var board = $(el.parentNode.parentNode).attr("data-id"); var board = $(el.parentNode.parentNode).attr("data-id");
kanban.getBoardJSON(board).title = name; kanban.getBoardJSON(board).title = name;
kanban.onChange(); kanban.onChange();
// Unlock edit mode
kanban.inEditMode = false; 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) { colorClick: function (el) {
console.log("in color click"); console.log("in color click");
@ -150,7 +179,7 @@ define([
kanban.onChange(); kanban.onChange();
}, },
removeClick: function (el, boardId) { removeClick: function (el) {
UI.confirm(Messages.kanban_deleteBoard, function (yes) { UI.confirm(Messages.kanban_deleteBoard, function (yes) {
if (!yes) { return; } if (!yes) { return; }
console.log("Delete board"); console.log("Delete board");
@ -166,26 +195,41 @@ define([
kanban.onChange(); kanban.onChange();
}); });
}, },
buttonClick: function (el, boardId) { buttonClick: function (el, boardId, e) {
console.log(el); e.stopPropagation();
console.log(boardId); if (kanban.inEditMode) {
console.log("An edit is already active");
return;
}
kanban.inEditMode = true;
// create a form to enter element // create a form to enter element
var formItem = document.createElement('form'); var $item = $('<div>', {'class': 'kanban-item'});
formItem.setAttribute("class", "itemform"); var $input = getInput().val(name).appendTo($item);
formItem.innerHTML = '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>'; kanban.addForm(boardId, $item[0]);
$input.focus();
kanban.addForm(boardId, formItem); var save = function () {
formItem.addEventListener("submit", function (e) { $item.remove();
e.preventDefault();
var text = e.target[0].value;
kanban.addElement(boardId, { kanban.addElement(boardId, {
"title": text, "title": $input.val(),
}); });
formItem.parentNode.removeChild(formItem); kanban.inEditMode = false;
});
document.getElementById('CancelBtn').onclick = function () {
formItem.parentNode.removeChild(formItem);
}; };
$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, addItemButton: true,
boards: boards, boards: boards,

71
www/kanban/jkanban.css
Unescape Escape View File

@ -1,25 +1,7 @@
.kanban-container-outer {
position: relative;
box-sizing: border-box;
width: 100%;
overflow: scroll;
}
.kanban-container {
width: 200%;
padding: 15px;
}
.kanban-container * { .kanban-container * {
box-sizing: border-box; box-sizing: border-box;
} }
.kanban-container:after {
clear: both;
display: block;
content: "";
}
.kanban-board { .kanban-board {
position: relative; position: relative;
float: left; float: left;
@ -27,6 +9,8 @@
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
margin: 10px; margin: 10px;
vertical-align: top; vertical-align: top;
display: flex;
flex-flow: column;
} }
.kanban-board.disabled-board { .kanban-board.disabled-board {
@ -63,12 +47,7 @@
.kanban-board .kanban-drag { .kanban-board .kanban-drag {
min-height: 200px; min-height: 200px;
padding: 20px; padding: 20px;
} flex: 1;
.kanban-board:after {
clear: both;
display: block;
content: "";
} }
.kanban-item { .kanban-item {
@ -91,50 +70,6 @@
height: auto !important; height: auto !important;
} }
.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;
}
#kanban-addboard {
float: left;
margin: 30px;
margin-right: 10px;
padding: 5px;
padding-top: 3;
padding-bottom: 3px;
border: 1px solid;
width: 30px;
text-align: center;
background: #d4d4e8;
font-weight: bold;
}
.kanban-removeboard {
float: right;
margin: 10px;
padding: 3px;
width: 30px;
text-align: center;
background: #eee;
font-weight: bold;
}
/* Dragula CSS */ /* Dragula CSS */
.gu-mirror { .gu-mirror {

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

@ -463,7 +463,7 @@
function __onboardTitleClickHandler(nodeItem, clickfn) { function __onboardTitleClickHandler(nodeItem, clickfn) {
nodeItem.addEventListener('click', function (e) { nodeItem.addEventListener('click', function (e) {
e.preventDefault; e.preventDefault;
self.options.boardTitleClick(this); self.options.boardTitleClick(this, e);
if (typeof (this.clickfn) === 'function') if (typeof (this.clickfn) === 'function')
this.clickfn(this); this.clickfn(this);
}); });
@ -490,7 +490,7 @@
function __onButtonClickHandler(nodeItem, boardId) { function __onButtonClickHandler(nodeItem, boardId) {
nodeItem.addEventListener('click', function (e) { nodeItem.addEventListener('click', function (e) {
e.preventDefault; e.preventDefault;
self.options.buttonClick(this, boardId); self.options.buttonClick(this, boardId, e);
// if(typeof(this.clickfn) === 'function') // if(typeof(this.clickfn) === 'function')
// this.clickfn(this); // this.clickfn(this);
}); });

Write Preview
Loading…
Cancel
Save