From c20423313cf10f262e615badc0397e6ba4ef4087 Mon Sep 17 00:00:00 2001
From: fja-odoo <fja@odoo.com>
Date: Mon, 9 Mar 2020 10:22:57 +0000
Subject: [PATCH] [FIX] website, *: fix colorpalette custom colors

*: web_editor

Previously the theme body, text, header, headings and footer colors were
not added to the customs colors of other colorpickers if they were
custom. Now it is the case.
Those colors can be set to a theme color but it will be the css color
of the theme color that will be set, not its name.
This can lead to the custom color being a theme color which was not
checked before as it was not possible. Now it is checked.

Also before the theme tab, if the selected color was custom, it would
always appear in the palette and be marked selected. This is no longer
the case with the like of status colors as their color are
not part of the custom colors available on the color palette. Now we add
the selected color as a custom color to always have the selected marked.

task-2198177

closes odoo/odoo#50766

X-original-commit: d631b27b0bf04e708c16262378ab5729252838fe
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../src/js/wysiwyg/widgets/color_palette.js   | 47 +++++++++++++++----
 .../static/src/scss/primary_variables.scss    |  4 +-
 addons/website/static/src/scss/website.scss   |  7 +++
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 7da8523f391..4180812e3d2 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -45,6 +45,7 @@ const ColorPaletteWidget = Widget.extend({
             $editable: $(),
         }, options || {});
 
+        this.selectedColor = '';
         this.trigger_up('request_editable', {callback: val => this.options.$editable = val});
     },
     /**
@@ -113,11 +114,6 @@ const ColorPaletteWidget = Widget.extend({
             });
         }
 
-        // Render custom colors
-        this._buildCustomColors();
-
-        this._addCompatibilityColors(['primary', 'secondary', 'success', 'info', 'warning', 'danger']);
-
         // Compute class colors
         this.colorNames = [];
         this.colorToColorNames = {};
@@ -132,16 +128,30 @@ const ColorPaletteWidget = Widget.extend({
             }
         });
 
-        // Select selected Color
+        // Compute selected color
         if (this.options.selectedColor) {
             const selectedColor = ColorpickerDialog.normalizeCSSColor(this.options.selectedColor);
-            this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
+            if (selectedColor !== 'rgba(0, 0, 0, 0)') {
+                this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
+            }
+        }
+
+        // Render custom colors
+        this._buildCustomColors();
+
+        // Select selected Color
+        if (this.options.selectedColor) {
             const selectedButton = this.el.querySelector(`button[data-color="${this.selectedColor}"], button[style*="background-color:${this.selectedColor};"]`);
             if (selectedButton) {
                 selectedButton.classList.add('selected');
             }
         }
 
+        // Add those at the very end so that we don't mark hidden colors as
+        // selected. We want those colors to appear as selected custom colors if
+        // they are chosen somehow.
+        this._addCompatibilityColors(['primary', 'secondary', 'success', 'info', 'warning', 'danger']);
+
         return res;
     },
     /**
@@ -180,7 +190,9 @@ const ColorPaletteWidget = Widget.extend({
         if (this.options.excluded.includes('custom')) {
             return;
         }
-        const existingColors = new Set(this.summernoteCustomColorsArray);
+        const existingColors = new Set(this.summernoteCustomColorsArray.concat(
+            Object.keys(this.colorToColorNames)
+        ));
         this.trigger_up('get_custom_colors', {
             onSuccess: (colors) => {
                 colors.forEach(color => {
@@ -188,11 +200,20 @@ const ColorPaletteWidget = Widget.extend({
                 });
             },
         });
+        this.style.getPropertyValue(`--custom-colors`).trim().split(' ').forEach(v => {
+            const color = this.style.getPropertyValue(`--${v}`).trim();
+            if (ColorpickerDialog.isCSSColor(color)) {
+                this._addCustomColor(existingColors, color);
+            }
+        });
         _.each(this.options.$editable.find('[style*="color"]'), el => {
             for (const colorProp of ['color', 'backgroundColor']) {
                 this._addCustomColor(existingColors, el.style[colorProp]);
             }
         });
+        if (this.selectedColor) {
+            this._addCustomColor(existingColors, this.selectedColor);
+        }
     },
     /**
      * Add the color to the custom color section if it is not in the existingColors.
@@ -201,8 +222,14 @@ const ColorPaletteWidget = Widget.extend({
      * @param {string} color Color to add to the cuustom colors
      */
     _addCustomColor: function (existingColors, color) {
+        if (!color) {
+            return;
+        }
+        if (!ColorpickerDialog.isCSSColor(color)) {
+            color = this.style.getPropertyValue('--' + color).trim();
+        }
         const normColor = ColorpickerDialog.normalizeCSSColor(color);
-        if (color && !existingColors.has(normColor)) {
+        if (!existingColors.has(normColor)) {
             this._addCustomColorButton(normColor);
             existingColors.add(normColor);
         }
@@ -310,7 +337,7 @@ const ColorPaletteWidget = Widget.extend({
      * @param {Event} ev
      */
     _onColorResetButtonClick: function (ev) {
-        this.selectedColor = false;
+        this.selectedColor = '';
         this.trigger_up('color_reset', {
             target: ev.target,
         });
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 673e26293f7..90dd9c3ba79 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -6,8 +6,8 @@ $o-theme-layout: 'full';
 
 $o-base-color-palette: map-merge($o-base-color-palette, (
     'body': $o-portal-default-body-bg,
-    'menu': #F9F9F9,
-    'footer': #F9F9F9,
+    'menu': #F8F9FA, // BS gray-100
+    'footer': #F8F9FA, // BS gray-100
     'text': null, // Default to bootstrap
     'h1': null, // Default to text
     'h2': null, // Default to h1
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 363528e30a5..efbee970b0e 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -61,6 +61,13 @@ $-font-numbers: (
     --logo-height: #{$o-theme-navbar-logo-height};
     --fixed-logo-height: #{$o-theme-navbar-fixed-logo-height};
     --number-of-fonts: #{length($o-theme-fonts)};
+
+    // 6) Get list of colorpalette custom colors
+    $custom-colors: ();
+    @each $key, $value in $o-color-palette {
+        $custom-colors: append($custom-colors, $key);
+    }
+    --custom-colors: #{$custom-colors};
 }
 
 #wrapwrap {