*: 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>
63 lines
2.8 KiB
XML
63 lines
2.8 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
|
|
<template name="Blockquote" id="s_blockquote">
|
|
<blockquote class="s_blockquote s_blockquote_classic w-100 mx-auto o_animable blockquote">
|
|
<i class="s_blockquote_icon fa fa-1x fa-quote-left bg-o-color-2 rounded"/>
|
|
<div class="s_blockquote_content bg-100">
|
|
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
|
|
<footer class="blockquote-footer">
|
|
<img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle me-2" alt=""/>
|
|
<span class="s_blockquote_author"><b>John DOE</b> • CEO of MyCompany</span>
|
|
</footer>
|
|
</div>
|
|
</blockquote>
|
|
</template>
|
|
|
|
<template id="s_blockquote_options" inherit_id="website.snippet_options">
|
|
<xpath expr="." position="inside">
|
|
<!-- Layout -->
|
|
<div data-js="Blockquote" data-selector=".s_blockquote">
|
|
<we-select string="Display">
|
|
<we-button data-select-class="s_blockquote_classic" data-display="classic">Classic</we-button>
|
|
<we-button data-select-class="s_blockquote_cover" data-display="cover" data-name="blockquote_cover_opt">Cover</we-button>
|
|
<we-button data-select-class="s_blockquote_minimalist" data-display="minimalist" data-name="blockquote_minimalist_opt">Minimalist</we-button>
|
|
</we-select>
|
|
</div>
|
|
|
|
<!-- Color and images -->
|
|
<t t-call="website.snippet_options_background_options">
|
|
<t t-set="selector" t-value="'.s_blockquote'"/>
|
|
<t t-set="target" t-value="'.s_blockquote_content'"/>
|
|
<t t-set="with_colors" t-value="True"/>
|
|
<t t-set="with_images" t-value="True"/>
|
|
<t t-set="with_videos" t-value="True"/>
|
|
<t t-set="with_shapes" t-value="True"/>
|
|
<t t-set="with_gradients" t-value="True"/>
|
|
<t t-set="images_dependencies" t-value="'blockquote_cover_opt'"/>
|
|
</t>
|
|
|
|
<!-- Shadow -->
|
|
<div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
|
|
<t t-call="website.snippet_options_shadow_widgets"/>
|
|
</div>
|
|
|
|
<!-- Border Color -->
|
|
<div data-selector="blockquote">
|
|
<we-colorpicker string="Border Color"
|
|
data-select-style="true"
|
|
data-css-property="border-color"
|
|
data-color-prefix="border-"
|
|
data-dependencies="blockquote_minimalist_opt"/>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
|
|
<record id="website.s_blockquote_000_scss" model="ir.asset">
|
|
<field name="name">Blockquote 000 SCSS</field>
|
|
<field name="bundle">web.assets_frontend</field>
|
|
<field name="path">website/static/src/snippets/s_blockquote/000.scss</field>
|
|
</record>
|
|
|
|
</odoo>
|