[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>

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;
+}

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;