diff options
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"/> |