Add kanban items to the top

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;
+                }
             }
         }
     }

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 = $('<div>', {'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) {

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 = '<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');
             addBoardItem.classList.add('kanban-title-button');
-            addBoardItem.innerText = '+';
+            addBoardItem.innerHTML = Messages.kanban_addBottomButton;
             footerBoard.appendChild(addBoardItem);
             __onAddItemClickHandler(addBoardItem);