[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.

Part of https://github.com/odoo/odoo/pull/60203
opw-2360756

X-original-commit: 7bd7bc2513b72f5ffc006758c4bf4eb42ae6ed67

3 files changed, 79 insertions, 1 deletions

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..6b46340b4eb
--- /dev/null
+++ b/addons/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js
@@ -0,0 +1,75 @@
+
+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);
+        if (!$(this.editable).find('.o_mail_wrapper').length) {
+            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 = $('<div/>').addClass('o_mail_snippet_general');
+            $(this.editable).find('.o_layout').append($previewArea);
+            _.each(['link', 'primary', 'secondary'], type => {
+                const $el = $('<a href="#" class="btn btn-' + type + '"/>');
+                $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
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _adaptPreview() {
+        this._super(...arguments);
+        if (this.__realMMColors) {
+            var $preview = this.$("#link-preview");
+            $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 407416f3547..72832b02357 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 @@ options.registry.BackgroundImage = options.registry.BackgroundImage.extend({
         }
     }
 });
+
 });
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 55431e65f07..4172bca0650 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_widget.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_widget.js
@@ -12,7 +12,9 @@ var _t = core._t;
 
 var MassMailingFieldHtml = FieldHtml.extend({
     xmlDependencies: (FieldHtml.prototype.xmlDependencies || []).concat(["/mass_mailing/static/src/xml/mass_mailing.xml"]),
-    jsLibs: [],
+    jsLibs: [
+        '/mass_mailing/static/src/js/mass_mailing_link_dialog_fix.js',
+    ],
 
     custom_events: _.extend({}, FieldHtml.prototype.custom_events, {
         snippets_loaded: '_onSnippetsLoaded',