Fix UI issues in kanban

customize.dist/translations/messages.js

@@ -254,7 +254,7 @@ define(function () {
     out.kanban_item = "Item {0}"; // Item number for initial content
     out.kanban_todo = "To Do";
     out.kanban_done = "Done";
-    out.kanban_working = "Working";
+    out.kanban_working = "In progress";
     out.kanban_deleteBoard = "Are you sure you want to delete this board?";
     out.kanban_addBoard = "Add a board";
     out.kanban_removeItem = "Remove this item";

www/kanban/app-kanban.less

@@ -48,12 +48,14 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
+            padding: 10px 5px 10px 10px;
         }
 
         .kanban-board {
             header {
                 display: flex;
                 align-items: center;
+                padding: 13px 10px;
                 .kanban-title-board {
                     flex: 1;
                     margin-right: 10px;
@@ -84,9 +86,8 @@
             line-height: @button-size;
             text-align: center;
             background: @colortheme_kanban-bg;
-            font-weight: bold;
             align-self: flex-start;
-            font-size: 50px;
+            font-size: 30px;
             cursor: pointer;
             .tools_unselectable();
         }
@@ -108,8 +109,6 @@
             line-height: 1;
             margin-bottom: 5px;
             margin-right: 5px;
-            font-weight: bold;
-            font-size: 1.2em;
             &:hover {
                 background: transparent;
             }

www/kanban/inner.js

@@ -40,7 +40,7 @@ define([
                 return b.id === $(el.parentNode.parentNode).attr('data-id');
             });
             $('<button>', {
-                'class': 'kanban-remove-item btn btn-default',
+                'class': 'kanban-remove-item btn btn-default fa fa-times',
                 title: Messages.kanban_removeItem
             }).click(function (e) {
                 e.stopPropagation();
@@ -50,7 +50,7 @@ define([
                     $(el).remove();
                     kanban.onChange();
                 });
-            }).text('❌').appendTo($(el));
+            }).appendTo($(el));
         });
     };
 
@@ -100,7 +100,7 @@ define([
                 'type': 'text',
                 'id': 'kanban-edit',
                 'size': '30'
-            });
+            }).click(function (e) { e.stopPropagation(); });
         };
 
         var kanban = new window.jKanban({
@@ -120,8 +120,9 @@ define([
             click: function (el) {
                 if (framework.isReadOnly() || framework.isLocked()) { return; }
                 if (kanban.inEditMode) {
+                    $(el).focus();
                     verbose("An edit is already active");
-                    return;
+                    //return;
                 }
                 kanban.inEditMode = true;
                 $(el).find('button').remove();
@@ -165,8 +166,9 @@ define([
                 e.stopPropagation();
                 if (framework.isReadOnly() || framework.isLocked()) { return; }
                 if (kanban.inEditMode) {
+                    $(el).focus();
                     verbose("An edit is already active");
-                    return;
+                    //return;
                 }
                 kanban.inEditMode = true;
                 var name = $(el).text();
@@ -242,8 +244,9 @@ define([
             addItemClick: function (el) {
                 if (framework.isReadOnly() || framework.isLocked()) { return; }
                 if (kanban.inEditMode) {
+                    $(el).focus();
                     verbose("An edit is already active");
-                    return;
+                    //return;
                 }
                 kanban.inEditMode = true;
                 // create a form to enter element 

www/kanban/jkanban.js

@@ -316,9 +316,7 @@
                         // if add button is true, add button to the board
                         if (addButton) {
                             var btn = document.createElement("BUTTON");
-                            var t = document.createTextNode(buttonContent);
+                            btn.setAttribute("class", "kanban-title-button btn btn-default btn-xs fa fa-times");
-                            btn.setAttribute("class", "kanban-title-button btn btn-default btn-xs");
-                            btn.appendChild(t);
                             //var buttonHtml = '<button class="kanban-title-button btn btn-default btn-xs">'+buttonContent+'</button>'
                             headerBoard.appendChild(btn);
                             __onButtonClickHandler(btn, board.id);
@@ -348,8 +346,7 @@
                         var footerBoard = document.createElement('footer');
                         //add button
                         var addBoardItem = document.createElement('button');
-                        $(addBoardItem).text("＋")
+                        $(addBoardItem).addClass("kanban-additem btn btn-default fa fa-plus");
-                        $(addBoardItem).addClass("kanban-additem btn btn-default");
                         footerBoard.appendChild(addBoardItem);
                         __onAddItemClickHandler(addBoardItem);
 
@@ -459,7 +456,7 @@
                     boardContainerOuter.appendChild(boardContainer);
                     var addBoard = document.createElement('div');
                     addBoard.id = 'kanban-addboard';
-                    $(addBoard).text("+");
+                    addBoard.setAttribute('class', 'fa fa-plus');
                     boardContainerOuter.appendChild(addBoard);
 
                     self.container = boardContainer;
@@ -502,6 +499,7 @@
                 function __onAddItemClickHandler(nodeItem, clickfn) {
                     nodeItem.addEventListener('click', function (e) {
                         e.preventDefault;
+                        e.stopPropagation();
                         self.options.addItemClick(this);
                         if (typeof (this.clickfn) === 'function')
                             this.clickfn(this);