Merge branch '4.15-candidate' of github.com:xwiki-labs/cryptpad into 4.15-candidate

customize.dist/src/less2/include/colortheme-dark.less

@@ -379,8 +379,10 @@
 @cp_kanban-tags-bg: @cryptpad_color_grey_700;
 @cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
 @cp_kanban-trash-bg: @cryptpad_color_warn_red;
-@cp_kanban-color0: @cryptpad_color_grey_600;
+@cp_kanban-color0: @cryptpad_color_grey_400;
-@cp_kanban-colors: @cp_palette-dark;
+@cp_kanban-colors: @cp_palette;
+@cp_kanban-card-colors: @cp_palette-dark;
+
 
 // Notifications
 @cp_notif-hover: fade(@cryptpad_color_black, 10%);

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

@@ -380,6 +380,7 @@
 @cp_kanban-trash-bg: @cryptpad_color_warn_red;
 @cp_kanban-color0: @cryptpad_color_grey_400;
 @cp_kanban-colors: @cp_palette;
+@cp_kanban-card-colors: @cp_palette;
 
 // Notifications
 @cp_notif-hover: fade(@cryptpad_color_black, 10%);

www/kanban/app-kanban.less

@@ -22,11 +22,15 @@
     @palette0: @cp_kanban-color0; // Default bg color for header
 
     @kanban-colors: @cp_kanban-colors;
+    @kanban-card-colors: @cp_kanban-card-colors;
 
     .kanban-board-header {
         background-color: @palette0;
-        color: @cp_kanban-fg;
+        color: @cryptpad_color_grey_800;
         border-radius: @variables_radius @variables_radius 0px 0px;
+        button.kanban-edit-item {
+            color: @cryptpad_color_grey_800;
+        }
     }
     .kanban-board {
         .kanban-board-inner {
@@ -40,7 +44,7 @@
         }
         color: @cp_kanban-fg;
         button {
-            color: @cp_kanban-fg;
+            color: @cryptpad_text_col;
         }
     }
 
@@ -55,13 +59,34 @@
         // make a numbered class selector for each color
         .cp-kanban-palette-color@{index}{
             background-color: @color !important;
+            &.cp-kanban-palette-board {
+                background-color: @color !important;
+            }
             &.kanban-board-inner {
                 background-color: fade(@color, 50%) !important;
             }
         }
     }
+    .kanban-card-colors(@kanban-card-colors; @index) when (@index > 0){
+        // loop through the @colors
+        .kanban-card-colors(@kanban-card-colors; (@index - 1));
+        @color: extract(@kanban-card-colors, @index);
+        // make a numbered class selector for each color
+        // .cp-kanban-card-color@{index}{
+        //     background-color: @color !important;
+        // }
+        .cp-kanban-palette-color@{index}{
+            &.cp-kanban-palette-card {
+                background-color: @color !important;
+            }
+            &.kanban-item {
+                background-color: @color !important;
+            }
+        }
+    }
     // call the loop
     .kanban-colors(@kanban-colors; length(@kanban-colors));
+    .kanban-card-colors(@kanban-card-colors; length(@kanban-card-colors));
 
     .cp-kanban-edit-modal {
         display: flex;
@@ -121,6 +146,9 @@
             line-height: 30px;
             color: @cp_kanban-fg;
             border: 1px solid fade(@cp_kanban-fg, 40%);
+            &.fa-check { // tick on selected color
+                color: @cryptpad_text_col;
+            }
         }
     }
     #cp-kanban-edit-tags {

www/kanban/inner.js

@@ -363,6 +363,18 @@ define([
         var palette = [''];
         for (var i=1; i<=8; i++) { palette.push('color'+i); }
         var selectedColor = '';
+        var resetThemeClass = function () {
+            $colors.find('.cp-kanban-palette').each(function (i, el) {
+                var $c = $(el);
+                $c.removeClass('cp-kanban-palette-card');
+                $c.removeClass('cp-kanban-palette-board');
+                if (isBoard) {
+                    $c.addClass('cp-kanban-palette-board');
+                } else {
+                    $c.addClass('cp-kanban-palette-card');
+                }
+            });
+        };
         palette.forEach(function (color) {
             var $color = $(h('span.cp-kanban-palette.fa'));
             $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
@@ -383,6 +395,7 @@ define([
                 return selectedColor;
             },
             setValue: function (color) {
+                resetThemeClass();
                 $colors.find('.cp-kanban-palette').removeClass('fa-check');
                 var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
                 $col.addClass('fa-check');