Add confirm dialog when deleting a task in kanban + add colors

customize.dist/translations/messages.fr.js

@@ -256,6 +256,7 @@ define(function () {
     out.kanban_deleteBoard = "Êtes-vous sûr de vouloir supprimer ce tableau ?";
     out.kanban_addBoard = "Ajouter un tableau";
     out.kanban_removeItem = "Supprimer cet élément";
+    out.kanban_removeItemConfirm = "Êtes-vous sûr de vouloir supprimer cet élément ?";
 
     // Polls
 

customize.dist/translations/messages.js

@@ -258,6 +258,7 @@ define(function () {
     out.kanban_deleteBoard = "Are you sure you want to delete this board?";
     out.kanban_addBoard = "Add a board";
     out.kanban_removeItem = "Remove this item";
+    out.kanban_removeItemConfirm = "Are you sure you want to delete this item?";
 
     // Polls
 

www/kanban/app-kanban.less

@@ -93,7 +93,14 @@
 
         .kanban-remove-item {
             padding: 0 0.5em;
+            visibility: hidden;
         }
+        .kanban-item:hover {
+            .kanban-remove-item {
+                visibility: visible;
+            }
+        }
+
         .kanban-additem {
             float: right;
             background: #EEE;
@@ -108,9 +115,6 @@
             }
         }
 
-        .kanban-additem {
-        }
-
         .kanban-header-yellow {
             background: #FC3;
         }
@@ -131,6 +135,22 @@
             background: #8C4;
         }
 
+        .kanban-header-purple {
+            background: #c851ff;
+        }
+
+        .kanban-header-cyan {
+            background: #00ffff;
+        }
+
+        .kanban-header-lightgreen {
+            background: #c3ff5b;
+        }
+
+        .kanban-header-lightblue {
+            background: #adeeff;
+        }
+
         @media (max-width: @browser_media-medium-screen) {
             #cp-app-kanban-container {
                 flex: 1;

www/kanban/inner.js

@@ -27,6 +27,8 @@ define([
     var verbose = function (x) { console.log(x); };
     verbose = function () {}; // comment out to enable verbose logging
 
+    var COLORS = ['yellow', 'green', 'orange', 'blue', 'red', 'purple', 'cyan', 'lightgreen', 'lightblue'];
+
     var addRemoveItemButton = function (framework, kanban) {
         if (framework.isReadOnly() || framework.isLocked()) { return; }
         var $container = $(kanban.element);
@@ -41,9 +43,12 @@ define([
                 title: Messages.kanban_removeItem
             }).click(function (e) {
                 e.stopPropagation();
-                board.item.splice(pos, 1);
+                UI.confirm(Messages.kanban_removeItemConfirm, function (yes) {
-                $(el).remove();
+                    if (!yes) { return; }
-                kanban.onChange();
+                    board.item.splice(pos, 1);
+                    $(el).remove();
+                    kanban.onChange();
+                });
             }).text('❌').appendTo($(el));
         });
     };
@@ -102,6 +107,7 @@ define([
             gutter: '15px',
             widthBoard: '300px',
             buttonContent: '❌',
+            colors: COLORS,
             readOnly: framework.isReadOnly(),
             onChange: function () {
                 verbose("Board object has changed");
@@ -264,6 +270,7 @@ define([
                     if (e.which === 27) {
                         e.preventDefault();
                         e.stopPropagation();
+                        $item.remove();
                         kanban.inEditMode = false;
                         return;
                     }
@@ -286,7 +293,7 @@ define([
             kanban.addBoards([{
                 "id": "board" + counter,
                 "title": Messages.kanban_newBoard,
-                "color": "yellow",
+                "color": COLORS[Math.floor(Math.random()*COLORS.length)], // random color
                 "item": [{
                     "title": Messages._getKey('kanban_item', [1]),
                 }]