pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Add dots indicators in gallery snippet options.

Part of https://github.com/odoo/odoo/pull/45096
task-2162952
This commit is contained in:
Benjamin Vray
2020-07-17 11:28:11 +00:00
committed by qsm-odoo
parent f626130df9
commit 316ceaf4d8
4 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_image_gallery/000.js
+2
View File
@@ -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);
}
}
addons/website/static/src/snippets/s_image_gallery/001.scss
+21
View File
@@ -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;
}
addons/website/static/src/xml/website.gallery.xml
+2 -2
View File
@@ -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>
addons/website/views/snippets/s_image_gallery.xml
+6 -2
View File
@@ -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"/>