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

[FIX] mass_mailing, *: fix options conflicts between modules

Browse Source 
*: 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>
This commit is contained in:
Arthur Detroux (ard)
2022-10-04 17:01:17 +02:00
committed by qsm-odoo
co-authored by qsm-odoo
parent eeecb6f7c0
commit 84f6010fc1
10 changed files with 85 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mass_mailing/static/src/js/mass_mailing_snippets.js
+10 -47
View File
@@ -95,36 +95,17 @@ options.registry.mass_mailing_sizing_x = options.Class.extend({
// Adding compatibility for the outlook compliance of mailings.
// Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42
options.registry.BackgroundImage = options.registry.BackgroundImage.extend({
options.registry.MassMailingBackgroundImage = options.registry.BackgroundImage.extend({
start: function () {
this._super();
if (this.snippets && this.snippets.split('.')[0] === "mass_mailing") {
var $table_target = this.$target.find('table:first');
if ($table_target.length) {
this.$target = $table_target;
}
const $table_target = this.$target.find('table:first');
if ($table_target.length) {
this.$target = $table_target;
}
}
});
options.registry.ImageTools.include({
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* @override
*/
async updateUIVisibility() {
await this._super(...arguments);
// Transform is _very_ badly supported in mail clients. Hide the option.
const transformEl = this.el.querySelector('[data-transform="true"]');
if (transformEl) {
transformEl.classList.toggle('d-none', true);
}
},
options.registry.MassMailingImageTools = options.registry.ImageTools.extend({
//--------------------------------------------------------------------------
// Private
@@ -138,14 +119,11 @@ options.registry.ImageTools.include({
return color;
}
const doc = this.options.document;
if (doc && doc.querySelector('.o_mass_mailing_iframe') && !ColorpickerWidget.isCSSColor(color)) {
const tempEl = doc.body.appendChild(doc.createElement('div'));
tempEl.className = `bg-${color}`;
const colorValue = window.getComputedStyle(tempEl).getPropertyValue("background-color").trim();
tempEl.parentNode.removeChild(tempEl);
return ColorpickerWidget.normalizeCSSColor(colorValue).replace(/"/g, "'");
}
return this._super(...arguments);
const tempEl = doc.body.appendChild(doc.createElement('div'));
tempEl.className = `bg-${color}`;
const colorValue = window.getComputedStyle(tempEl).getPropertyValue("background-color").trim();
tempEl.parentNode.removeChild(tempEl);
return ColorpickerWidget.normalizeCSSColor(colorValue).replace(/"/g, "'");
},
});
@@ -402,19 +380,4 @@ options.registry.DesignTab = options.Class.extend({
},
});
options.registry.Parallax = options.Class.extend({
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
async _computeWidgetVisibility(widgetName, params) {
// Parallax is not supported in emails.
return false;
},
});
});
addons/mass_mailing/views/snippets_themes.xml
+45 -9
View File
@@ -293,7 +293,31 @@
t-att-data-variable="radius_variable"/>
</template>
<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options" primary="True">
<xpath expr="//div[@data-js='BackgroundImage']" position="attributes">
<attribute name="data-js">MassMailingBackgroundImage</attribute>
</xpath>
</template>
<template id="snippet_options_extra_shapes" inherit_id="web_editor.snippet_options">
<div><!-- TODO remove me in 16.0 post-backport --></div>
</template>
<template id="snippet_options_image_styles" inherit_id="web_editor.snippet_options">
<div><!-- TODO remove me in 16.0 post-backport --></div>
</template>
<!-- Mass Mailing Snippet Options -->
<template id="snippet_options" inherit_id="web_editor.snippet_options" primary="True">
<!-- =================================================================== -->
<!-- Modify generic snippet options -->
<!-- =================================================================== -->
<xpath expr="//t[@t-set='no_animations']" position="attributes">
<attribute name="t-value">True</attribute>
</xpath>
<!-- Extra shapes -->
<xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="inside">
<we-button data-set-img-shape="mass_mailing/basic/circle" data-select-label="Circle"/>
<we-button data-set-img-shape="mass_mailing/basic/triangle" data-select-label="Triangle"/>
@@ -302,9 +326,11 @@
<xpath expr="//div[hasclass('o_we_image_shape')]//we-select-page[hasclass('o_we_basic_shapes')]" position="attributes">
<attribute name="t-if">True</attribute>
</xpath>
</template>
<template id="snippet_options_image_styles" inherit_id="web_editor.snippet_options">
<!-- Image styles -->
<!-- TODO review to only modify what's really necessary and potentially -->
<!-- make the changes in web_editor directly so that website can benefit -->
<!-- from it. -->
<xpath expr="//div[hasclass('o_we_image_options')]" position="replace">
<div data-selector="span.fa, i.fa, img">
<we-select string="Alignment" data-state-to-first-class="true">
@@ -333,12 +359,19 @@
</we-row>
</div>
</xpath>
</template>
<!-- Snippet themes Options -->
<template id="snippet_options">
<t t-set="no_animations" t-value="True"/>
<t t-call="mass_mailing.snippet_options_extra_shapes"/>
<t t-out="0"/>
<!-- Transform is _very_ badly supported in mail clients -->
<xpath expr="//we-button[@data-name='image_transform_opt']" position="replace" />
<xpath expr="//div[@data-js='ImageTools']" position="attributes">
<attribute name="data-js">MassMailingImageTools</attribute>
</xpath>
<!-- =================================================================== -->
<!-- Adding mass_mailing specific snippet options -->
<!-- =================================================================== -->
<xpath expr="." position="inside">
<!-- Border | Columns -->
<div data-js="Box"
@@ -471,7 +504,7 @@
</div>
<!-- Allow changing background images in Masonry and Cover -->
<t t-call="web_editor.snippet_options_background_options">
<t t-call="mass_mailing.snippet_options_background_options">
<t t-set="selector" t-value="'.s_masonry_block .row > div, .s_cover .oe_img_bg'"/>
<t t-set="with_images" t-value="True"/>
<t t-set="with_videos" t-value="false"/>
@@ -793,5 +826,8 @@
<we-button data-customize-css-property="100%">100%</we-button>
</we-select>
</div>
</xpath>
</template>
</odoo>
addons/web_editor/views/snippets.xml
+2 -1
View File
@@ -454,6 +454,7 @@
title="'Title tag' is shown as a tooltip when you hover the picture."/>
</div>
<t t-set="no_animations" t-value="False"/>
<div data-js="ImageTools"
data-selector="img">
<div class="o_we_image_shape">
@@ -579,7 +580,7 @@
<we-button class="ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
Reset
</we-button>
<we-button class="fa fa-fw fa-object-ungroup" data-name="image_transform_opt" data-transform="true" data-no-preview="true" title="Transform the picture" t-att-data-dependencies="image_transform_dependencies"/>
<we-button class="fa fa-fw fa-object-ungroup" data-name="image_transform_opt" data-transform="true" data-no-preview="true" title="Transform the picture"/>
<we-button class="ms-0 border-start-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
Reset
</we-button>
addons/website/views/snippets/s_blockquote.xml
+1 -1
View File
@@ -26,7 +26,7 @@
</div>
<!-- Color and images -->
<t t-call="web_editor.snippet_options_background_options">
<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"/>
addons/website/views/snippets/s_image_gallery.xml
+1 -1
View File
@@ -62,7 +62,7 @@
</template>
<template id="s_image_gallery_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
<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>
addons/website/views/snippets/s_media_list.xml
+2 -2
View File
@@ -46,7 +46,7 @@
</template>
<template id="s_media_list_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_media_list">
<we-row string="Media">
<we-button data-add-item="" data-item=".s_media_list_item:last" data-select-item="" data-no-preview="true" class="o_we_bg_brand_primary">
@@ -56,7 +56,7 @@
</div>
</xpath>
<xpath expr="." position="inside">
<t t-call="web_editor.snippet_options_background_options">
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="'.s_media_list_item'"/>
<t t-set="target" t-value="'&gt; .row'"/>
<t t-set="with_colors" t-value="True"/>
addons/website/views/snippets/s_product_catalog.xml
+1 -1
View File
@@ -66,7 +66,7 @@
</template>
<template id="s_product_catalog_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems"
data-selector=".s_product_catalog">
<t t-call="website.s_product_catalog_add_product_widget">
addons/website/views/snippets/s_table_of_content.xml
+1 -1
View File
@@ -47,7 +47,7 @@
</template>
<template id="s_table_of_content_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_table_of_content">
<we-row string="Content">
<we-button data-add-item="" data-item=".s_table_of_content_main > section:last" data-select-item="" data-no-preview="true" class="o_we_bg_brand_primary">
addons/website/views/snippets/s_timeline.xml
+1 -1
View File
@@ -53,7 +53,7 @@
</template>
<template id="s_timeline_options" inherit_id="website.snippet_options">
<xpath expr="//t[@t-call='web_editor.snippet_options_background_options']" position="before">
<xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
<div data-js="MultipleItems" data-selector=".s_timeline">
<we-row string="Year">
<we-button data-add-item="" data-item=".s_timeline_row:first" data-select-item="" data-add-before="true" data-no-preview="true" class="o_we_bg_brand_primary">
addons/website/views/snippets/snippets.xml
+21 -9
View File
@@ -186,7 +186,7 @@
</xpath>
</template>
<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options" primary="True">
<xpath expr="//we-button[@data-toggle-bg-image]" position="after">
<t t-if="with_videos">
<we-button title="Video" class="fa fa-fw fa-film"
@@ -335,10 +335,20 @@
data-allow-delete="true" data-fakem2m="true"/>
</template>
<template id="snippet_options">
<t t-call="web_editor.snippet_options">
<t t-set="image_transform_dependencies" t-valuef="no_animation_opt"/>
</t>
<template id="snippet_options" inherit_id="web_editor.snippet_options" primary="True">
<!-- =================================================================== -->
<!-- Modify generic snippet options -->
<!-- =================================================================== -->
<xpath expr="//we-button[@data-name='image_transform_opt']" position="attributes">
<attribute name="data-dependencies">no_animation_opt</attribute>
</xpath>
<!-- =================================================================== -->
<!-- Adding website specific snippet options -->
<!-- =================================================================== -->
<xpath expr="." position="inside">
<!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
<div data-js="Box"
@@ -412,7 +422,7 @@
<!-- Carousel | .s_carousel | .s_quotes_carousel -->
<!-- Dedicated colorpicker so that there is not 3 level of
o_colored_level. Use inline-style color for the same reason. -->
<t t-call="web_editor.snippet_options_background_options">
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="'section'"/>
<t t-set="target" t-value="'> .carousel'"/>
<t t-set="with_colors" t-value="True"/>
@@ -552,7 +562,7 @@
<t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax'"/>
<t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map, .s_map, [data-snippet] :not(.oe_structure) > [data-snippet], .s_masonry_block, .s_masonry_block .s_col_no_resize'"/>
<t t-call="web_editor.snippet_options_background_options">
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="both_bg_color_image_selector"/>
<t t-set="exclude" t-value="both_bg_color_image_exclude"/>
<t t-set="with_colors" t-value="True"/>
@@ -563,7 +573,7 @@
<t t-set="with_gradients" t-value="True"/>
</t>
<t t-call="web_editor.snippet_options_background_options">
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="only_bg_color_selector"/>
<t t-set="exclude" t-value="only_bg_color_exclude"/>
<t t-set="with_colors" t-value="True"/>
@@ -572,7 +582,7 @@
<t t-set="with_gradients" t-value="True"/>
</t>
<t t-call="web_editor.snippet_options_background_options">
<t t-call="website.snippet_options_background_options">
<t t-set="selector" t-value="only_bg_image_selector"/>
<t t-set="exclude" t-value="only_bg_image_exclude"/>
<t t-set="with_colors" t-value="False"/>
@@ -1591,5 +1601,7 @@
<div data-selector="#wrapwrap > main" data-no-check="true" data-js="SwitchableViews">
<!-- Options will be populated by JS -->
</div>
</xpath>
</template>
</odoo>