pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fb6d300a6e83fafe97002f34fbe0ec00a77248aa
odoo_source/addons/website/views/snippets/s_image_gallery.xml
T
Arthur Detroux (ard)andqsm-odoo 84f6010fc1 [FIX] mass_mailing, *: fix options conflicts between modules 
*: web_editor, website

Prior to this commit, the template structure for declaring the snippet
options used in a specific context (website, mass_mailing, ...) made it
hard to easily modify SnippetOptions defined in web_editor.

Indeed, the structure was as below
```xml
<template>
    <t t-call="web_editor.snippet_options" />
    ... Additional Options ...
</template>
```
If someone wanted to alter the behaviour of an option from web_editor
for their module, they had 2 solutions

- To extract that option inside another template, extend that template
inside their own module, remove its call from web_editor and instead
call manually the option inside each module (preferred method)

- To impact the web_editor template directly with an extension instead
of a new primary template or override JS options using include or
replacing an option inside the registry.

The second solution was often used but created extra code to make sure
that other modules were not impacted... and it was often not properly
done. For example:

- [1] and [2] introduced javascript code inside the web_editor options
  and isolating it by checking if they are in fact, inside mass_mailing.

- [3] adds code in mass_mailing mentioning JS classes of website, and
  actually broke parallax for website (after [5]).

- [4] broke the image transform option for website (after [5]).

- [6] added some shapes for mass mailing images but ended up adding them
  for the website builder too.

- [7] created different images options for mass_mailing... but ended up
  impacting website options too. Half of those can actually either be
  put in web_editor to improve everything or just in mass_mailing to not
  break the website.

- ...

This commit tries to fix everything "the right way" in master (and will
be backported for the recent 16.0). Other stable fixes will need to be
made to restore the website options in a stable way.

To fix that, this commit changes the structure to
```xml
<template inherit_id="web_editor.snippet_options" primary="True">
    <xpath ...>
        ... Change existing options ...
    </xpath>
    <xpath expr="." position="inside">
        ... Additional options ...
    </xpath>
</template>
```
This allows each module to modify the existing web_editor templates
without impacting it and each other. They can even change the JS
behaviour by using an XPath to replace the data-js of an option, and
changing it to their own extended version of the JS option.

[1]: https://github.com/odoo/odoo/commit/f296992317e96562c66bd7ad59a5080d6c551ed5#diff-df5e4ff426027c53ebe6e25c25820fb92237c17a036f6202a93e5ca681ec8c16R134-R138
[2]: https://github.com/odoo/odoo/commit/cd403480f90cf7103651f3be818a14b06d3c73ca#diff-df5e4ff426027c53ebe6e25c25820fb92237c17a036f6202a93e5ca681ec8c16R175
[3]: https://github.com/odoo/odoo/commit/e9237ae8004502a3071e8ceb132d9dac11fe00b3#diff-df5e4ff426027c53ebe6e25c25820fb92237c17a036f6202a93e5ca681ec8c16R372
[4]: https://github.com/odoo/odoo/commit/ff422df49201be6ed7baa11ef3deb5b9a41042a7
[5]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
[6]: https://github.com/odoo/odoo/commit/24a4c7f897d4db6bdf0f3cbfc91a3ce7351241a2
[7]: https://github.com/odoo/odoo/commit/d0c2d8e9a1436a8eaf263797c790329f81d7615b

closes odoo/odoo#99850

Related: odoo/design-themes#597
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
2022-10-04 17:01:17 +02:00

