[IMP] website: split image gallery into 2 different snippets

Snippet image gallery retains only the slideshow mode and a new snippet
called 'image wall' takes the 3 other modes.

Part of https://github.com/odoo/odoo/pull/45096
task-2162952

4 files changed, 25 insertions, 3 deletions

diff --git a/addons/website/static/src/img/snippets_thumbs/s_images_wall.png b/addons/website/static/src/img/snippets_thumbs/s_images_wall.png
new file mode 100644
index 00000000000..3706ae8993f
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_images_wall.png
diff --git a/addons/website/static/src/snippets/s_image_gallery/options.js b/addons/website/static/src/snippets/s_image_gallery/options.js
index 5a1f0c01d1b..13ad9f93a15 100644
--- a/addons/website/static/src/snippets/s_image_gallery/options.js
+++ b/addons/website/static/src/snippets/s_image_gallery/options.js
@@ -368,6 +368,15 @@ options.registry.gallery = options.Class.extend({
         return this._super(...arguments);
     },
     /**
+     * @private
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'slideshow_mode_opt') {
+            return false;
+        }
+        return this._super(...arguments);
+    },
+    /**
      * Returns the images, sorted by index.
      *
      * @private
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index fbb4350517b..6f93e6f51fd 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -1,8 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_image_gallery" name="Gallery">
-    <section class="s_image_gallery o_spc-medium o_slideshow s_image_gallery_show_indicators s_nb_column_fixed s_image_gallery_indicators_rounded pt24"
+<template id="s_image_gallery" name="Image Gallery">
+    <section class="s_image_gallery o_slideshow s_image_gallery_show_indicators s_image_gallery_indicators_rounded pt24"
+             data-vcss="001"
+             data-columns="3" style="height: 500px; overflow: hidden;">
+        <div class="container">
+            <div class="alert alert-info css_editable_mode_display text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
+        </div>
+    </section>
+</template>
+
+<template id="s_images_wall" name="Images Wall">
+    <section class="s_image_gallery o_spc-small o_masonry pt24 pb24"
              data-vcss="001"
              data-columns="3" style="height: 500px; overflow: hidden;">
         <div class="container">
@@ -14,10 +24,12 @@
 <template id="s_image_gallery_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div data-js="gallery" data-selector=".s_image_gallery">
-            <we-select string="Mode">
+            <we-select string="Mode" data-dependencies="!slideshow_mode_opt">
                 <we-button data-mode="grid" data-name="grid_mode_opt">Grid</we-button>
                 <we-button data-mode="masonry" data-name="masonry_mode_opt">Masonry</we-button>
                 <we-button data-mode="nomode">Float</we-button>
+
+                <!-- Hidden option -->
                 <we-button data-mode="slideshow" data-name="slideshow_mode_opt">Slideshow</we-button>
             </we-select>
             <we-input string="Speed"
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index e1460a0771f..33a9c2b7a77 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -36,6 +36,7 @@
                     <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.png"/>
                     <t t-snippet="website.s_masonry_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_masonry_block.png"/>
                     <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
+                    <t t-snippet="website.s_images_wall" t-thumbnail="/website/static/src/img/snippets_thumbs/s_images_wall.png"/>
                     <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
                     <t t-snippet="website.s_media_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_media_list.png"/>
                     <t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.png"/>