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

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

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