From af666dff2084a05e9a8efd5eb5178a237cee0995 Mon Sep 17 00:00:00 2001
From: Cocographique <nmi@odoo.com>
Date: Thu, 23 Sep 2021 14:29:16 +0000
Subject: [PATCH] [IMP] web_editor: add new "Zigs" background shape

Related to task-2545200

closes odoo/odoo#77119

X-original-commit: 1624b1659d15df731a954912b88908a24aeddb5d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web_editor/static/shapes/Zigs/06.svg        | 14 ++++++++++++++
 addons/web_editor/static/shapes/convert.js         |  5 ++++-
 .../static/src/scss/web_editor.frontend.scss       |  6 +++---
 .../static/src/scss/web_editor.variables.scss      |  1 +
 addons/web_editor/views/snippets.xml               |  1 +
 5 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 addons/web_editor/static/shapes/Zigs/06.svg

diff --git a/addons/web_editor/static/shapes/Zigs/06.svg b/addons/web_editor/static/shapes/Zigs/06.svg
new file mode 100644
index 00000000000..bb73075f6b9
--- /dev/null
+++ b/addons/web_editor/static/shapes/Zigs/06.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
+    <defs>
+        <svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
+            <path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z"/>
+        </svg>
+        <svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
+            <path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z"/>
+        </svg>
+    </defs>
+    <svg>
+        <use xlink:href="#zigs06_top"/>
+        <use xlink:href="#zigs06_bottom"/>
+    </svg>
+</svg>
diff --git a/addons/web_editor/static/shapes/convert.js b/addons/web_editor/static/shapes/convert.js
index 46e7d3ff991..2688f4aa86d 100644
--- a/addons/web_editor/static/shapes/convert.js
+++ b/addons/web_editor/static/shapes/convert.js
@@ -3,6 +3,8 @@
 The following script can be used to convert SVGs exported from illustrator into
 a format that's compatible with the shape system. It runs with nodejs. Some
 manual conversion may be necessary.
+
+FIXME this script is out-dated.
 */
 
 const fs = require('fs');
@@ -43,6 +45,7 @@ files.filter(f => f.endsWith('svg')).forEach(filePath => {
         nonIsometric: fileName.includes('+'),
         nonPaletteColors: nonPaletteColors && nonPaletteColors.length ? nonPaletteColors.join(' ') : null,
         containsImage: svg.includes('<image'),
+        repeatX: fileName.includes('repeatx'),
         repeatY: fileName.includes('repeaty'),
     };
     shape.optionXML = `<we-button data-shape="web_editor/${shape.page}/${shape.name}" data-select-label="${shape.page} ${shape.name}"/>`;
@@ -52,7 +55,7 @@ files.filter(f => f.endsWith('svg')).forEach(filePath => {
     } else {
         shape.size = '100% auto';
     }
-    shape.scss = `'${shape.page}/${shape.name}': ('position': ${shape.position[0]}, 'size': ${shape.size}, 'colors': (${shape.colors.join(', ')})${shape.repeatY ? ", 'repeat-y': true" : ""})`;
+    shape.scss = `'${shape.page}/${shape.name}': ('position': ${shape.position[0]}, 'size': ${shape.size}, 'colors': (${shape.colors.join(', ')})${shape.repeatX ? ", 'repeat-x': true" : ""}${shape.repeatY ? ", 'repeat-y': true" : ""})`;
     shapes.push(shape);
 });
 const xml = shapes.map(shape => shape.optionXML).join('\n');
diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index a4070004df5..dca621efeb6 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -68,9 +68,9 @@
                 background-image: url("/web_editor/shape/#{$module}/#{$shape}.svg?#{str-slice($url-params, 2)}");
                 background-position: map-get($style, 'position');
                 background-size: map-get($style, 'size');
-                @if map-get($style, 'repeat-y') {
-                    background-repeat: repeat-y;
-                }
+                background-repeat:
+                    if(map-get($style, 'repeat-x'), repeat, no-repeat)
+                    if(map-get($style, 'repeat-y'), repeat, no-repeat);
 
                 @each $mapping-name, $mapping in $extra-mappings {
                     $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, $mapping or ());
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 52d9fefdc6c..d79056ad1f1 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -783,6 +783,7 @@ $o-bg-shapes: ('web_editor': (
     'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true),
     'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1)),
     'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3)),
+    'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),
 ));
 
 @function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index a8e303a5ce7..86d3a891163 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -338,6 +338,7 @@
                     <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
                     <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
                     <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
+                    <we-button data-shape="web_editor/Zigs/06" data-select-label="Zigs 06"/>
                 </we-select-page>
                 <we-select-page string="Floating shapes">
                     <we-button data-shape="web_editor/Floats/01" data-select-label="Float 01" data-animated="true"/>