From 8a74c1f79340c58d62c9577f1011d9dc6a58ff70 Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Thu, 6 Oct 2022 14:08:53 +0000 Subject: [PATCH] [FIX] web_editor, mass_mailing: properly resize mass_mailing iframe The iframe in mass_mailing is self-resizing in order to avoid having two vertical scrollbar side by side. This failed since the conversion to OWL due to the vertical offset added when resizing having become insufficient. This adds a class to the element of the iframe to identify when it's in the context of mass_mailing so we can remove the overflow visible style that is not needed in this context. This allows us to remove that vertical offset altogether since the scrollbar disappeared. X-original-commit: 4f538911d68afdeca0253f15c9e8ffdbed4e995c Part-of: odoo/odoo#102734 --- .../js/mailing_mailing_view_form_full_width.js | 16 +++++++--------- .../static/src/js/mass_mailing_html_field.js | 2 ++ .../static/src/scss/mass_mailing.ui.scss | 7 ++++++- .../mass_mailing/views/mailing_mailing_views.xml | 3 +++ .../static/src/js/backend/html_field.js | 1 + .../static/src/js/wysiwyg/wysiwyg_iframe.js | 4 +++- 6 files changed, 22 insertions(+), 11 deletions(-) diff --git a/addons/mass_mailing/static/src/js/mailing_mailing_view_form_full_width.js b/addons/mass_mailing/static/src/js/mailing_mailing_view_form_full_width.js index f4a58a5e230..67c370c8e1a 100644 --- a/addons/mass_mailing/static/src/js/mailing_mailing_view_form_full_width.js +++ b/addons/mass_mailing/static/src/js/mailing_mailing_view_form_full_width.js @@ -105,12 +105,10 @@ export class MassMailingFullWidthViewController extends formView.Controller { */ _onToggleFullscreen() { const $iframeDoc = this.$iframe.contents(); - const iframeTarget = $iframeDoc.find('#iframe_target'); + const html = $iframeDoc.find('html').get(0); + html.scrollTop = 0; + html.classList.toggle('o_fullscreen'); const isFullscreen = this._isFullScreen(); - iframeTarget.css({ - display: isFullscreen ? '' : 'flex', - 'flex-direction': isFullscreen ? '' : 'column', - }); const wysiwyg = $iframeDoc.find('.note-editable').data('wysiwyg'); if (wysiwyg && wysiwyg.snippetsMenu) { // Restore the appropriate scrollable depending on the mode. @@ -118,6 +116,7 @@ export class MassMailingFullWidthViewController extends formView.Controller { wysiwyg.snippetsMenu.$scrollable = isFullscreen ? $iframeDoc.find('.note-editable') : this._$scrollable; } this._repositionMailingEditorSidebar(); + this._resizeMailingEditorIframe(); } /** * Return true if the mailing editor is in full screen mode, false @@ -138,19 +137,18 @@ export class MassMailingFullWidthViewController extends formView.Controller { * @private */ _resizeMailingEditorIframe() { - const VERTICAL_OFFSET = 12; // Vertical offset picked for visual design purposes. - const minHeight = $(window).height() - Math.abs(this.$iframe.offset().top) - (VERTICAL_OFFSET / 2); + const minHeight = $(window).height() - Math.abs(this.$iframe.offset().top); const $iframeDoc = this.$iframe.contents(); const $themeSelectorNew = $iframeDoc.find('.o_mail_theme_selector_new'); if ($themeSelectorNew.length) { - this.$iframe.height(Math.max($themeSelectorNew[0].scrollHeight + VERTICAL_OFFSET, minHeight)); + this.$iframe.height(Math.max($themeSelectorNew[0].scrollHeight, minHeight)); } else { const ref = $iframeDoc.find('#iframe_target')[0]; if (ref) { this.$iframe.css({ height: this._isFullScreen() ? $(window).height() - : Math.max(ref.scrollHeight + VERTICAL_OFFSET, minHeight), + : Math.max(ref.scrollHeight, minHeight), }); } } diff --git a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js index 644134c0478..1e2b15db610 100644 --- a/addons/mass_mailing/static/src/js/mass_mailing_html_field.js +++ b/addons/mass_mailing/static/src/js/mass_mailing_html_field.js @@ -562,6 +562,7 @@ MassMailingHtmlField.props = { ...HtmlField.props, filterTemplates: { type: Boolean, optional: true }, inlineField: { type: String, optional: true }, + iframeHtmlClass: { type: String, optional: true }, }; MassMailingHtmlField.displayName = _lt("Email"); @@ -572,6 +573,7 @@ MassMailingHtmlField.extractProps = (...args) => { ...htmlProps, filterTemplates: attrs.options.filterTemplates, inlineField: attrs.options['inline-field'], + iframeHtmlClass: attrs['iframeHtmlClass'], }; }; diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index ed24a947887..a15b62057ba 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -7,10 +7,15 @@ margin-bottom: -$o-sheet-cancel-bpadding; } -html, body { +html:not(.o_mass_mailing_iframe), body:not(.o_mass_mailing_iframe), html.o_fullscreen { overflow: visible !important; } +#iframe_target:not(.o_fullscreen) { + display: flex; + flex-direction: column; +} + .o_mail_theme_selector { > a { height: $o-we-toolbar-height; diff --git a/addons/mass_mailing/views/mailing_mailing_views.xml b/addons/mass_mailing/views/mailing_mailing_views.xml index 1dd4948176d..a1af5512eee 100644 --- a/addons/mass_mailing/views/mailing_mailing_views.xml +++ b/addons/mass_mailing/views/mailing_mailing_views.xml @@ -443,6 +443,9 @@ + + o_mass_mailing_iframe + diff --git a/addons/web_editor/static/src/js/backend/html_field.js b/addons/web_editor/static/src/js/backend/html_field.js index aef093a398c..a8f76e08830 100644 --- a/addons/web_editor/static/src/js/backend/html_field.js +++ b/addons/web_editor/static/src/js/backend/html_field.js @@ -603,6 +603,7 @@ HtmlField.extractProps = ({ attrs, field }) => { noAttachment: attrs.options['no-attachment'], inIframe: Boolean(attrs.options.cssEdit), iframeCssAssets: attrs.options.cssEdit, + iframeHtmlClass: attrs.iframeHtmlClass, snippets: attrs.options.snippets, allowCommandVideo: Boolean(attrs.options.allowCommandVideo) && (!field.sanitize || !field.sanitize_tags), mediaModalParams: { diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js index 1ab602e205f..8d2b5454aad 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js @@ -149,7 +149,9 @@ Wysiwyg.include({ }); self.$iframe[0].contentWindow.document .open("text/html", "replace") - .write(`${iframeContent}`); + .write(`${iframeContent}`); }); self.options.document = self.$iframe[0].contentWindow.document; });