From 84f6010fc11c5b3141390346657cee834e2cecc1 Mon Sep 17 00:00:00 2001 From: "Arthur Detroux (ard)" Date: Fri, 30 Sep 2022 10:11:07 +0000 Subject: [PATCH] [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 ``` 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 ``` 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) Co-authored-by: qsm-odoo --- .../static/src/js/mass_mailing_snippets.js | 57 ++++--------------- addons/mass_mailing/views/snippets_themes.xml | 54 +++++++++++++++--- addons/web_editor/views/snippets.xml | 3 +- .../website/views/snippets/s_blockquote.xml | 2 +- .../views/snippets/s_image_gallery.xml | 2 +- .../website/views/snippets/s_media_list.xml | 4 +- .../views/snippets/s_product_catalog.xml | 2 +- .../views/snippets/s_table_of_content.xml | 2 +- addons/website/views/snippets/s_timeline.xml | 2 +- addons/website/views/snippets/snippets.xml | 30 +++++++--- 10 files changed, 85 insertions(+), 73 deletions(-) diff --git a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js index cabe4eb8cc5..28ac0bd177b 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js @@ -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; - }, -}); - }); diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml index 21d34284545..c81fcec1f71 100644 --- a/addons/mass_mailing/views/snippets_themes.xml +++ b/addons/mass_mailing/views/snippets_themes.xml @@ -293,7 +293,31 @@ t-att-data-variable="radius_variable"/> + + + + + + + - - - + diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml index 250d8f9a8a0..e2324796c56 100644 --- a/addons/web_editor/views/snippets.xml +++ b/addons/web_editor/views/snippets.xml @@ -454,6 +454,7 @@ title="'Title tag' is shown as a tooltip when you hover the picture."/> +
@@ -579,7 +580,7 @@ Reset - + Reset diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml index 63700cef284..3d29ebe2032 100644 --- a/addons/website/views/snippets/s_blockquote.xml +++ b/addons/website/views/snippets/s_blockquote.xml @@ -26,7 +26,7 @@
- + diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml index c4eecc806c2..e1971a522cc 100644 --- a/addons/website/views/snippets/s_image_gallery.xml +++ b/addons/website/views/snippets/s_image_gallery.xml @@ -62,7 +62,7 @@ -