[IMP] website: add dots indicators in gallery snippet options

Add dots indicators in gallery snippet options.

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

4 files changed, 31 insertions, 4 deletions

diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index 7d1ee4ea386..94e31288442 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -100,11 +100,13 @@ const GallerySliderWidget = publicWidget.Widget.extend({
             if (page <= 0) {
                 self.$prev.detach();
             } else {
+                self.$prev.removeClass('d-none');
                 self.$prev.prependTo(self.$indicator);
             }
             if (page >= nbPages - 1) {
                 self.$next.detach();
             } else {
+                self.$next.removeClass('d-none');
                 self.$next.appendTo(self.$indicator);
             }
         }
diff --git a/addons/website/static/src/snippets/s_image_gallery/001.scss b/addons/website/static/src/snippets/s_image_gallery/001.scss
index ef28b5c6d0a..9dfb81902db 100644
--- a/addons/website/static/src/snippets/s_image_gallery/001.scss
+++ b/addons/website/static/src/snippets/s_image_gallery/001.scss
@@ -185,6 +185,27 @@
                 }
             }
         }
+        &.s_image_gallery_indicators_dots {
+            .carousel {
+                ul.carousel-indicators {
+                    height: 40px;
+                    margin: auto;
+
+                    li {
+                        max-width: 8px;
+                        max-height: 8px;
+                        margin: 0 6px;
+                        border-radius: 10px;
+                        background-color: $black;
+                        background-image: none !important;
+
+                        &:not(.active) {
+                            opacity: .4;
+                        }
+                    }
+                }
+            }
+        }
 
         @extend %image-gallery-slideshow-styles;
     }
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 079a14c731d..c2fbf19762f 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -20,13 +20,13 @@
             </div>
 
             <ul class="carousel-indicators">
-                <li class="o_indicators_left text-center" aria-label="Previous" title="Previous">
+                <li class="o_indicators_left text-center d-none" aria-label="Previous" title="Previous">
                     <i class="fa fa-chevron-left"/>
                 </li>
                 <t t-foreach="images" t-as="image">
                     <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active' or None" t-attf-style="background-image: url(#{image.src})"></li>
                 </t>
-                <li class="o_indicators_right text-center" aria-label="Next" title="Next">
+                <li class="o_indicators_right text-center d-none" aria-label="Next" title="Next">
                     <i class="fa fa-chevron-right"/>
                 </li>
             </ul>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index 6f93e6f51fd..8119c3f02ad 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -63,8 +63,12 @@
                 <we-button data-select-class="s_image_gallery_indicators_arrows_rounded">Rounded</we-button>
             </we-select>
             <we-checkbox string="Image Cover" data-select-class="s_image_gallery_cover" data-dependencies="slideshow_mode_opt"/>
-            <we-checkbox string="Show Indicators" data-select-class="s_image_gallery_show_indicators" data-dependencies="slideshow_mode_opt"/>
-            <we-checkbox string="Rounded Indicators" data-select-class="s_image_gallery_indicators_rounded" data-dependencies="slideshow_mode_opt"/>
+            <we-select string="Indicators" data-dependencies="slideshow_mode_opt">
+                <we-button data-select-class="">None</we-button>
+                <we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_dots">Dots</we-button>
+                <we-button data-select-class="s_image_gallery_show_indicators">Squared Miniatures</we-button>
+                <we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_rounded">Rounded Miniatures</we-button>
+            </we-select>
             <t t-call="website.snippet_options_border_widgets">
                 <t t-set="apply_to" t-valuef="img"/>
                 <t t-set="so_rounded_no_dependencies" t-value="true"/>