From c9f9d143b14ec35754373736cc01cb860aeecd99 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 19 Jun 2024 16:12:22 +0200
Subject: [PATCH] Fix color palette

---
 customize.dist/src/less2/include/admin.less | 36 +++++++++++++
 customize.dist/src/less2/include/forms.less | 21 ++++++++
 www/admin/app-admin.less                    | 12 +++++
 www/admin/inner.js                          | 49 ++++++------------
 www/common/common-ui-elements.js            | 37 ++++++++++++++
 www/common/common-util.js                   |  3 ++
 www/install/onboarding.less                 |  8 +++
 www/install/onboardscreen.js                | 56 ++++++++-------------
 www/kanban/app-kanban.less                  | 27 +++-------
 www/kanban/inner.js                         | 34 ++++---------
 10 files changed, 169 insertions(+), 114 deletions(-)
 create mode 100644 customize.dist/src/less2/include/admin.less

diff --git a/customize.dist/src/less2/include/admin.less b/customize.dist/src/less2/include/admin.less
new file mode 100644
index 000000000..7aa2caaad
--- /dev/null
+++ b/customize.dist/src/less2/include/admin.less
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+@import (reference) "./colortheme-all.less";
+@import (reference) "./forms.less";
+
+.admin_main() {
+    --LessLoader_require: LessLoader_currentFile();
+}
+& {
+
+    @palette-colors: @cp_kanban-colors;
+    div.cp-palette-container {
+
+        .cp-palette-nocolor {
+            display: none;
+        }
+        .instance-colors(@palette-colors; @index) when (@index > 0){
+            // loop through the @colors
+            .instance-colors(@palette-colors; (@index - 1));
+
+            @color: extract(@palette-colors, @index);
+            // make a numbered class selector for each color
+            .cp-palette-color@{index}{
+                background-color: @color !important;
+                color: contrast(@color, @cryptpad_color_grey_800, @cryptpad_color_grey_200) !important;
+            }
+        }
+        .instance-colors(@palette-colors; length(@palette-colors));
+
+    }
+
+}
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 2f5777771..f57af45a2 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -119,6 +119,27 @@
         }
     }
 
