diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 0a600d107..e83ef3a29 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -269,22 +269,27 @@
footer {
margin: 10px;
margin-top: 0px;
+ display: flex;
span {
.tools_unselectable();
outline: none;
- width: 100%;
+ width: 50%;
border: 1px solid fade(@cryptpad_text_col, 70%);
color: fade(@cryptpad_text_col, 70%);
border-radius: 0px;
- font-size: 40px;
+ font-size: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1;
cursor: pointer;
+ height: 40px;
&:hover {
background-color: rgba(0,0,0,0.1);
}
+ .fa {
+ margin-right: 5px;
+ }
}
}
}
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index f04e78918..84b7ea762 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -750,20 +750,26 @@ define([
},
addItemClick: function (el) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
+ var $el = $(el);
if (kanban.inEditMode) {
- $(el).focus();
+ $el.focus();
verbose("An edit is already active");
//return;
}
kanban.inEditMode = "new";
// create a form to enter element
- var boardId = $(el).closest('.kanban-board').attr("data-id");
+ var isTop = $el.attr('data-top');
+ var boardId = $el.closest('.kanban-board').attr("data-id");
var $item = $('
', {'class': 'kanban-item new-item'});
var $input = getInput().val(name).appendTo($item);
- kanban.addForm(boardId, $item[0]);
+ kanban.addForm(boardId, $item[0], isTop);
$input.focus();
setTimeout(function () {
- $input[0].scrollIntoView();
+ if (isTop) {
+ $el.closest('.kanban-drag').scrollTop(0);
+ } else {
+ $input[0].scrollIntoView();
+ }
});
var save = function () {
$item.remove();
@@ -781,7 +787,7 @@ define([
if (kanban.options.tags && kanban.options.tags.length) {
item.tags = kanban.options.tags;
}
- kanban.addElement(boardId, item);
+ kanban.addElement(boardId, item, isTop);
};
$input.blur(save);
$input.keydown(function (e) {
@@ -790,7 +796,12 @@ define([
e.stopPropagation();
save();
if (!$input.val()) { return; }
- $(el).closest('.kanban-board').find('footer .kanban-title-button').click();
+ var $footer = $el.closest('.kanban-board').find('footer');
+ if (isTop) {
+ $footer.find('.kanban-title-button[data-top]').click();
+ } else {
+ $footer.find('.kanban-title-button').click();
+ }
return;
}
if (e.which === 27) {
diff --git a/www/kanban/jkanban_cp.js b/www/kanban/jkanban_cp.js
index 061b5f06b..7967fa5e4 100644
--- a/www/kanban/jkanban_cp.js
+++ b/www/kanban/jkanban_cp.js
@@ -1,7 +1,8 @@
define([
'jquery',
+ '/customize/messages.js',
'/bower_components/dragula.js/dist/dragula.min.js',
-], function ($, Dragula) {
+], function ($, Messages, Dragula) {
/**
* jKanban
* Vanilla Javascript plugin for manage kanban boards
@@ -559,25 +560,37 @@ define([
return nodeItem;
};
- this.addElement = function (boardID, element) {
+ this.addElement = function (boardID, element, before) {
// add Element to JSON
var boardJSON = __findBoardJSON(boardID);
- boardJSON.item.push(element.id);
+ if (before) {
+ boardJSON.item.unshift(element.id);
+ } else {
+ boardJSON.item.push(element.id);
+ }
self.options.boards.items = self.options.boards.items || {};
self.options.boards.items[element.id] = element;
var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
- board.appendChild(getElementNode(element));
+ if (before) {
+ board.insertBefore(getElementNode(element), board.firstChild);
+ } else {
+ board.appendChild(getElementNode(element));
+ }
// send event that board has changed
self.onChange();
return self;
};
- this.addForm = function (boardID, formItem) {
+ this.addForm = function (boardID, formItem, isTop) {
var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
- board.appendChild(formItem);
+ if (isTop) {
+ board.insertBefore(formItem, board.firstChild);
+ } else {
+ board.appendChild(formItem);
+ }
return self;
};
@@ -662,9 +675,17 @@ define([
var footerBoard = document.createElement('footer');
footerBoard.classList.add('kanban-board-footer');
//add button
+ Messages.kanban_addTopButton = ' (top)'; // XXX
+ Messages.kanban_addBottomButton = ' (bottom)'; // XXX
+ var addTopBoardItem = document.createElement('span');
+ addTopBoardItem.classList.add('kanban-title-button');
+ addTopBoardItem.setAttribute('data-top', "1");
+ addTopBoardItem.innerHTML = Messages.kanban_addTopButton;
+ footerBoard.appendChild(addTopBoardItem);
+ __onAddItemClickHandler(addTopBoardItem);
var addBoardItem = document.createElement('span');
addBoardItem.classList.add('kanban-title-button');
- addBoardItem.innerText = '+';
+ addBoardItem.innerHTML = Messages.kanban_addBottomButton;
footerBoard.appendChild(addBoardItem);
__onAddItemClickHandler(addBoardItem);