159 lines
9.5 KiB
XML
Raw Blame History

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<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 id="slideshow_sample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="0" style="margin: 0 12px;">
<div class="carousel-inner" style="padding: 0;">
<div class="carousel-item active">
<img class="img img-fluid d-block" src="/web/image/website.library_image_08" data-name="Image" data-index="0"/>
</div>
<div class="carousel-item">
<img class="img img-fluid d-block" src="/web/image/website.library_image_03" data-name="Image" data-index="1"/>
</div>
<div class="carousel-item">
<img class="img img-fluid d-block" src="/web/image/website.library_image_02" data-name="Image" data-index="2"/>
</div>
</div>
<ul class="carousel-indicators">
<li class="o_indicators_left text-center d-none" aria-label="Previous" title="Previous">
<i class="fa fa-chevron-left"/>
</li>
<li data-bs-target="#slideshow_sample" data-bs-slide-to="0" style="background-image: url(/web/image/website.library_image_08)" class="active"/>
<li data-bs-target="#slideshow_sample" data-bs-slide-to="1" style="background-image: url(/web/image/website.library_image_03)"/>
<li data-bs-target="#slideshow_sample" data-bs-slide-to="2" style="background-image: url(/web/image/website.library_image_02)"/>
<li class="o_indicators_right text-center d-none" aria-label="Next" title="Next">
<i class="fa fa-chevron-right"/>
</li>
</ul>
<a class="carousel-control-prev o_we_no_overlay" href="#slideshow_sample" data-bs-slide="prev" aria-label="Previous" title="Previous">
<span class="fa fa-chevron-left fa-2x text-white"/>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next o_we_no_overlay" href="#slideshow_sample" data-bs-slide="next" aria-label="Next" title="Next">
<span class="fa fa-chevron-right fa-2x text-white"/>
<span class="visually-hidden">Next</span>
</a>
</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="overflow: hidden;">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="o_masonry_col o_snippet_not_selectable col-lg-4">
<img class="img img-fluid d-block" src="/web/image/website.library_image_03" data-index="0" data-name="Image"/>
<img class="img img-fluid d-block" src="/web/image/website.library_image_10" data-index="3" data-name="Image"/>
</div>
<div class="o_masonry_col o_snippet_not_selectable col-lg-4">
<img class="img img-fluid d-block" src="/web/image/website.library_image_13" data-index="1" data-name="Image"/>
<img class="img img-fluid d-block" src="/web/image/website.library_image_05" data-index="4" data-name="Image"/>
</div>
<div class="o_masonry_col o_snippet_not_selectable col-lg-4">
<img class="img img-fluid d-block" src="/web/image/website.library_image_14" data-index="2" data-name="Image"/>
<img class="img img-fluid d-block" src="/web/image/website.library_image_16" data-index="5" data-name="Image"/>
</div>
</div>
</div>
</section>
</template>
<template id="s_image_gallery_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="gallery" data-selector=".s_image_gallery">
<we-row string="Images">
<we-button class="o_we_bg_success" data-add-images="true" data-no-preview="true">Add</we-button>
<we-button class="o_we_bg_danger" data-remove-all-images="true" data-no-preview="true">Remove all</we-button>
</we-row>
</div>
</xpath>
<xpath expr="." position="inside">
<div data-js="gallery" data-selector=".s_image_gallery">
<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"
data-dependencies="slideshow_mode_opt"
data-apply-to=".carousel:first"
data-select-data-attribute="0s" data-attribute-name="interval"
data-unit="s" data-save-unit="ms" data-step="0.1"/>
<we-select string="Columns" data-dependencies="masonry_mode_opt, grid_mode_opt">
<we-button data-columns="1">1</we-button>
<we-button data-columns="2">2</we-button>
<we-button data-columns="3">3</we-button>
<we-button data-columns="4">4</we-button>
<we-button data-columns="6">6</we-button>
<we-button data-columns="12">12</we-button>
</we-select>
<we-range string="Images Spacing"
data-dependencies="!slideshow_mode_opt"
data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big"/>
<we-select string="Styling" data-apply-to="img">
<we-button data-select-class="">Standard</we-button>
<we-button data-select-class="img-thumbnail">Thumbnails</we-button>
<we-button data-select-class="rounded-pill">Circle</we-button>
<we-button data-select-class="shadow">Shadows</we-button>
</we-select>
<we-select string="Arrows" data-dependencies="slideshow_mode_opt">
<we-button data-select-class="">Standard</we-button>
<we-button data-select-class="s_image_gallery_indicators_arrows_boxed">Boxed</we-button>
<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-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"/>
</t>
</div>
<div data-js="gallery_img" data-selector=".s_image_gallery img">
<we-row string="Re-order" data-no-preview="true">
<we-button class="fa fa-fw fa-angle-double-left" title="Move to first" data-position="first"/>
<we-button class="fa fa-fw fa-angle-left" title="Move to previous" data-position="prev"/>
<we-button class="fa fa-fw fa-angle-right" title="Move to next" data-position="next"/>
<we-button class="fa fa-fw fa-angle-double-right" title="Move to last" data-position="last"/>
</we-row>
</div>
</xpath>
</template>
<record id="website.s_image_gallery_000_js" model="ir.asset">
<field name="name">Image gallery 000 JS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/000.js</field>
</record>
<record id="website.s_image_gallery_000_scss" model="ir.asset">
<field name="name">Image gallery 000 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/000.scss</field>
<field name="active" eval="False"/>
</record>
<record id="website.s_image_gallery_001_scss" model="ir.asset">
<field name="name">Image gallery 001 SCSS</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/001.scss</field>
</record>
<record id="website.s_image_gallery_000_xml" model="ir.asset">
<field name="name">Image gallery 000 XML</field>
<field name="bundle">web.assets_frontend</field>
<field name="path">website/static/src/snippets/s_image_gallery/000.xml</field>
</record>
</odoo>
Reference in New Issue View Git Blame Copy Permalink