[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

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 = $('<div/>').addClass('o_mail_snippet_general');
+            $(mailWrapperEl).closest('.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
+    //--------------------------------------------------------------------------
+
+    /**
+     * 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]);
+                }
+            });
+        }
+    },
+});
+
+});

addons/mass_mailing/static/src/js/mass_mailing_snippets.js

@@ -138,4 +138,5 @@ snippetOptions.registry.BackgroundImage = snippetOptions.registry.BackgroundImag
         }
     }
 });
+
 });

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',

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;

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,
                 },
             },
         );