[FIX] html_editor,html_builder: handle gradient & o_cc & transparent image

This commit ensures that when there is a combination of background
colors (o_cc, class color, static color, and gradient color) and
transparent images, the background gradient is correctly applied.
It also ensures that the gradient is not overridden by the transparent
image.

closes odoo#211634

Signed-off-by: Soukéina Bojabza (sobo) <[email protected]>

Author: Goaman

addons/html_builder/static/src/core/color_style_plugin.js

@@ -8,8 +8,8 @@ class ColorStylePlugin extends Plugin {
     static dependencies = ["color"];
     resources = {
         builder_style_actions: this.getStyleActions(),
-        apply_color_style: withSequence(5, (element, mode, color) => {
-            applyNeededCss(element, mode === "backgroundColor" ? "background-color" : mode, color);
+        apply_style: withSequence(5, (element, cssProp, color) => {
+            applyNeededCss(element, cssProp, color);
             return true;
         }),
     };

addons/html_builder/static/src/utils/utils_css.js

@@ -531,13 +531,8 @@ export function applyNeededCss(
     computedStyle = window.getComputedStyle(el),
     { force = false, allowImportant = true } = {}
 ) {
-    const classes = [1, 2, 3, 4, 5].map((i) => `o_cc${i}`);
-    el.classList.remove(...classes);
-    if (cssValue.startsWith("o_cc")) {
-        el.style.removeProperty(cssProp);
-        el.classList.add(cssValue);
-        return;
-    }
+    // Change camelCase to kebab-case.
+    cssProp = cssProp.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
     if (force) {
         el.style.setProperty(cssProp, cssValue, allowImportant ? "important" : "");
         return true;

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

@@ -24,9 +24,12 @@ import {
     COLOR_COMBINATION_CLASSES_REGEX,
 } from "@web/core/utils/colors";
 import { ColorSelector } from "./color_selector";
+import { backgroundImageCssToParts, backgroundImagePartsToCss } from "@html_editor/utils/image";
 
 const RGBA_OPACITY = 0.6;
 const HEX_OPACITY = "99";
+const COLOR_COMBINATION_CLASSES = [1, 2, 3, 4, 5].map((i) => `o_cc${i}`);
+const COLOR_COMBINATION_SELECTOR = COLOR_COMBINATION_CLASSES.map((c) => `.${c}`).join(", ");
 
 /**
  * @typedef { Object } ColorShared
@@ -80,7 +83,7 @@ export class ColorPlugin extends Plugin {
          * @param {string} color hexadecimal or bg-name/text-name class
          * @param {'color'|'backgroundColor'} mode 'color' or 'backgroundColor'
          */
-        apply_color_style: (element, mode, color) => {
+        apply_style: (element, mode, color) => {
             element.style[mode] = color;
             return true;
         },
@@ -445,30 +448,84 @@ export class ColorPlugin extends Plugin {
      * @param {'color'|'backgroundColor'} mode 'color' or 'backgroundColor'
      */
     colorElement(element, color, mode) {
+        let parts = backgroundImageCssToParts(element.style["background-image"]);
         const oldClassName = element.getAttribute("class") || "";
+
+        if (element.matches(COLOR_COMBINATION_SELECTOR)) {
+            removePresetGradient(element);
+        }
+
+        if (color.startsWith("o_cc")) {
+            parts = backgroundImageCssToParts(element.style["background-image"]);
+            element.classList.remove(...COLOR_COMBINATION_CLASSES);
+            element.classList.add(color);
+            setBackgroundImageAndOverride(element, element.style["background-image"]);
+            this.fixColorCombination(element);
+            return;
+        }
+
+        if (mode === "backgroundColor") {
+            if (!color) {
+                element.classList.remove(...COLOR_COMBINATION_CLASSES);
+            }
+            delete parts.gradient;
+            const newBackgroundImage = backgroundImagePartsToCss(parts);
+            setBackgroundImageAndOverride(element, newBackgroundImage);
+            element.style["background-color"] = "";
+        }
+
         const newClassName = oldClassName
             .replace(mode === "color" ? TEXT_CLASSES_REGEX : BG_CLASSES_REGEX, "")
             .replace(/\btext-gradient\b/g, "") // cannot be combined with setting a background
             .replace(/\s+/, " ");
-        oldClassName !== newClassName && element.setAttribute("class", newClassName);
-        element.style["background-image"] = "";
-        if (mode === "backgroundColor") {
-            element.style["background"] = "";
+        if (oldClassName !== newClassName) {
+            element.setAttribute("class", newClassName);
         }
         if (color.startsWith("text") || color.startsWith("bg-")) {
             element.style[mode] = "";
             element.classList.add(color);
         } else if (isColorGradient(color)) {
             element.style[mode] = "";
+            parts.gradient = color;
             if (mode === "color") {
-                element.style["background"] = "";
-                this.delegateTo("apply_color_style", element, "background-image", color);
+                element.style["background-color"] = "";
                 element.classList.add("text-gradient");
-            } else {
-                this.delegateTo("apply_color_style", element, "background-image", color);
             }
+            this.delegateTo(
+                "apply_style",
+                element,
+                "background-image",
+                backgroundImagePartsToCss(parts)
+            );
         } else {
-            this.delegateTo("apply_color_style", element, mode, color);
+            this.delegateTo("apply_style", element, mode, color);
+        }
+        this.fixColorCombination(element);
+    }
+    /**
+     * There is a limitation with css. The defining a background image and a
+     * background gradient is done only by setting one style (background-image).
+     * If there is a class (in this case o_cc[1-5]) that defines a gradient, it
+     * will be overridden by the background-image property.
+     *
+     * This function will set the gradient of the o_cc in the background-image
+     * so that setting an image in the background-image property will not
+     * override the gradient.
+     */
+    fixColorCombination(element) {
+        const parts = backgroundImageCssToParts(element.style["background-image"]);
+        const hasBackgroundColor =
+            element.style["background-color"] ||
+            !!element.className.match(/\bbg-/) ||
+            parts.gradient;
+
+        if (!hasBackgroundColor) {
+            element.style["background-image"] = "";
+            parts.gradient = backgroundImageCssToParts(
+                // Compute the style from o_cc class.
+                getComputedStyle(element).backgroundImage
+            ).gradient;
+            element.style["background-image"] = backgroundImagePartsToCss(parts);
         }
     }
 
@@ -485,3 +542,33 @@ export class ColorPlugin extends Plugin {
 function getColorCombinationFromClass(el) {
     return el.className.match?.(COLOR_COMBINATION_CLASSES_REGEX)?.[0];
 }
+
+/**
+ * Remove the gradient of the element only if it is the inheritance from the o_cc selector.
+ */
+function removePresetGradient(element) {
+    const oldBackgroundImage = element.style["background-image"];
+    const parts = backgroundImageCssToParts(oldBackgroundImage);
+    const currentGradient = parts.gradient;
+    element.style.removeProperty("background-image");
+    const styleWithoutGradient = getComputedStyle(element);
+    const presetGradient = backgroundImageCssToParts(styleWithoutGradient.backgroundImage).gradient;
+    if (presetGradient !== currentGradient) {
+        const withGradient = backgroundImagePartsToCss(parts);
+        element.style["background-image"] = withGradient === "none" ? "" : withGradient;
+    } else {
+        delete parts.gradient;
+        const withoutGradient = backgroundImagePartsToCss(parts);
+        element.style["background-image"] = styleWithoutGradient === "none" ? "" : withoutGradient;
+    }
+}
+
+function setBackgroundImageAndOverride(el, backgroundImage) {
+    const isNone = !backgroundImage || backgroundImage === "none";
+    el.style.backgroundImage = isNone ? "" : backgroundImage;
+    // If the current background image is empty but the inherited one isn't
+    // force the background image to override the inherited one.
+    if (isNone && getComputedStyle(el).backgroundImage !== "none") {
+        el.style.backgroundImage = "none";
+    }
+}

addons/html_editor/static/src/utils/image.js

@@ -6,9 +6,8 @@ import { isColorGradient } from "@web/core/utils/colors";
  * @param {string} CSS 'background-image' property value
  * @returns {Object} contains the separated 'url' and 'gradient' parts
  */
-export function backgroundImageCssToParts(css) {
+export function backgroundImageCssToParts(css = "") {
     const parts = {};
-    css = css || "";
     if (css.startsWith("url(")) {
         const urlEnd = css.indexOf(")") + 1;
         parts.url = css.substring(0, urlEnd).trim();