Improve kanban UI

customize.dist/src/less2/include/tools.less

@@ -19,6 +19,7 @@
 }
 
 .tools_unselectable () {
+    user-select: none;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;

www/kanban/app-kanban.less

@@ -1,5 +1,6 @@
 @import (once) "../../customize/src/less2/include/browser.less";
 @import (once) "../../customize/src/less2/include/framework.less";
+@import (once) "../../customize/src/less2/include/tools.less";
 
 .framework_main( @bg-color: @colortheme_kanban-bg,
 @warn-color: @colortheme_kanban-warn,
@@ -13,13 +14,9 @@
     min-height: auto;
 
     #cp-app-kanban-container {
-        display: inline-flex;
+        flex: 1;
+        display: flex;
         flex-flow: column;
-        height: 100%;
-        min-height: 100%;
-        width: 200%;
-        resize: horizontal;
-        overflow: hidden;
     }
     #cp-app-kanban-editor {
         flex: 1;
@@ -28,6 +25,95 @@
         height: 100%;
         overflow: hidden;
     }
+    #cp-app-kanban-content {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-flow: column;
+        .kanban-container-outer {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            .kanban-container {
+                flex: 1;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-evenly;
+            }
+        }
+
+        .kanban-board {
+            header {
+                display: flex;
+                align-items: center;
+                .kanban-title-board {
+                    flex: 1;
+                    margin-right: 10px;
+                    min-width: 0;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+                #kanban-edit {
+                    color: black;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+    #kanban-edit {
+        width: 100%;
+        background: transparent;
+        border: 1px solid rgba(0,0,0,0.3);
+    }
+
+    #kanban-addboard {
+        margin: 30px;
+        border: 1px solid;
+        width: 100px;
+        text-align: center;
+        background: @colortheme_kanban-bg;
+        font-weight: bold;
+        height: 100px;
+        align-self: flex-start;
+        font-size: 50px;
+        line-height: 100px;
+        cursor: pointer;
+        .tools_unselectable();
+    }
+
+    .kanban-removeboard {
+        float: right;
+        margin: 10px;
+        padding: 3px;
+        width: 30px;
+        text-align: center;
+        background: #eee;
+        font-weight: bold;
+        cursor: pointer;
+        .tools_unselectable();
+    }
+
+    .kanban-header-yellow {
+        background: #FC3;
+    }
+
+    .kanban-header-orange {
+        background: #F91;
+    }
+
+    .kanban-header-blue {
+        background: #0AC;
+    }
+
+    .kanban-header-red {
+        background: #E43;
+    }
+
+    .kanban-header-green {
+        background: #8C4;
+    }
 
     @media (max-width: @browser_media-medium-screen) {
         #cp-app-kanban-container {

www/kanban/inner.js

@@ -21,7 +21,6 @@ define([
     Modes,
     Messages)
 {
-    console.log(Messages);
 
     // Kanban code
     var initKanban = function (framework, boards) {
@@ -64,6 +63,14 @@ define([
         // Remove any existing elements
         $(".kanban-container-outer").remove();
 
+        var getInput = function () {
+            return $('<input>', {
+                'type': 'text',
+                'id': 'kanban-edit',
+                'size': '30'
+            });
+        };
+
         var kanban = new window.jKanban({
             element: '#cp-app-kanban-content',
             gutter: '15px',
@@ -80,30 +87,41 @@ define([
                 kanban.inEditMode = true;
                 var name = $(el).text();
                 $(el).html('');
-                $('<input></input>')
+                var $input = getInput().val(name).appendTo(el).focus();
-                    .attr({
+                $input[0].select();
-                        'type': 'text',
+                var save = function () {
-                        'name': 'text',
+                    // Store the value
-                        'id': 'kanban_edit',
+                    var name = $input.val();
-                        'size': '30',
+                    // Remove the input
-                        'value': name
-                    })
-                    .appendTo(el);
-                $('#kanban_edit').focus();
-                $('#kanban_edit').blur(function () {
-                    var name = $('#kanban_edit').val();
                     $(el).text(name);
+                    // Save the value for the correct board
                     var board = $(el.parentNode.parentNode).attr("data-id");
                     var pos = kanban.findElementPosition(el);
-                    console.log(pos);
-                    console.log(board);
                     kanban.getBoardJSON(board).item[pos].title = name;
                     kanban.onChange();
+                    // Unlock edit mode
                     kanban.inEditMode = false;
+                };
+                $input.blur(save);
+                $input.keydown(function (e) {
+                    if (e.which === 13) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        save();
+                        return;
+                    }
+                    if (e.which === 27) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        $(el).text(name);
+                        kanban.inEditMode = false;
+                        return;
+                    }
                 });
 
             },
-            boardTitleClick: function (el) {
+            boardTitleClick: function (el, e) {
+                e.stopPropagation();
                 if (kanban.inEditMode) {
                     console.log("An edit is already active");
                     return;
@@ -111,25 +129,36 @@ define([
                 kanban.inEditMode = true;
                 var name = $(el).text();
                 $(el).html('');
-                $('<input></input>')
+                var $input = getInput().val(name).appendTo(el).focus();
-                    .attr({
+                $input[0].select();
-                        'type': 'text',
+                var save = function () {
-                        'name': 'text',
+                    // Store the value
-                        'id': 'kanban_edit',
+                    var name = $input.val();
-                        'size': '30',
+                    // Remove the input
-                        'value': name
-                    })
-                    .appendTo(el);
-                $('#kanban_edit').focus();
-                $('#kanban_edit').blur(function () {
-                    var name = $('#kanban_edit').val();
                     $(el).text(name);
+                    // Save the value for the correct board
                     var board = $(el.parentNode.parentNode).attr("data-id");
                     kanban.getBoardJSON(board).title = name;
                     kanban.onChange();
+                    // Unlock edit mode
                     kanban.inEditMode = false;
+                };
+                $input.blur(save);
+                $input.keydown(function (e) {
+                    if (e.which === 13) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        save();
+                        return;
+                    }
+                    if (e.which === 27) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        $(el).text(name);
+                        kanban.inEditMode = false;
+                        return;
+                    }
                 });
-
             },
             colorClick: function (el) {
                 console.log("in color click");
@@ -150,7 +179,7 @@ define([
                 kanban.onChange();
 
             },
-            removeClick: function (el, boardId) {
+            removeClick: function (el) {
                 UI.confirm(Messages.kanban_deleteBoard, function (yes) {
                     if (!yes) { return; }
                     console.log("Delete board");
@@ -166,26 +195,41 @@ define([
                     kanban.onChange();
                 });
             },
-            buttonClick: function (el, boardId) {
+            buttonClick: function (el, boardId, e) {
-                console.log(el);
+                e.stopPropagation();
-                console.log(boardId);
+                if (kanban.inEditMode) {
+                    console.log("An edit is already active");
+                    return;
+                }
+                kanban.inEditMode = true;
                 // create a form to enter element 
-                var formItem = document.createElement('form');
+                var $item = $('<div>', {'class': 'kanban-item'});
-                formItem.setAttribute("class", "itemform");
+                var $input = getInput().val(name).appendTo($item);
-                formItem.innerHTML = '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>';
+                kanban.addForm(boardId, $item[0]);
-
+                $input.focus();
-                kanban.addForm(boardId, formItem);
+                var save = function () {
-                formItem.addEventListener("submit", function (e) {
+                    $item.remove();
-                    e.preventDefault();
-                    var text = e.target[0].value;
                     kanban.addElement(boardId, {
-                        "title": text,
+                        "title": $input.val(),
                     });
-                    formItem.parentNode.removeChild(formItem);
+                    kanban.inEditMode = false;
-                });
-                document.getElementById('CancelBtn').onclick = function () {
-                    formItem.parentNode.removeChild(formItem);
                 };
+                $input.blur(save);
+                $input.keydown(function (e) {
+                    if (e.which === 13) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        save();
+                        return;
+                    }
+                    if (e.which === 27) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        $(el).text(name);
+                        kanban.inEditMode = false;
+                        return;
+                    }
+                });
             },
             addItemButton: true,
             boards: boards,

www/kanban/jkanban.css

@@ -1,25 +1,7 @@
-.kanban-container-outer {
-    position: relative;
-    box-sizing: border-box;
-    width: 100%;
-    overflow: scroll;
-}
-
-.kanban-container {
-    width: 200%;
-    padding: 15px;
-}
-
 .kanban-container * {
     box-sizing: border-box;
 }
 
-.kanban-container:after {
-    clear: both;
-    display: block;
-    content: "";
-}
-
 .kanban-board {
     position: relative;
     float: left;
@@ -27,6 +9,8 @@
     transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
     margin: 10px;
     vertical-align: top;
+    display: flex;
+    flex-flow: column;
 }
 
 .kanban-board.disabled-board {
@@ -63,12 +47,7 @@
 .kanban-board .kanban-drag {
     min-height: 200px;
     padding: 20px;
-}
+    flex: 1;
-
-.kanban-board:after {
-    clear: both;
-    display: block;
-    content: "";
 }
 
 .kanban-item {
@@ -91,50 +70,6 @@
     height: auto !important;
 }
 
-.kanban-header-yellow {
-    background: #FC3;
-}
-
-.kanban-header-orange {
-    background: #F91;
-}
-
-.kanban-header-blue {
-    background: #0AC;
-}
-
-.kanban-header-red {
-    background: #E43;
-}
-
-.kanban-header-green {
-    background: #8C4;
-}
-
-#kanban-addboard {
-    float: left;
-    margin: 30px;
-    margin-right: 10px;
-    padding: 5px;
-    padding-top: 3;
-    padding-bottom: 3px;
-    border: 1px solid;
-    width: 30px;
-    text-align: center;
-    background: #d4d4e8;
-    font-weight: bold;
-}
-
-.kanban-removeboard {
-    float: right;
-    margin: 10px;
-    padding: 3px;
-    width: 30px;
-    text-align: center;
-    background: #eee;
-    font-weight: bold;
-}
-
 /* Dragula CSS  */
 
 .gu-mirror {
@@ -162,4 +97,4 @@
 .form-group {
     text-align: right;
     margin-button: 5px;
-}
+}

www/kanban/jkanban.js

@@ -463,7 +463,7 @@
                 function __onboardTitleClickHandler(nodeItem, clickfn) {
                     nodeItem.addEventListener('click', function (e) {
                         e.preventDefault;
-                        self.options.boardTitleClick(this);
+                        self.options.boardTitleClick(this, e);
                         if (typeof (this.clickfn) === 'function')
                             this.clickfn(this);
                     });
@@ -490,7 +490,7 @@
                 function __onButtonClickHandler(nodeItem, boardId) {
                     nodeItem.addEventListener('click', function (e) {
                         e.preventDefault;
-                        self.options.buttonClick(this, boardId);
+                        self.options.buttonClick(this, boardId, e);
                         // if(typeof(this.clickfn) === 'function')
                         //     this.clickfn(this);
                     });