From 6534c4f2ce972eee506aa94527d3e9d107a1779a Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Tue, 4 Oct 2022 15:03:45 +0200
Subject: [PATCH] [IMP] website: allow all background colors for over the
 content headers

This commit allows users to choose any background color for nav bars
that are over the content. Before this commit the available colors were:
- bg-black-{15/25/50/75}
- bg-white-{25/50/75/85}
Now the users can choose any color (except gradients).

task-2904507

Part-of: odoo/odoo#99732
Co-authored-by: jpr-odoo <jpr@openerp.com>
---
 addons/website/static/src/js/editor/snippets.options.js | 6 ++++--
 addons/website/views/snippets/snippets.xml              | 2 +-
 addons/website/views/website_templates.xml              | 9 ++++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 6e8ab0a57e0..c2f65fd4026 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2599,11 +2599,13 @@ options.registry.topMenuColor = options.Class.extend({
      */
     async selectStyle(previewMode, widgetValue, params) {
         await this._super(...arguments);
-        const className = widgetValue ? (params.colorPrefix + widgetValue) : '';
+        if (widgetValue && !isCSSColor(widgetValue)) {
+            widgetValue = params.colorPrefix + widgetValue;
+        }
         await new Promise((resolve, reject) => {
             this.trigger_up('action_demand', {
                 actionName: 'toggle_page_option',
-                params: [{name: 'header_color', value: className}],
+                params: [{name: 'header_color', value: widgetValue}],
                 onSuccess: resolve,
                 onFailure: reject,
             });
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 975fedfb602..b47c4f3d759 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -892,7 +892,7 @@
             data-prevent-important="true"
             data-css-property="background-color"
             data-color-prefix="bg-"
-            data-excluded="theme, common, custom"/>
+            data-excluded="theme, common"/>
     </div>
 
     <!-- Header > Navbar Options -->
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 5378fd47b5f..0853d28050f 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -197,6 +197,12 @@
                 <input t-if="optionName in main_object" type="hidden" class="o_page_option_data" autocomplete="off" t-att-name="optionName" t-att-value="main_object[optionName]"/>
             </t>
         </t>
+
+        <t t-set="header_bg_color" t-value="'header_color' in main_object and main_object.header_color or ''"/>
+        <t t-set="header_bg_color_is_class" t-value="'bg-' in header_bg_color"/>
+        <t t-set="header_bg_color_class" t-value="header_bg_color_is_class and header_bg_color or ''"/>
+        <t t-set="header_bg_color_style" t-value="(not header_bg_color_is_class) and header_bg_color or ''"/>
+
         <div groups="base.group_user" class="o_frontend_to_backend_nav position-fixed d-none">
             <svg class="o_frontend_to_backend_icon position-absolute" width="24px" height="24px"
                  viewBox="-7 -7 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin">
@@ -219,7 +225,8 @@
         <attribute name="t-attf-class" add="#{'o_header_overlay' if 'header_overlay' in main_object and main_object.header_overlay else ''}" separator=" "/>
     </xpath>
     <xpath expr="//header" position="attributes">
-        <attribute name="t-attf-class" add="#{main_object.header_color if 'header_color' in main_object else ''}" separator=" "/>
+        <attribute name="t-attf-class" add="#{header_bg_color_class}" separator=" "/>
+        <attribute name="t-attf-style" add="#{header_bg_color_style and ('background-color: %s;' % header_bg_color_style)}" separator=" "/>
     </xpath>
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'header_visible' in main_object and not main_object.header_visible else ''}" separator=" "/>