From 5a6dc7b596e21f460974da2343afd5f77fc175f7 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 15 Sep 2020 10:32:15 +0000
Subject: [PATCH] [FIX] web_editor, website: scroll effect dropdown

Fix the design. Trig animations hovering any part of the button rather
than its inner image only.

task-2335267

Part-of: #57942
X-original-commit: 55424d41b355ae1303f040bdd953e357365289f3
---
 .../static/src/js/editor/snippets.options.js         |  6 +++---
 addons/website/static/src/scss/website.wysiwyg.scss  | 12 ++++++++++++
 addons/website/views/snippets/snippets.xml           | 12 ++++++------
 3 files changed, 21 insertions(+), 9 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 54cef702bc2..40cfe0ebf93 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -234,12 +234,12 @@ const UserValueWidget = Widget.extend({
             const buildImgExtensionSwitcher = (from, to) => {
                 const regex = new RegExp(`${from}$`, 'i');
                 return ev => {
-                    const img = ev.currentTarget;
+                    const img = ev.currentTarget.getElementsByTagName("img")[0];
                     img.src = img.src.replace(regex, to);
                 };
             };
-            this.$el.on('mouseenter.img_animate', 'img', buildImgExtensionSwitcher('png', 'gif'));
-            this.$el.on('mouseleave.img_animate', 'img', buildImgExtensionSwitcher('gif', 'png'));
+            this.$el.on('mouseenter.img_animate', buildImgExtensionSwitcher('png', 'gif'));
+            this.$el.on('mouseleave.img_animate', buildImgExtensionSwitcher('gif', 'png'));
         }
     },
     /**
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index c6f0a29d9d6..a2f9a3c394b 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -120,6 +120,18 @@ $i: 1;
         }
     }
 
+    we-select.o_scroll_effects_selector we-button {
+        padding-top: $o-we-item-spacing;
+        padding-bottom: $o-we-item-spacing;
+
+        img {
+            max-height: 80px;
+            width: auto;
+            margin-right: $o-we-item-spacing;
+            margin-left: $o-we-item-spacing * .5;
+        }
+    }
+
     //----------------------------------------------------------------------
     // 'Options' Tab Specific Components
     //----------------------------------------------------------------------
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 2b514d7e478..6d43458fa7d 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -633,7 +633,7 @@
          data-no-check="true"
          groups="website.group_website_designer">
 
-        <we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt">
+        <we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt" class="o_scroll_effects_selector">
             <t t-set="header_effect_standard_label">Standard</t>
             <t t-set="header_effect_scroll_label">Scroll</t>
             <t t-set="header_effect_fixed_label">Fixed</t>
@@ -646,7 +646,7 @@
                        data-select-class="o_header_standard"
                        data-customize-website-views="website.header_visibility_standard"
                        data-img="/website/static/src/img/snippets_options/header_effect_standard.png">
-                <small t-esc='header_effect_standard_label'/>
+                <span t-esc='header_effect_standard_label'/>
             </we-button>
             <we-button id="option_header_effect_scroll"
                        t-att-data-select-label="header_effect_scroll_label"
@@ -655,7 +655,7 @@
                        data-select-class=""
                        data-customize-website-views=""
                        data-img="/website/static/src/img/snippets_options/header_effect_scroll.png">
-                <small t-esc='header_effect_scroll_label'/>
+                <span t-esc='header_effect_scroll_label'/>
             </we-button>
             <we-button id="option_header_effect_fixed"
                        t-att-data-select-label="header_effect_fixed_label"
@@ -664,7 +664,7 @@
                        data-select-class="o_header_fixed"
                        data-customize-website-views="website.header_visibility_fixed"
                        data-img="/website/static/src/img/snippets_options/header_effect_fixed.png">
-                <small t-esc='header_effect_fixed_label'/>
+                <span t-esc='header_effect_fixed_label'/>
             </we-button>
             <we-button id="option_header_effect_disappears"
                        t-att-data-select-label="header_effect_disappears_label"
@@ -673,7 +673,7 @@
                        data-select-class="o_header_disappears"
                        data-customize-website-views="website.header_visibility_disappears"
                        data-img="/website/static/src/img/snippets_options/header_effect_disappears.png">
-                <small t-esc="header_effect_disappears_label" />
+                <span t-esc="header_effect_disappears_label" />
             </we-button>
             <we-button id="option_header_effect_fade_out"
                        t-att-data-select-label="header_effect_fadeout_label"
@@ -682,7 +682,7 @@
                        data-select-class="o_header_fade_out"
                        data-customize-website-views="website.header_visibility_fade_out"
                        data-img="/website/static/src/img/snippets_options/header_effect_fade_out.png">
-               <small t-esc='header_effect_fadeout_label'/>
+               <span t-esc='header_effect_fadeout_label'/>
             </we-button>
         </we-select>
     </div>