From 6ce28c29db7ae4f42e05e5d7fb1a6e4e4763adbd Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Fri, 16 Oct 2020 08:55:01 +0000 Subject: [PATCH] [FIX] mass_mailing: make better link dialog for mass mailing Primary and link buttons are "hacked" by mailing themes scss. We thus have to fix their preview if possible (as they are previewed as standard bootstrap while they actually have a different look depending on the mailing theme). Note: this commit is obviously a big hack which calls for lots of improvements in master. FIXME: this only partially work due to the new editor, it has to be fixed as soon as the master becomes stable again... Part of https://github.com/odoo/odoo/pull/60308 opw-2360756 X-original-commit: 7bd7bc2513b72f5ffc006758c4bf4eb42ae6ed67 --- .../src/js/mass_mailing_link_dialog_fix.js | 79 +++++++++++++++++++ .../static/src/js/mass_mailing_snippets.js | 1 + .../static/src/js/mass_mailing_widget.js | 5 +- .../src/js/wysiwyg/widgets/link_dialog.js | 1 + .../static/src/js/wysiwyg/wysiwyg.js | 2 + 5 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js diff --git a/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js b/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js new file mode 100644 index 00000000000..4534a8fe475 --- /dev/null +++ b/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js @@ -0,0 +1,79 @@ + +odoo.define('mass_mailing.fix.LinkDialog', function (require) { +'use strict'; + +const LinkDialog = require('wysiwyg.widgets.LinkDialog'); + +/** + * Primary and link buttons are "hacked" by mailing themes scss. We thus + * have to fix their preview if possible. + */ +LinkDialog.include({ + /** + * @override + */ + start() { + const ret = this._super(...arguments); + const mailWrapperEl = this.__editorEditable.querySelector('.o_mail_wrapper'); + if (!mailWrapperEl) { + return ret; + } + + this.opened().then(() => { + // Ugly hack to show the real color for link and primary which + // depend on the mailing themes. Note: the hack is not enough as + // the mailing theme changes those colors in some environment, + // sometimes (for example 'btn-primary in this snippet looks like + // that')... we'll consider this a limitation until a master + // refactoring of those mailing themes. + this.__realMMColors = {}; + const $previewArea = $('
').addClass('o_mail_snippet_general'); + $(mailWrapperEl).closest('.o_layout').append($previewArea); + _.each(['link', 'primary', 'secondary'], type => { + const $el = $(''); + $el.appendTo($previewArea); + this.__realMMColors[type] = { + 'border-color': $el.css('border-top-color'), + 'background-color': $el.css('background-color'), + 'color': $el.css('color'), + }; + $el.remove(); + + this.$('.form-group .o_btn_preview.btn-' + type) + .css(_.pick(this.__realMMColors[type], 'background-color', 'color')); + }); + $previewArea.remove(); + + this._adaptPreview(); + }); + + return ret; + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * FIXME review once the new editor is fixed as the hack does only partially + * work in there... + * + * @override + */ + _adaptPreview() { + this._super(...arguments); + if (this.__realMMColors) { + var $preview = this.$("#link-preview a:first"); + $preview.css('border-color', ''); + $preview.css('background-color', ''); + $preview.css('color', ''); + _.each(['link', 'primary', 'secondary'], type => { + if ($preview.hasClass('btn-' + type) || type === 'link' && !$preview.hasClass('btn')) { + $preview.css(this.__realMMColors[type]); + } + }); + } + }, +}); + +}); 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 c7f3ac59d3f..1a32ffc11fa 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js @@ -138,4 +138,5 @@ snippetOptions.registry.BackgroundImage = snippetOptions.registry.BackgroundImag } } }); + }); diff --git a/addons/mass_mailing/static/src/js/mass_mailing_widget.js b/addons/mass_mailing/static/src/js/mass_mailing_widget.js index df44fb7dc55..81ce5c292e6 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_widget.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_widget.js @@ -13,7 +13,10 @@ var _t = core._t; var MassMailingFieldHtml = FieldHtml.extend({ xmlDependencies: (FieldHtml.prototype.xmlDependencies || []).concat(["/mass_mailing/static/src/xml/mass_mailing.xml"]), assetLibs: ['web_editor.compiled_assets_wysiwyg'], - jsLibs: ['/mass_mailing/static/src/js/mass_mailing_snippets.js'], + jsLibs: [ + '/mass_mailing/static/src/js/mass_mailing_snippets.js', + '/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js' + ], custom_events: _.extend({}, FieldHtml.prototype.custom_events, { snippets_loaded: '_onSnippetsLoaded', diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js index 0ad347ebfdf..6b0456ce70e 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js @@ -53,6 +53,7 @@ var LinkDialog = Dialog.extend({ // data is used in the dialog template. this.props = options.props || {}; + this.__editorEditable = this.props.__editorEditable; this.colorCombinationClass = this.props.colorCombinationClass; var allBtnClassSuffixes = /(^|\s+)btn(-[a-z0-9_-]*)?/gi; diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index 1cfc7fb86bd..fea4c277015 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -666,6 +666,8 @@ var Wysiwyg = Widget.extend({ initialClassNames: classes, colorCombinationClass: colorCombinationClass, target: target, + + __editorEditable: this.editorEditable, }, }, );