Add kanban items to the top

pull/1/head
yflory 5 years ago
parent 6026dad8b0
commit e0f796fba0

@ -269,22 +269,27 @@
footer { footer {
margin: 10px; margin: 10px;
margin-top: 0px; margin-top: 0px;
display: flex;
span { span {
.tools_unselectable(); .tools_unselectable();
outline: none; outline: none;
width: 100%; width: 50%;
border: 1px solid fade(@cryptpad_text_col, 70%); border: 1px solid fade(@cryptpad_text_col, 70%);
color: fade(@cryptpad_text_col, 70%); color: fade(@cryptpad_text_col, 70%);
border-radius: 0px; border-radius: 0px;
font-size: 40px; font-size: 20px;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
height: 40px;
&:hover { &:hover {
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
} }
.fa {
margin-right: 5px;
}
} }
} }
} }

@ -750,20 +750,26 @@ define([
}, },
addItemClick: function (el) { addItemClick: function (el) {
if (framework.isReadOnly() || framework.isLocked()) { return; } if (framework.isReadOnly() || framework.isLocked()) { return; }
var $el = $(el);
if (kanban.inEditMode) { if (kanban.inEditMode) {
$(el).focus(); $el.focus();
verbose("An edit is already active"); verbose("An edit is already active");
//return; //return;
} }
kanban.inEditMode = "new"; kanban.inEditMode = "new";
// create a form to enter element // 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 = $('<div>', {'class': 'kanban-item new-item'}); var $item = $('<div>', {'class': 'kanban-item new-item'});
var $input = getInput().val(name).appendTo($item); var $input = getInput().val(name).appendTo($item);
kanban.addForm(boardId, $item[0]); kanban.addForm(boardId, $item[0], isTop);
$input.focus(); $input.focus();
setTimeout(function () { setTimeout(function () {
$input[0].scrollIntoView(); if (isTop) {
$el.closest('.kanban-drag').scrollTop(0);
} else {
$input[0].scrollIntoView();
}
}); });
var save = function () { var save = function () {
$item.remove(); $item.remove();
@ -781,7 +787,7 @@ define([
if (kanban.options.tags && kanban.options.tags.length) { if (kanban.options.tags && kanban.options.tags.length) {
item.tags = kanban.options.tags; item.tags = kanban.options.tags;
} }
kanban.addElement(boardId, item); kanban.addElement(boardId, item, isTop);
}; };
$input.blur(save); $input.blur(save);
$input.keydown(function (e) { $input.keydown(function (e) {
@ -790,7 +796,12 @@ define([
e.stopPropagation(); e.stopPropagation();
save(); save();
if (!$input.val()) { return; } 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; return;
} }
if (e.which === 27) { if (e.which === 27) {

@ -1,7 +1,8 @@
define([ define([
'jquery', 'jquery',
'/customize/messages.js',
'/bower_components/dragula.js/dist/dragula.min.js', '/bower_components/dragula.js/dist/dragula.min.js',
], function ($, Dragula) { ], function ($, Messages, Dragula) {
/** /**
* jKanban * jKanban
* Vanilla Javascript plugin for manage kanban boards * Vanilla Javascript plugin for manage kanban boards
@ -559,25 +560,37 @@ define([
return nodeItem; return nodeItem;
}; };
this.addElement = function (boardID, element) { this.addElement = function (boardID, element, before) {
// add Element to JSON // add Element to JSON
var boardJSON = __findBoardJSON(boardID); 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 = self.options.boards.items || {};
self.options.boards.items[element.id] = element; self.options.boards.items[element.id] = element;
var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag'); 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 // send event that board has changed
self.onChange(); self.onChange();
return self; return self;
}; };
this.addForm = function (boardID, formItem) { this.addForm = function (boardID, formItem, isTop) {
var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag'); 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; return self;
}; };
@ -662,9 +675,17 @@ define([
var footerBoard = document.createElement('footer'); var footerBoard = document.createElement('footer');
footerBoard.classList.add('kanban-board-footer'); footerBoard.classList.add('kanban-board-footer');
//add button //add button
Messages.kanban_addTopButton = '<i class="fa fa-plus"></i> (top)'; // XXX
Messages.kanban_addBottomButton = '<i class="fa fa-plus"></i> (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'); var addBoardItem = document.createElement('span');
addBoardItem.classList.add('kanban-title-button'); addBoardItem.classList.add('kanban-title-button');
addBoardItem.innerText = '+'; addBoardItem.innerHTML = Messages.kanban_addBottomButton;
footerBoard.appendChild(addBoardItem); footerBoard.appendChild(addBoardItem);
__onAddItemClickHandler(addBoardItem); __onAddItemClickHandler(addBoardItem);

Loading…
Cancel
Save