From c220a7ecf43b259a995eb4d957e63eeb2ce33f80 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 4 Mar 2020 12:56:47 +0100
Subject: [PATCH] Add colors to kanban

---
 www/kanban/app-kanban.less |  7 +++++++
 www/kanban/inner.js        |  5 -----
 www/kanban/jkanban.js      | 36 ++++++++++++++++++++++++++++++++++--
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 5596ee978..3b6a101ad 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -15,6 +15,7 @@
     max-height: 100%;
     min-height: auto;
 
+    @palette0: #888; // Default bg color for header
     @palette1: #FFD4D4;
     @palette2: #FFDECA;
     @palette3: #FFE69C;
@@ -24,7 +25,13 @@
     @palette7: #C8D6FF;
     @palette8: #E4CAFF;
 
+    .kanban-board-header {
+        background-color: '#888';
+    }
 
+    .cp-kanban-palette-nocolor {
+        background-color: @palette0;
+    }
     .cp-kanban-palette-color1 {
         background-color: @palette1;
     }
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 76abb3839..abee5400e 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -57,8 +57,6 @@ define([
     Messages.kanban_delete = "Delete"; // XXX
 
 // XXX
-// Fix remote board deletion not applied to local UI
-// Add colors...
 // Add "large" view
 
     var setValueAndCursor = function (input, val, _cursor) {
@@ -386,19 +384,16 @@ define([
                 "11": {
                     "id": 11,
                     "title": Messages.kanban_todo,
-                    "color": "blue",
                     "item": [1, 2]
                 },
                 "12": {
                     "id": 12,
                     "title": Messages.kanban_working,
-                    "color": "orange",
                     "item": [3, 4]
                 },
                 "13": {
                     "id": 13,
                     "title": Messages.kanban_done,
-                    "color": "green",
                     "item": [5, 6]
                 }
             },
diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js
index ca866dcfd..83efda3a4 100644
--- a/www/kanban/jkanban.js
+++ b/www/kanban/jkanban.js
@@ -304,10 +304,33 @@
                     }
                 };
 
+                var getTextColor = function (hex) {
+                    if (!/^[0-9a-f]{6}$/.test(hex)) {
+                        return '#000000';
+                    }
+                    var r = parseInt(hex.slice(0,2), 16);
+                    var g = parseInt(hex.slice(2,4), 16);
+                    var b = parseInt(hex.slice(4,6), 16);
+                    if ((r*0.299 + g*0.587 + b*0.114) > 186) {
+                        return '#000000';
+                    }
+                    return '#FFFFFF';
+                };
+
                 var getElementNode = function (element) {
                     var nodeItem = document.createElement('div');
                     nodeItem.classList.add('kanban-item');
                     nodeItem.dataset.eid = element.id;
+                    if (element.color) {
+                        if (/color/.test(element.color)) {
+                            // Palette color
+                            nodeItem.classList.add('cp-kanban-palette-'+element.color);
+                        } else {
+                            // Hex color code
+                            var textColor = getTextColor(element.color);
+                            nodeItem.setAttribute('style', 'background-color:#'+element.color+';color:'+textColor+';');
+                        }
+                    }
                     var nodeItemText = document.createElement('div');
                     nodeItemText.classList.add('kanban-item-text');
                     nodeItemText.dataset.eid = element.id;
@@ -372,8 +395,17 @@
                         headerBoard.classList.add(value);
                     });
                     if (board.color !== '' && board.color !== undefined) {
-                        // XXX color
-                        headerBoard.classList.add("kanban-header-" + board.color);
+                        if (/color/.test(board.color)) {
+                            // Palette color
+                            headerBoard.classList.add('cp-kanban-palette-'+board.color);
+                        } else if (!/^[0-9a-f]{6}$/.test(board.color)) {
+                            // "string" color (red, blue, etc.)
+                            headerBoard.classList.add("kanban-header-" + board.color);
+                        } else {
+                            // Hex color code
+                            var textColor = getTextColor(board.color);
+                            headerBoard.setAttribute('style', 'background-color:#'+board.color+';color:'+textColor+';');
+                        }
                     }
                     titleBoard = document.createElement('div');
                     titleBoard.classList.add('kanban-title-board');