+    // The following palette container is just for the UI components
+    // The specific colors you want to show have to be defined in your app
+    // using the classes .cp-palette-nocolor .cp-palette-color1 .cp-palette-color2 etc.
+    div.cp-palette-container {
+        display: flex;
+        justify-content: space-between;
+        .cp-palette-color {
+            display: inline-block;
+            border-radius: 50%;
+            height: 30px;
+            width: 30px;
+            text-align: center;
+            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;
+            }
+        }
+    }
+
     button.btn {
         background-color: @cp_buttons-cancel;
         box-sizing: border-box;
diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 98d787002..5c179326d 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -9,6 +9,7 @@
 @import (reference) "../../customize/src/less2/include/creation.less";
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/export.less';
+@import (reference) '../../customize/src/less2/include/admin.less';
 
 .cp-admin-customize-apps-grid {
     padding: 10px;
@@ -69,6 +70,7 @@
     .sidebar-layout_main();
     .limit-bar_main();
     .creation_main();
+    .admin_main();
 
     display: flex;
     flex-flow: column;
@@ -86,6 +88,16 @@
         border-radius: 5px;
         background-color: @cryptpad_color_brand;
     }
+    input.cp-admin-color-picker {
+        vertical-align: middle;
+    }
+    .cp-palette-container {
+        display: inline-flex;
+        width: ~"calc(100% - 5rem)";
+        padding-left: 0.5rem;
+        vertical-align: middle;
+    }
+
     .cp-admin-color-preview {
         & > div {
             margin-top: @sidebar_base-margin;
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 5c3195607..27f968956 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -971,7 +971,7 @@ define([
                 setColor(color, done);
             });
 
-            let $input = $(input).on('change', () => {
+            let onColorPicked = () => {
                 require(['/lib/less.min.js'], (Less) => {
                     let color = $input.val();
                     let lColor = Less.color(color.slice(1));
@@ -991,7 +991,8 @@ define([
                     $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
                     $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
                 });
-            });
+            };
+            let $input = $(input).on('change', onColorPicked).addClass('cp-admin-color-picker');
 
             UI.confirmButton($remove, {
                 classes: 'btn-danger',
@@ -1001,44 +1002,22 @@ define([
                 setColor('', () => {});
             });
 
-            var colors;
-            var content = h('div.cp-onboardscreen-colorpick', [
-                h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-                colors = h('div#cp-kanban-edit-colors'),
-            ]);
-
-            var $colors = $(colors);
-            var palette = [''];
-            for (var i=1; i<=8; i++) { palette.push('color'+i); }
-            var selectedColor = '';
-            palette.forEach(function (color) {
-                var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-                $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-                $color.click(function () {
-                    if (color === selectedColor) { return; }
-                    selectedColor = $color.css('background-color');
-                    $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                    var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                    $col.addClass('fa-check');
-                    sframeCommand('CHANGE_COLOR', {selectedColor}, (err, response) => {
-                    if (err) {
-                        UI.warn(Messages.error);
-                        console.error(err, response);
-                        // done(false);
-                        return;
-                    }
-                    done(true);
-                    UI.log(Messages.saved);
-                });
-                }).appendTo($colors);
+            var colors = UIElements.makePalette(8, (color, $color) => {
+                // onselect
+                let rgb = $color.css('background-color');
+                let hex = Util.rgbToHex(rgb);
+                $input.val(hex);
+                onColorPicked();
             });
-        
+            var $colors = $(colors);
+
+            $(label).append(colors);
             let form = blocks.form([
                 labelCurrent,
-                label
+                label,
             ], blocks.nav([btn, remove, btn.spinner]));
 
-            cb([form, labelPreview, content]);
+            cb([form, labelPreview]);
         });
 
         // Msg.admin_registrationHint, .admin_registrationTitle
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 537fb89de..014c5ba23 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -4285,5 +4285,42 @@ define([
         return UI.errorLoadingScreen(msg, false, false);
     };
 
+    UIElements.makePalette = (maxColors, onSelect) => {
+        let palette = [''];
+        for (var i=1; i<=maxColors; i++) { palette.push('color'+i); }
+
+        let offline = false;
+        let selectedColor = '';
+        let container = h('div.cp-palette-container');
+        let $container = $(container);
+
+        palette.forEach(function (color) {
+            var $color = $(h('span.cp-palette-color.fa'));
+            $color.addClass('cp-palette-'+(color || 'nocolor'));
+            $color.click(function () {
+                if (offline) { return; }
+                if (color === selectedColor) { return; }
+                selectedColor = color;
+                $container.find('.cp-palette-color').removeClass('fa-check');
+                $color.addClass('fa-check');
+                onSelect(color, $color);
+            }).appendTo($container);
+        });
+
+        container.disable = state => {
+            offline = !!state;
+        };
+        container.getValue = () => {
+            return selectedColor;
+        };
+        container.setValue = color => {
+            $container.find('.cp-palette-color').removeClass('fa-check');
+            let $color = $container.find('.cp-palette-'+(color || 'nocolor'));
+            $color.addClass('fa-check');
+            selectedColor = color;
+        };
+        return container;
+    };
+
     return UIElements;
 });
diff --git a/www/common/common-util.js b/www/common/common-util.js
index fd96f12c4..5faa9171e 100644
--- a/www/common/common-util.js
+++ b/www/common/common-util.js
@@ -606,6 +606,9 @@
             parseInt(h.slice(4,6), 16),
         ];
     };
+    Util.rgbToHex = function (rgb) {
+        return `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;
+    };
 
     Util.isSmallScreen = function () {
         return window.innerHeight < 800 || window.innerWidth < 800;
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 7b1fd280f..dfec9b87c 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -3,6 +3,14 @@
 @import (reference) "../../customize/src/less2/include/tools.less";
 @import (reference) "../../customize/src/less2/include/markdown.less";
 @import (reference) "../../customize/src/less2/include/avatar.less";
+@import (reference) '../../customize/src/less2/include/admin.less';
+
+&.cp-page-install {
+    .admin_main();
+    div.cp-palette-container {
+        max-width: 400px;
+    }
+}
 
 @cp_palette:
     #FFD4D4,
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index f33b7fe03..16dbc8f48 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -5,9 +5,8 @@ define([
     '/common/hyperscript.js',
     '/common/common-interface.js',
     '/common/common-util.js',
-    '/api/instance',
+    '/common/common-ui-elements.js',
 
-    '/common/hyperscript.js',
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
 
@@ -18,6 +17,7 @@ define([
     h,
     UI,
     Util,
+    UIElements
 ) {
 
     //XXX
@@ -162,47 +162,33 @@ define([
 
         var colorBlock = function () {
 
-            var colors;
+            let selectorColor = '';
+            var colors = UIElements.makePalette(8, (color, $color) => {
+                let rgb = $color.css('background-color');
+                let hex = Util.rgbToHex(rgb);
+                selectorColor = hex;
+                // XXX Save only at the end
+                sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        console.error(e, response);
+                        return;
+                    }
+                    UI.log(Messages.saved);
+                });
+            });
+            var $colors = $(colors).attr('id', 'cp-install-color');
             var content = h('div.cp-onboardscreen-colorpick', [
-                h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-                colors = h('div#cp-kanban-edit-colors'),
+                h('label', {for:'cp-install-color'}, Messages.kanban_color),
+                colors
             ]);
 
-            var $colors = $(colors);
-            var palette = [''];
-            for (var i=1; i<=8; i++) { palette.push('color'+i); }
-            var selectedColor = '';
-            palette.forEach(function (color) {
-                var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-                $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-                $color.click(function () {
-                    if (color === selectedColor) { return; }
-                    selectedColor = $color.css('background-color');
-                    $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                    var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                    $col.addClass('fa-check');
-                    sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
-                        if (e || response.error) {
-                            UI.warn(Messages.error);
-                            console.error(e, response);
-                            // done(false);
-                            return;
-                        }
-                        // flushCache();
-                        // done(true);
-                        // redraw();
-                        // spinner.done();
-                        UI.log(Messages.saved);
-                    });
-                }).appendTo($colors);
-            });
-        
             return content;
-        
         };
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
 
+            // XXX Save only at the end
             sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 8d50f1e91..fd54b070a 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -63,11 +63,13 @@
         .kanban-colors(@kanban-colors; (@index - 1));
         @color: extract(@kanban-colors, @index);
         // make a numbered class selector for each color
-        .cp-kanban-palette-color@{index}{
-            background-color: @color !important;
+        .cp-palette-color@{index}{
             &.cp-kanban-palette-board {
                 background-color: @color !important;
             }
+        }
+        .cp-kanban-palette-color@{index}{
+            background-color: @color !important;
             &.kanban-board-inner {
                 background-color: fade(@color, 50%) !important;
             }
@@ -81,10 +83,12 @@
         // .cp-kanban-card-color@{index}{
         //     background-color: @color !important;
         // }
-        .cp-kanban-palette-color@{index}{
+        .cp-palette-color@{index}{
             &.cp-kanban-palette-card {
                 background-color: @color !important;
             }
+        }
+        .cp-kanban-palette-color@{index}{
             &.kanban-item {
                 background-color: @color !important;
             }
@@ -140,23 +144,6 @@
         }
         margin-bottom: 15px;
     }
-    #cp-kanban-edit-colors {
-        display: flex;
-        justify-content: space-between;
-        .cp-kanban-palette {
-            display: inline-block;
-            border-radius: 50%;
-            height: 30px;
-            width: 30px;
-            text-align: center;
-            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 {
         .tokenfield {
             margin: 0;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index e3579e952..6114266ad 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -185,6 +185,11 @@ define([
             update();
         };
 
+        var colors = UIElements.makePalette(8, color => {
+            dataObject.color = color;
+            commit();
+        });
+
         var conflicts, conflictContainer, titleInput, tagsDiv, colors, text;
         var content = h('div', [
             conflictContainer = h('div#cp-kanban-edit-conflicts', [
@@ -200,7 +205,7 @@ define([
             h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
             tagsDiv = h('div#cp-kanban-edit-tags'),
             h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-            colors = h('div#cp-kanban-edit-colors'),
+            colors,
         ]);
         var $tags = $(tagsDiv);
 
@@ -362,11 +367,9 @@ define([
 
         // Colors
         var $colors = $(colors);
-        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) {
+            $colors.find('.cp-palette-color').each(function (i, el) {
                 var $c = $(el);
                 $c.removeClass('cp-kanban-palette-card');
                 $c.removeClass('cp-kanban-palette-board');
@@ -377,31 +380,13 @@ define([
                 }
             });
         };
-        palette.forEach(function (color) {
-            var $color = $(h('span.cp-kanban-palette.fa'));
-            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-            $color.click(function () {
-                if (offline) { return; }
-                if (color === selectedColor) { return; }
-                selectedColor = color;
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
-
-                dataObject.color = color;
-                commit();
-            }).appendTo($colors);
-        });
         var color = {
             getValue: function () {
-                return selectedColor;
+                return colors.getValue();
             },
             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');
-                selectedColor = color;
+                colors.setValue(color);
             }
         };
 
@@ -453,6 +438,7 @@ define([
 
             $modal.find('nav button.danger').prop('disabled', unlocked ? '' : 'disabled');
             offline = !unlocked;
+            palette.disable(offline);
         });