From c3781985e5f00b0356d5fa3533687640580e9916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Tue, 7 Nov 2023 11:37:53 +0100
Subject: [PATCH] [FIX] web_editor, website: allow "Position" for grid image
 hover effects

In grid mode, if an image is in an image column (with the class `o_grid_
item_image`), it has the "Position" image option, allowing to select
between "cover" (= the image takes the whole grid-area, which means it
could be "cropped") and "contain" (= the image is entirely visible and
keeps its ratio in the available space). When there is a shape on the
image, this option is hidden and it is "contain" by default (or else the
shapes would be cropped). See commit [1].

Commit [2] added the "On Hover" animation option, to add hover effects
on images. In order for the effect to be applied, a shape is needed and
if no shape is specified, a dummy square shape is used instead. As there
is a shape, if it is a grid image, the "position" is forced to "contain"
(because of commit [1]).

The issue is that while it is logical for some hover effects to never be
"cover", as they could be cropped (i.e. "Dolly Zoom", "Outline", "Mirror
Blur" and any effect with a shape selected), it is not the case for the
other effects when there is no shape.

This commit improves this by allowing the "Position" option to be used
with these other hover effects when no shape is selected (so only with
the dummy square shape).

Steps to reproduce:
- In edit mode, drop the "Banner" snippet.
- Add the "Overlay" hover effect on the big image.
=> The image became "smaller" because it was forced to "contain".

[1]: https://github.com/odoo/odoo/commit/faf19ef7f87fc043fb9a814516e01b8eeafd9b61
[2]: https://github.com/odoo/odoo/commit/7f730f81ec541cc7791fc6b3fded17c838433f85

task-3568406

closes odoo/odoo#141468

Signed-off-by: Robin Lejeune (role) <role@odoo.com>
---
 .../static/src/scss/web_editor.frontend.scss          | 11 +++++++++++
 .../website/static/src/js/editor/snippets.options.js  |  8 +++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

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 0b302c1b1c0..bc467ce0bbf 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -85,6 +85,17 @@
         > img[data-shape] {
             object-fit: contain !important;
         }
+
+        // Allowing "cover" for some hover effects.
+        &:not(.o_grid_item_image_contain) > img[data-shape$="geo_square"] {
+            &:not(
+                [data-hover-effect="dolly_zoom"],
+                [data-hover-effect="outline"],
+                [data-hover-effect="image_mirror_blur"],
+            ) {
+                object-fit: cover !important;
+            }
+        }
     }
 }
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 521365d3ba1..5d2398729c8 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -4036,9 +4036,15 @@ options.registry.GridImage = options.Class.extend({
      * @override
      */
     _computeVisibility() {
+        // Special conditions for the hover effects.
+        const hasSquareShape = this.$target[0].dataset.shape === "web_editor/geometric/geo_square";
+        const effectAllowsOption = !["dolly_zoom", "outline", "image_mirror_blur"]
+            .includes(this.$target[0].dataset.hoverEffect);
+
         return this._super(...arguments)
             && !!this._getImageGridItem()
-            && !('shape' in this.$target[0].dataset);
+            && (!('shape' in this.$target[0].dataset)
+                || hasSquareShape && effectAllowsOption);
     },
     /**
      * @override