From ebc56f7605c2e515fbcad10f44e344795132a734 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 11 Jun 2021 07:47:56 +0000
Subject: [PATCH] [IMP] web_editor: add label for animated shapes

This commit adds a little label on the top corner of animated shapes
previews.

Part of #70843
task-2319488

Related: odoo/design-themes#17
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.options.js  | 11 ++++
 .../static/src/scss/wysiwyg_snippets.scss     | 15 +++++
 addons/web_editor/views/snippets.xml          | 66 +++++++++----------
 3 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index bbf24fd5eb1..1b9f5e1e756 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -5139,6 +5139,17 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
             btnContentInnerDiv.classList.add('o_we_shape');
             btnContent.appendChild(btnContentInnerDiv);
 
+            if (btn.dataset.animated) {
+                const animatedLabelEl = document.createElement('span');
+                animatedLabelEl.classList.add('o_we_shape_animated_label');
+                const labelStr = _t("Animated");
+                animatedLabelEl.textContent = labelStr[0];
+                const spanEl = document.createElement('span');
+                spanEl.textContent = labelStr.substr(1);
+                animatedLabelEl.appendChild(spanEl);
+                btnContent.appendChild(animatedLabelEl);
+            }
+
             const {shape} = btn.dataset;
             const shapeEl = btnContent.querySelector('.o_we_shape');
             shapeEl.classList.add(`o_${shape.replace(/\//g, '_')}`);
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 11a41e07ce8..03209e32a3c 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2134,6 +2134,21 @@ we-select.o_we_shape_menu {
         }
     }
 }
