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);