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

Improve kanban UI

pull/1/head
yflory 2018-05-16 19:28:30 +02:00
parent 86be9abb62
commit 73183a69fd
5 changed files with 189 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,5 +1,6 @@
@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,
@ -13,13 +14,9 @@
min-height: auto;
#cp-app-kanban-container {
display: inline-flex;
flex: 1;
display: flex;
flex-flow: column;
height: 100%;
min-height: 100%;
width: 200%;
resize: horizontal;
overflow: hidden;
}
#cp-app-kanban-editor {
flex: 1;
@ -28,6 +25,95 @@
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);
}
#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) {
#cp-app-kanban-container {

136
www/kanban/inner.js
View File

@ -21,7 +21,6 @@ define([
Modes,
Messages)
{
console.log(Messages);
// Kanban code
var initKanban = function (framework, boards) {
@ -64,6 +63,14 @@ define([
// 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',
@ -80,30 +87,41 @@ define([
kanban.inEditMode = true;
var name = $(el).text();
$(el).html('');
$('<input></input>')
.attr({
'type': 'text',
'name': 'text',
'id': 'kanban_edit',
'size': '30',
'value': name
})
.appendTo(el);
$('#kanban_edit').focus();
$('#kanban_edit').blur(function () {
var name = $('#kanban_edit').val();
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);
console.log(pos);
console.log(board);
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) {
boardTitleClick: function (el, e) {
e.stopPropagation();
if (kanban.inEditMode) {
console.log("An edit is already active");
return;
@ -111,25 +129,36 @@ define([
kanban.inEditMode = true;
var name = $(el).text();
$(el).html('');
$('<input></input>')
.attr({
'type': 'text',
'name': 'text',
'id': 'kanban_edit',
'size': '30',
'value': name
})
.appendTo(el);
$('#kanban_edit').focus();
$('#kanban_edit').blur(function () {
var name = $('#kanban_edit').val();
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) {
console.log("in color click");
@ -150,7 +179,7 @@ define([
kanban.onChange();
},
removeClick: function (el, boardId) {
removeClick: function (el) {
UI.confirm(Messages.kanban_deleteBoard, function (yes) {
if (!yes) { return; }
console.log("Delete board");
@ -166,26 +195,41 @@ define([
kanban.onChange();
});
},
buttonClick: function (el, boardId) {
console.log(el);
console.log(boardId);
buttonClick: function (el, boardId, e) {
e.stopPropagation();
if (kanban.inEditMode) {
console.log("An edit is already active");
return;
}
kanban.inEditMode = true;
// create a form to enter element
var formItem = document.createElement('form');
formItem.setAttribute("class", "itemform");
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, formItem);
formItem.addEventListener("submit", function (e) {
e.preventDefault();
var text = e.target[0].value;
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": text,
"title": $input.val(),
});
formItem.parentNode.removeChild(formItem);
});
document.getElementById('CancelBtn').onclick = function () {
formItem.parentNode.removeChild(formItem);
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,

73
www/kanban/jkanban.css
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 * {
box-sizing: border-box;
}
.kanban-container:after {
clear: both;
display: block;
content: "";
}
.kanban-board {
position: relative;
float: left;
@ -27,6 +9,8 @@
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 {
@ -63,12 +47,7 @@
.kanban-board .kanban-drag {
min-height: 200px;
padding: 20px;
}
.kanban-board:after {
clear: both;
display: block;
content: "";
flex: 1;
}
.kanban-item {
@ -91,50 +70,6 @@
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 */
.gu-mirror {
@ -162,4 +97,4 @@
.form-group {
text-align: right;
margin-button: 5px;
}
}

4
www/kanban/jkanban.js
View File

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