web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add support for readonly and locked modes in kanban

Browse Source
This commit is contained in:
yflory 2018-05-23 11:48:30 +02:00
parent f0512bbb1d
commit 07502775f5
3 changed files with 117 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,8 @@
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: -webkit-min-content;
min-height: min-content;
.kanban-container { .kanban-container {
flex: 1; flex: 1;
display: flex; display: flex;
@ -42,6 +44,12 @@
} }
} }
.kanban-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.kanban-board { .kanban-board {
header { header {
display: flex; display: flex;
@ -60,78 +68,86 @@
} }
} }
} }
}
#kanban-edit { #kanban-edit {
width: 100%; 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-additem, .kanban-remove-item {
float: right;
background: #EEE;
padding: .25rem .5rem;
line-height: 1;
&:hover {
background: transparent; background: transparent;
border: 1px solid rgba(0,0,0,0.3);
} }
/* margin: 10px;
padding: 3px;
width: 30px;
text-align: center;
background: #eee;
font-weight: bold;
cursor: pointer;
.tools_unselectable(); */
}
.kanban-additem { @button-size: 50px;
margin-bottom: 5px; #kanban-addboard {
margin-right: 5px; 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-header-yellow { .kanban-remove-item {
background: #FC3; padding: 0 0.5em;
} }
.kanban-additem {
float: right;
background: #EEE;
padding: 5px .5rem 4px;
line-height: 1;
margin-bottom: 5px;
margin-right: 5px;
font-weight: bold;
font-size: 1.2em;
&:hover {
background: transparent;
}
}
.kanban-header-orange { .kanban-additem {
background: #F91; }
}
.kanban-header-blue { .kanban-header-yellow {
background: #0AC; background: #FC3;
} }
.kanban-header-red { .kanban-header-orange {
background: #E43; background: #F91;
} }
.kanban-header-green { .kanban-header-blue {
background: #8C4; background: #0AC;
} }
@media (max-width: @browser_media-medium-screen) { .kanban-header-red {
#cp-app-kanban-container { background: #E43;
flex: 1; }
max-width: 100%;
resize: none; .kanban-header-green {
background: #8C4;
}
@media (max-width: @browser_media-medium-screen) {
#cp-app-kanban-container {
flex: 1;
max-width: 100%;
resize: none;
}
}
&.cp-app-readonly {
.kanban-item, .kanban-title-board {
cursor: default !important;
.tools_unselectable();
}
.kanban-title-button, #kanban-addboard, .kanban-remove-item, .kanban-additem {
display: none !important;
}
} }
} }
} }

31
www/kanban/inner.js
View File

