From 415552b0422c70214c764bd1359e2415d813620f Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 31 Aug 2021 15:49:25 +0200
Subject: [PATCH] Add colortheme settings in forms

---
 www/form/app-form.less | 41 ++++++++++++++++++++++++++++++++++++
 www/form/inner.js      | 48 ++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index d763ed204..f93ff7009 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -16,6 +16,31 @@
     color: @cryptpad_text_col;
     background-color: @cp_app-bg;
 
+    @palette0: @cp_kanban-color0; // Default bg color for header
+    @kanban-colors: @cp_kanban-colors;
+    .kanban-colors(@kanban-colors; @index) when (@index > 0){
+        // loop through the @colors
+        .kanban-colors(@kanban-colors; (@index - 1));
+        @color: extract(@kanban-colors, @index);
+        // make a numbered class selector for each color
+        .cp-form-palette-color@{index}{
+            &.cp-form-palette {
+                background-color: @color !important;
+            }
+            .cp-form-block { // XXX
+                background-color: fade(@color, 50%) !important;
+            }
+        }
+    }
+    // call the loop
+    .kanban-colors(@kanban-colors; length(@kanban-colors));
+
+    .cp-form-palette-nocolor {
+        &.cp-form-palette {
+            background-color: @palette0 !important;
+        }
+    }
+
     div.alert.cp-burn-after-reading {
         margin: 10px !important;
     }
@@ -136,6 +161,22 @@
                         margin-bottom: 20px;
                     }
                 }
+
+                .cp-form-color-container {
+                    display: flex;
+                    justify-content: space-between;
+                    .cp-form-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%);
+                        cursor: pointer;
+                    }
+                }
             }
             div.cp-form-filler-container {
                 width: 300px;
diff --git a/www/form/inner.js b/www/form/inner.js
index 7524cd57b..ab9a17b45 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -2501,6 +2501,10 @@ define([
 
         APP.formBlocks = [];
 
+        $container.attr('class', 'cp-form-creator-content');
+        var color = content.answers.color || 'nocolor';
+        $container.addClass('cp-form-palette-'+color);
+
         if (APP.isClosed && content.answers.privateKey && !APP.isEditor) {
             var sframeChan = framework._.sfCommon.getSframeChannel();
             sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
@@ -2884,6 +2888,7 @@ define([
                 }
             }
             var editableCls = editable ? ".editable" : "";
+            var colorCls = '.cp-form-palette-'+color;
             elements.push(h('div.cp-form-block'+editableCls, {
                 'data-id':uid
             }, [
@@ -3349,7 +3354,9 @@ define([
                         var d = picker.parseDate(datePicker.value);
                         content.answers.endDate = +d;
                         framework.localChange();
-                        refreshEndDate();
+                        framework._.cpNfInner.chainpad.onSettle(function () {
+                            refreshEndDate();
+                        });
                     });
                     var confirmContent = h('div', [
                         h('div', Messages.form_setEnd),
@@ -3366,12 +3373,48 @@ define([
             };
             refreshEndDate();
 
+            Messages.form_colors = "Color theme"; // XXX
+            var colorContainer = h('div.cp-form-color-container');
+            var colorTheme = h('div.cp-form-color-theme-container', [
+                h('span', Messages.form_colors),
+                colorContainer
+            ]);
+            var $colors = $(colorContainer);
+            var refreshColorTheme = function () {
+                $colors.empty();
+                var palette = ['nocolor'];
+                for (var i=1; i<=8; i++) { palette.push('color'+i); }
+                var color = content.answers.color || 'nocolor';
+                var selectedColor = color;
+                palette.forEach(function (_color) {
+                    var $color = $(h('span.cp-form-palette.fa'));
+                    $color.addClass('cp-form-palette-'+(_color || 'nocolor'));
+                    if (selectedColor === _color) { $color.addClass('fa-check'); }
+                    $color.click(function () {
+                        if (_color === selectedColor) { return; }
+                        content.answers.color = _color;
+                        framework.localChange();
+                        framework._.cpNfInner.chainpad.onSettle(function () {
+                            UI.log(Messages.saved);
+                            selectedColor = _color;
+                            $colors.find('.cp-form-palette').removeClass('fa-check');
+                            $color.addClass('fa-check');
+
+                            var $container = $('div.cp-form-creator-content');
+                            $container.attr('class', 'cp-form-creator-content');
+                            $container.addClass('cp-form-palette-'+_color);
+                        });
+                    }).appendTo($colors);
+                });
+            };
+            refreshColorTheme();
 
             evOnChange.reg(refreshPublic);
             evOnChange.reg(refreshPrivacy);
             evOnChange.reg(refreshAnon);
             evOnChange.reg(refreshEditable);
             evOnChange.reg(refreshEndDate);
+            evOnChange.reg(refreshColorTheme);
             //evOnChange.reg(refreshResponse);
 
             return [
@@ -3381,7 +3424,8 @@ define([
                 privacyContainer,
                 editableContainer,
                 resultsType,
-                responseMsg
+                responseMsg,
+                colorTheme
             ];
         };