From 0edd492dcb23c90a8ce9d045339b29bf015f0764 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Tue, 21 Mar 2023 13:58:22 +0000
Subject: [PATCH] [FIX] web_editor: fix lost rgba colors after shape flipping

In some themes, RGBA colors were used to define the colors of shapes.
However, adding this color in the parameters of the background image URL
of a "shape" element was not valid. This caused several bugs, such as
the colorpicker not finding the colors of the shape used, as well as the
colors of the shape being lost after the application of a "flip".

Steps to reproduce the bug:

- In website edit mode, open the homepage page of the Nano theme.
- Drag and drop a Banner snippet onto the page.
- Bug: The colorpicker does not recognize the four colors used by the
shape.
- Click on one of the two "Flip" buttons.
- Bug: The colors of the shape are lost.

task-2824607

closes odoo/odoo#117652

X-original-commit: 0661aa0bbb4751866cfcc9a320a8eff473ba0442
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/scss/secondary_variables.scss          | 11 +++++++++++
 .../web_editor/static/src/scss/web_editor.common.scss |  3 +--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index ddefb550daa..e90c3452133 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -129,3 +129,14 @@ $o-we-auto-contrast-exclusions: () !default;
     }
     @return increase-contrast($color1, $color2);
 }
+
+// Replace invalid characters used for colors in url.
+// (e.g. "rgba(0, 0, 0, .5)" or "#111111").
+@function encode-color($colors) {
+    $colors: str-replace($colors, '#', '%23');
+    $colors: str-replace($colors, '(', '%28');
+    $colors: str-replace($colors, ')', '%29');
+    $colors: str-replace($colors, ',', '%2C');
+    $colors: str-replace($colors, ' ', '%20');
+    @return $colors;
+}
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 949a217c063..403946386f2 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -966,8 +966,7 @@ section, .oe_img_bg, [data-oe-shape-data] {
     $url-params: '';
     @each $i in $colors {
         $mapped-color: map-get($color-to-cc-bg-map, $i);
-        // %23 is the url-encoded form of '#'
-        $color: str-replace("#{o-color($mapped-color)}", '#', '%23');
+        $color: encode-color(#{o-color($mapped-color)});
         $url-params: '#{$url-params}&c#{$i}=#{$color}';
     }
     @return $url-params;