+.o_we_shape_animated_label {
+    @include o-position-absolute(0, 0);
+    padding: 0 6px;
+    background: $o-we-color-success;
+    color: white;
+
+    > span {
+        @include o-text-overflow(inline-block);
+        max-width: 0;
+    }
+}
+we-button:hover .o_we_shape_animated_label > span {
+    max-width: 150px;
+    transition: max-width 0.5s ease 0s;
+}
 
 .o_we_ui_loading {
     @include o-position-absolute(0, 0, 0, 0);
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 59bf16aeb59..30fafa97b0e 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -238,24 +238,24 @@
                     <we-button data-shape="web_editor/Origins/09_001" data-select-label="Origins 07"/>
                     <we-button data-shape="web_editor/Origins/11_001" data-select-label="Origins 08"/>
                     <we-button data-shape="web_editor/Origins/14_001" data-select-label="Origins 09"/>
-                    <we-button data-shape="web_editor/Origins/16" data-select-label="Origins 10"/>
-                    <we-button data-shape="web_editor/Origins/17" data-select-label="Origins 11"/>
-                    <we-button data-shape="web_editor/Origins/18" data-select-label="Origins 12"/>
+                    <we-button data-shape="web_editor/Origins/16" data-select-label="Origins 10" data-animated="true"/>
+                    <we-button data-shape="web_editor/Origins/17" data-select-label="Origins 11" data-animated="true"/>
+                    <we-button data-shape="web_editor/Origins/18" data-select-label="Origins 12" data-animated="true"/>
                 </we-select-page>
                 <we-select-page string="Blocks &amp; Rainy">
                     <we-button data-shape="web_editor/Blocks/02_001" data-select-label="Blocks 01"/>
                     <we-button data-shape="web_editor/Blocks/01_001" data-select-label="Blocks 02"/>
                     <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
                     <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
-                    <we-button data-shape="web_editor/Rainy/01_001" data-select-label="Rainy 01"/>
-                    <we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02"/>
+                    <we-button data-shape="web_editor/Rainy/01_001" data-select-label="Rainy 01" data-animated="true"/>
+                    <we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02" data-animated="true"/>
                     <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 03"/>
                     <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 04"/>
-                    <we-button data-shape="web_editor/Rainy/10" data-select-label="Rainy 05"/>
+                    <we-button data-shape="web_editor/Rainy/10" data-select-label="Rainy 05" data-animated="true"/>
                     <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 06"/>
                     <we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 07"/>
-                    <we-button data-shape="web_editor/Rainy/03_001" data-select-label="Rainy 08"/>
-                    <we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09"/>
+                    <we-button data-shape="web_editor/Rainy/03_001" data-select-label="Rainy 08" data-animated="true"/>
+                    <we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09" data-animated="true"/>
                     <we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 10"/>  
                 </we-select-page>
                 <we-select-page string="Wavy">
@@ -263,10 +263,10 @@
                     <we-button data-shape="web_editor/Wavy/02_001" data-select-label="Wavy 02"/>
                     <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
                     <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 04"/>
-                    <we-button data-shape="web_editor/Wavy/24" data-select-label="Wavy 05"/>
-                    <we-button data-shape="web_editor/Wavy/25" data-select-label="Wavy 06"/>
-                    <we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 07"/>
-                    <we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 08"/>
+                    <we-button data-shape="web_editor/Wavy/24" data-select-label="Wavy 05" data-animated="true"/>
+                    <we-button data-shape="web_editor/Wavy/25" data-select-label="Wavy 06" data-animated="true"/>
+                    <we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 07" data-animated="true"/>
+                    <we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 08" data-animated="true"/>
                     <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 09"/>
                     <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 10"/>
                     <we-button data-shape="web_editor/Wavy/06_001" data-select-label="Wavy 11"/>
@@ -275,7 +275,7 @@
                     <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 14"/>
                     <we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 15"/>
                     <we-button data-shape="web_editor/Wavy/12_001" data-select-label="Wavy 16"/>
-                    <we-button data-shape="web_editor/Wavy/28" data-select-label="Wavy 17"/>
+                    <we-button data-shape="web_editor/Wavy/28" data-select-label="Wavy 17" data-animated="true"/>
                     <we-button data-shape="web_editor/Wavy/13_001" data-select-label="Wavy 18"/>
                     <we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 19"/>
                     <we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 20"/>
@@ -289,7 +289,7 @@
                     <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 28"/>
                 </we-select-page>
                 <we-select-page string="Blobs">
-                    <we-button data-shape="web_editor/Blobs/01_001" data-select-label="Blobs 01"/>
+                    <we-button data-shape="web_editor/Blobs/01_001" data-select-label="Blobs 01" data-animated="true"/>
                     <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
                     <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
                     <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
@@ -319,37 +319,37 @@
                 <we-select-page string="Airy &amp; Zigs">
                     <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
                     <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
-                    <we-button data-shape="web_editor/Airy/03_001" data-select-label="Airy 03"/>
-                    <we-button data-shape="web_editor/Airy/04_001" data-select-label="Airy 04"/>
-                    <we-button data-shape="web_editor/Airy/05_001" data-select-label="Airy 05"/>
+                    <we-button data-shape="web_editor/Airy/03_001" data-select-label="Airy 03" data-animated="true"/>
+                    <we-button data-shape="web_editor/Airy/04_001" data-select-label="Airy 04" data-animated="true"/>
+                    <we-button data-shape="web_editor/Airy/05_001" data-select-label="Airy 05" data-animated="true"/>
                     <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
                     <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
                     <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
                     <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
                     <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
                     <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
-                    <we-button data-shape="web_editor/Airy/12_001" data-select-label="Airy 12"/>
-                    <we-button data-shape="web_editor/Airy/13_001" data-select-label="Airy 13"/>
+                    <we-button data-shape="web_editor/Airy/12_001" data-select-label="Airy 12" data-animated="true"/>
+                    <we-button data-shape="web_editor/Airy/13_001" data-select-label="Airy 13" data-animated="true"/>
                     <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
-                    <we-button data-shape="web_editor/Zigs/01_001" data-select-label="Zigs 01"/>
-                    <we-button data-shape="web_editor/Zigs/02_001" data-select-label="Zigs 02"/>
+                    <we-button data-shape="web_editor/Zigs/01_001" data-select-label="Zigs 01" data-animated="true"/>
+                    <we-button data-shape="web_editor/Zigs/02_001" data-select-label="Zigs 02" data-animated="true"/>
                     <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-select-page>
                 <we-select-page string="Floating shapes">
-                    <we-button data-shape="web_editor/Floats/01" data-select-label="Float 01"/>
-                    <we-button data-shape="web_editor/Floats/02" data-select-label="Float 02"/>
-                    <we-button data-shape="web_editor/Floats/03" data-select-label="Float 03"/>
-                    <we-button data-shape="web_editor/Floats/04" data-select-label="Float 04"/>
-                    <we-button data-shape="web_editor/Floats/05" data-select-label="Float 05"/>
-                    <we-button data-shape="web_editor/Floats/06" data-select-label="Float 06"/>
-                    <we-button data-shape="web_editor/Floats/07" data-select-label="Float 07"/>
-                    <we-button data-shape="web_editor/Floats/08" data-select-label="Float 08"/>
-                    <we-button data-shape="web_editor/Floats/09" data-select-label="Float 09"/>
-                    <we-button data-shape="web_editor/Floats/10" data-select-label="Float 10"/>
-                    <we-button data-shape="web_editor/Floats/11" data-select-label="Float 11"/>
-                    <we-button data-shape="web_editor/Floats/12" data-select-label="Float 12"/>
+                    <we-button data-shape="web_editor/Floats/01" data-select-label="Float 01" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/02" data-select-label="Float 02" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/03" data-select-label="Float 03" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/04" data-select-label="Float 04" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/05" data-select-label="Float 05" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/06" data-select-label="Float 06" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/07" data-select-label="Float 07" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/08" data-select-label="Float 08" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/09" data-select-label="Float 09" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/10" data-select-label="Float 10" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/11" data-select-label="Float 11" data-animated="true"/>
+                    <we-button data-shape="web_editor/Floats/12" data-select-label="Float 12" data-animated="true"/>
                 </we-select-page>
             </we-select-pager>
             <we-row string=" ⌙ Flip"><!-- &emsp; -->