[IMP] website: adapt snippet_background_edition tour

Author: aans-odoo

addons/html_editor/static/src/main/font/color_plugin.js

@@ -21,8 +21,8 @@ import {
     isCSSColor,
     RGBA_REGEX,
     rgbaToHex,
-    COLOR_COMBINATION_CLASSES_REGEX,
 } from "@web/core/utils/colors";
+import { COLOR_COMBINATION_CLASSES_REGEX } from "@html_editor/utils/color";
 import { ColorSelector } from "./color_selector";
 
 const RGBA_OPACITY = 0.6;

addons/web/static/src/core/color_picker/color_picker.scss

@@ -60,9 +60,12 @@
     margin-left: 2px;
 }
 
-.o_font_color_selector .o_color_button.selected {
+.o_font_color_selector {
     // todo: check web_editor
-    border: 3px solid $o-enterprise-action-color;
+    .o_color_button.selected,
+    .o_custom_gradient_button.selected {
+        border: 3px solid $o-enterprise-action-color !important;
+    }
 }
 // custom gradients
 .custom-gradient-configurator {

addons/web/static/src/core/color_picker/color_picker.xml

@@ -114,11 +114,11 @@
         <t t-if="state.activeTab==='gradient'">
             <div class="o_colorpicker_sections p-2" t-on-click="onColorApply" t-on-mouseover="onColorHover" t-on-mouseout="onColorHoverOut" t-on-focusin="onColorFocusin">
                 <t t-foreach="this.DEFAULT_GRADIENT_COLORS" t-as="gradient" t-key="gradient">
-                    <button class="w-50 m-0 o_color_button o_gradient_color_button btn" t-attf-style="background-image: #{gradient};" t-att-data-color="gradient"/>
+                    <button class="w-50 m-0 o_color_button o_gradient_color_button btn" t-att-class="{'selected': getCurrentGradientColor()?.includes(gradient)}" t-attf-style="background-image: #{gradient};" t-att-data-color="gradient"/>
                 </t>
             </div>
             <div class="px-2">
-                <button t-attf-style="background-image: {{ getCurrentGradientColor() }};" class="w-50 border btn mb-2 o_custom_gradient_button" t-on-click="this.toggleGradientPicker" title="Define a custom gradient">Custom</button>
+                <button t-attf-style="background-image: {{ getCurrentGradientColor() }};" class="w-50 border btn mb-2 o_custom_gradient_button"  t-att-class="{'selected': getCurrentGradientColor() &amp;&amp; !this.DEFAULT_GRADIENT_COLORS.includes(getCurrentGradientColor())}" t-on-click="this.toggleGradientPicker" title="Define a custom gradient" t-att-data-color="getCurrentGradientColor()">Custom</button>
                 <GradientPicker t-if="state.showGradientPicker" onGradientChange.bind="applyColor" selectedGradient="getCurrentGradientColor()"/>
             </div>
         </t>

addons/web/static/src/core/color_picker/gradient_picker/gradient_picker.xml

@@ -91,6 +91,7 @@
                 <div class="gradient-colors">
                     <div t-foreach="this.colors" t-as="color" t-key="color_index">
                         <input type="range" min="0" max="100" t-att-value="color.percentage"
+                               t-att-class="{'active': this.state.currentColorIndex === color_index}"
                                t-attf-name="custom gradient percentage color #{color_index+1}"
                                t-on-click="() => this.state.currentColorIndex = color_index"
                                t-on-change="(ev) => this.onColorPercentageChange(color_index, ev)" />