@ -28,6 +28,7 @@ define([
verbose = function () {}; // comment out to enable verbose logging verbose = function () {}; // comment out to enable verbose logging
var addRemoveItemButton = function (framework, kanban) { var addRemoveItemButton = function (framework, kanban) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
var $container = $(kanban.element); var $container = $(kanban.element);
$container.find('.kanban-remove-item').remove(); $container.find('.kanban-remove-item').remove();
$container.find('.kanban-board .kanban-item').each(function (i, el) { $container.find('.kanban-board .kanban-item').each(function (i, el) {
@ -40,7 +41,7 @@ define([
board.item.splice(pos, 1); board.item.splice(pos, 1);
$(el).remove(); $(el).remove();
kanban.onChange(); kanban.onChange();
}).text('🗙').appendTo($(el)); }).text('❌').appendTo($(el));
}); });
}; };
@ -97,7 +98,8 @@ define([
element: '#cp-app-kanban-content', element: '#cp-app-kanban-content',
gutter: '15px', gutter: '15px',
widthBoard: '300px', widthBoard: '300px',
buttonContent: '🗙', buttonContent: '❌',
readOnly: framework.isReadOnly(),
onChange: function () { onChange: function () {
verbose("Board object has changed"); verbose("Board object has changed");
framework.localChange(); framework.localChange();
@ -106,11 +108,13 @@ define([
} }
}, },
click: function (el) { click: function (el) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
if (kanban.inEditMode) { if (kanban.inEditMode) {
verbose("An edit is already active"); verbose("An edit is already active");
return; return;
} }
kanban.inEditMode = true; kanban.inEditMode = true;
$(el).find('button').remove();
var name = $(el).text(); var name = $(el).text();
$(el).html(''); $(el).html('');
var $input = getInput().val(name).appendTo(el).focus(); var $input = getInput().val(name).appendTo(el).focus();
@ -141,6 +145,7 @@ define([
e.stopPropagation(); e.stopPropagation();
$(el).text(name); $(el).text(name);
kanban.inEditMode = false; kanban.inEditMode = false;
addRemoveItemButton(framework, kanban);
return; return;
} }
}); });
@ -148,6 +153,7 @@ define([
}, },
boardTitleClick: function (el, e) { boardTitleClick: function (el, e) {
e.stopPropagation(); e.stopPropagation();
if (framework.isReadOnly() || framework.isLocked()) { return; }
if (kanban.inEditMode) { if (kanban.inEditMode) {
verbose("An edit is already active"); verbose("An edit is already active");
return; return;
@ -187,6 +193,7 @@ define([
}); });
}, },
colorClick: function (el) { colorClick: function (el) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
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);
@ -203,10 +210,10 @@ define([
$(el).removeClass("kanban-header-" + currentColor); $(el).removeClass("kanban-header-" + currentColor);
$(el).addClass("kanban-header-" + nextColor); $(el).addClass("kanban-header-" + nextColor);
kanban.onChange(); kanban.onChange();
}, },
buttonClick: function (el, boardId, e) { buttonClick: function (el, boardId, e) {
e.stopPropagation(); e.stopPropagation();
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; }
verbose("Delete board"); verbose("Delete board");
@ -223,6 +230,7 @@ define([
}); });
}, },
addItemClick: function (el) { addItemClick: function (el) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
if (kanban.inEditMode) { if (kanban.inEditMode) {
verbose("An edit is already active"); verbose("An edit is already active");
return; return;
@ -253,7 +261,6 @@ define([
if (e.which === 27) { if (e.which === 27) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
$(el).text(name);
kanban.inEditMode = false; kanban.inEditMode = false;
return; return;
} }
@ -281,6 +288,7 @@ define([
var addBoardDefault = document.getElementById('kanban-addboard'); var addBoardDefault = document.getElementById('kanban-addboard');
addBoardDefault.addEventListener('click', function () { addBoardDefault.addEventListener('click', function () {
if (framework.isReadOnly()) { return; }
var counter = 1; var counter = 1;
// Get the new board id // Get the new board id
@ -305,6 +313,21 @@ define([
var andThen2 = function (framework) { var andThen2 = function (framework) {
var kanban; var kanban;
var $container = $('#cp-app-kanban-content');
if (framework.isReadOnly()) {
$container.addClass('cp-app-readonly');
}
framework.onEditableChange(function (unlocked) {
if (framework.isReadOnly()) { return; }
if (unlocked) {
addRemoveItemButton(framework, kanban);
kanban.options.readOnly = false;
return void $container.removeClass('cp-app-readonly');
}
kanban.options.readOnly = true;
$container.addClass('cp-app-readonly');
});
framework.onContentUpdate(function (newContent) { framework.onContentUpdate(function (newContent) {
// Init if needed // Init if needed

13
www/kanban/jkanban.js
View File

@ -56,6 +56,7 @@
dragBoards: true, dragBoards: true,
addItemButton: false, addItemButton: false,
buttonContent: '+', buttonContent: '+',
readOnly: false,
dragEl: function (el, source) {}, dragEl: function (el, source) {},
dragendEl: function (el) {}, dragendEl: function (el) {},
dropEl: function (el, target, source, sibling) {}, dropEl: function (el, target, source, sibling) {},
@ -84,10 +85,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.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; }
return target.classList.contains('kanban-container'); return target.classList.contains('kanban-container');
}, },
revertOnSpill: true, revertOnSpill: true,
@ -129,7 +132,15 @@
}); });
//Init Drag Item //Init Drag Item
self.drake = self.dragula(self.boardContainer, function () { self.drake = self.dragula(self.boardContainer, {
moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; }
return handle.classList.contains('kanban-item');
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
return true;
},
revertOnSpill: true revertOnSpill: true
}) })
.on('drag', function (el, source) { .on('drag', function (el, source) {