[FIXIMP] mobile + snippets + cleaning

Author: thjo-odoo

addons/html_builder/static/src/builder.xml

@@ -9,7 +9,7 @@
                 <button type="button"  t-on-click="() => this.redo()" class="o-hb-btn btn fa fa-repeat" t-att-disabled="!state.canRedo"/>
             </div>
             <div class="d-flex gap-1">
-                <button t-on-click="onMobilePreviewClick" type="button" class="o-hb-btn btn d-flex align-items-center" t-att-class="{active: props.isMobile, disabled: props.isMobile}" data-action="mobile" title="Mobile Preview" accesskey="m" style="--btn-font-size: 20px"><span class="fa fa-mobile" role="img"/></button>
+                <button t-on-click="onMobilePreviewClick" type="button" class="o-hb-btn btn d-flex align-items-center" t-att-class="{ active: props.isMobile }" data-action="mobile" title="Mobile Preview" accesskey="m" style="--btn-font-size: 20px"><span class="fa fa-mobile" role="img"/></button>
                 <button t-if="props.toggleCodeView" t-on-click="props.toggleCodeView"
                     class="o-hb-btn btn d-flex align-items-center" title="Code View" accesskey="d"><i class="fa fa-code"/></button>
                 <button t-if="props.toggleFullscreen" t-on-click="props.toggleFullscreen"

addons/mass_mailing/views/snippets/s_alert.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <template id="s_alert" name="Alert">
-    <div class="s_mail_alert o_mail_snippet_general pt16 pb16 mx-auto o_snippet_drop_in_only" data-name="Alert">
+    <div class="s_mail_alert o_mail_snippet_general pt16 pb16 mx-auto" data-name="Alert">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12">

addons/mass_mailing/views/snippets/s_rating.xml

@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_rating" name="Rating">
-    <div class="s_rating o_mail_snippet_general pt16 pb16 o_snippet_drop_in_only" style="padding-left: 15px; padding-right: 15px;" data-vcss="001" data-icon="fa-star">
+    <div class="s_rating o_mail_snippet_general pt16 pb16" style="padding-left: 15px; padding-right: 15px;" data-vcss="001" data-icon="fa-star">
         <h3 class="s_rating_title">Quality</h3>
         <div class="s_rating_icons o_not_editable">
             <span class="s_rating_active_icons">

addons/mass_mailing/views/snippets/s_text_highlight.xml

@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_text_highlight" name="Text Highlight">
-    <div class="s_mail_text_highlight o_mail_snippet_general o_cc o_cc3 pt32 pb32 w-100 o_snippet_drop_in_only">
+    <div class="s_mail_text_highlight o_mail_snippet_general o_cc o_cc3 pt32 pb32 w-100">
         <h3 style="text-align: center;">Text Highlight</h3>
         <p style="text-align: center;">Put the focus on what you have to say!</p>
     </div>

addons/mass_mailing_egg/static/src/builder/plugins/dropzone_plugin.js

@@ -7,9 +7,6 @@ class DropzonePlugin extends Plugin {
     resources = {
         dropzone_selector: [
             {
-                selector: ".o_mail_snippet_general",
-                dropIn: ":not(p).oe_structure:not(.oe_structure_solo), :not(.o_mega_menu):not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"
-            }, {
                 selector: ".s_mail_blockquote, .s_mail_alert, .s_rating, .s_hr, .s_mail_text_highlight",
                 dropNear: "p, h1, h2, h3, ul, ol, .row > div > img, .s_mail_blockquote, .s_mail_alert, .s_rating, .s_hr, .s_mail_text_highlight",
                 dropIn: ".content, nav",
@@ -26,7 +23,7 @@ class DropzonePlugin extends Plugin {
                 exclude: this.noOptionsSelector,
                 dropNear: "tr:has(> .row), tr:has(> .col_mv)",
             }, { // content
-                selector: ".note-editable > div:not(.o_layout), .note-editable .oe_structure > div, .oe_snippet_body",
+                selector: ".note-editable > div:not(.o_layout), .note-editable .oe_structure > *, .oe_snippet_body",
                 exclude: this.noOptionsSelector,
                 dropNear: "[data-oe-field='body_html']:not(:has(.o_layout)) > *, .oe_structure > *",
                 dropIn: "[data-oe-field='body_html']:not(:has(.o_layout)), .oe_structure",

addons/mass_mailing_egg/static/src/builder/plugins/generic_option_plugin.js

@@ -20,7 +20,6 @@ class GenericBlockOptionPlugin extends Plugin {
                 exclude: ".o_mail_snippet_general .row > div *"
             }),
         ],
-        so_snippet_addition_selector: [".o_mail_snippet_general"],
         so_content_addition_selector: [
             ".s_mail_blockquote, .s_mail_alert, .s_rating, .s_hr, .s_mail_text_highlight"
         ]

addons/mass_mailing_egg/static/src/iframe/mass_mailing_iframe.js

@@ -1,7 +1,6 @@
 import { parseHTML } from "@html_editor/utils/html";
 import {
     Component,
-    markup,
     onMounted,
     onWillDestroy,
     onWillUpdateProps,
@@ -21,7 +20,6 @@ import { Editor } from "@html_editor/editor";
 import { useThrottleForAnimation } from "@web/core/utils/timing";
 import { closestScrollableY } from "@web/core/utils/scrolling";
 import { _t } from "@web/core/l10n/translation";
-import { MassMailingMobilePreviewDialog } from "../mobile_preview_dialog/mobile_preview_dialog";
 
 const IFRAME_VALUE_SELECTOR = ".o_mass_mailing_value";
 
@@ -42,7 +40,7 @@ export class MassMailingIframe extends Component {
         readonly: { type: Boolean, optional: true },
         onEditorLoad: { type: Function, optional: true },
         onBlur: { type: Function, optional: true },
-        extraClass: { type: String, optional: true},
+        extraClass: { type: String, optional: true },
     };
     static defaultProps = {
         onEditorLoad: () => {},
@@ -109,6 +107,12 @@ export class MassMailingIframe extends Component {
         }
         const iframeResize = () => {
             const iframe = this.iframeRef.el;
+            if (this.state.isMobile) {
+                iframe.style.height = "668px"; // aspect-ratio of internal screen of /html_builder/static/img/phone.svg
+                iframe.style.width = "367px";
+                return;
+            }
+            iframe.style.width = "";
             if (this.state.showFullscreen) {
                 iframe.style.height = "100%";
             } else {
@@ -157,7 +161,9 @@ export class MassMailingIframe extends Component {
                           stickyHeight
                       }px`
                     : `${stickyHeight}px`;
-                const maxHeight = iframe.getBoundingClientRect().height;
+                const maxHeight = this.state.isMobile
+                    ? 1000
+                    : iframe.getBoundingClientRect().height;
                 const offsetHeight =
                     window.innerHeight -
                     stickyHeight -
@@ -270,6 +276,7 @@ export class MassMailingIframe extends Component {
     }
 
     getBuilderProps() {
+        // TODO EGGMAIL: Adapt mobile view
         const getExternalScrollableAncestor = () =>
             !this.state.showFullscreen &&
             this.iframeRef.el &&
@@ -286,7 +293,10 @@ export class MassMailingIframe extends Component {
             // codeView => make it an available option in the builder (optional), only in debug?
             // Plugins => provide plugins selection, properly filter excluded Plugins
             isMobile: this.state.isMobile,
-            toggleMobile: this.toggleMobile.bind(this),
+            toggleMobile: () => {
+                this.state.isMobile = !this.state.isMobile;
+                this.throttledResize();
+            },
             editableSelector: IFRAME_VALUE_SELECTOR,
             toggleFullscreen: () => {
                 this.state.showFullscreen = !this.state.showFullscreen;
@@ -317,15 +327,4 @@ export class MassMailingIframe extends Component {
         link.setAttribute("target", "_blank");
         link.setAttribute("rel", "noreferrer");
     }
-
-    toggleMobile(ev) {
-        this.state.isMobile = true;
-        this.mobilePreview = this.dialog.add(MassMailingMobilePreviewDialog, {
-            title: _t("Mobile Preview"),
-            value: markup(this.props.config.content),
-            IframeComponent: MassMailingIframe,
-        }, {
-            onClose: () => this.state.isMobile = false,
-        });
-    }
 }

addons/mass_mailing_egg/static/src/iframe/mass_mailing_iframe.scss

@@ -9,5 +9,27 @@
         overflow: hidden !important;
         transform: none !important;
         z-index: ($zindex-fixed + $zindex-modal-backdrop) / 2;
+        .o_is_mobile {
+            margin: auto;
+        }
+    }
+    .o_is_mobile {
+        background-image: url("/html_builder/static/img/phone.svg");
+        transform-style: preserve-3d;
+        width: fit-content;
+        margin-left: auto;
+        margin-right: auto;
+        padding-bottom: 36px;
+        padding-top: 60px;
+        border-radius: 2rem;
+        // Width and height of phone.svg. Needed for the builder to recompute values
+        // when switching to mobile preview, otherwise the width is 0 for a moment.
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
+                    16px 12px 32px rgba(0, 0, 0, 0.15),
+                    64px 0 64px rgba(0, 0, 0, 0.15);
+        iframe {
+            min-height: 0;
+        }
+
     }
 }

addons/mass_mailing_egg/static/src/iframe/mass_mailing_iframe.xml

@@ -4,10 +4,12 @@
             t-att-class="{'o_mass_mailing_fullscreen': state.showFullscreen}"
             t-attf-class="#{props.extraClass}">
             <div class="d-flex w-100 h-100">
-                <div class="flex-grow-1">
+                <div class="flex-grow-1" t-att-class="{'align-self-center': this.state.isMobile}">
                     <LocalOverlayContainer localOverlay="overlayRef" identifier="env.localOverlayContainerKey"/>
-                    <iframe scrolling="no" t-att-class="{ 'd-none': props.showThemeSelector or props.showCodeView }"
-                        t-ref="iframeRef" t-on-blur="onBlur"/>
+                    <div t-att-class="{ 'o_is_mobile': this.state.isMobile, 'h-100': !this.state.isMobile }">
+                        <iframe t-att-scrolling="this.state.isMobile ? '' : 'no'" t-att-class="{ 'd-none': props.showThemeSelector or props.showCodeView }"
+                            t-ref="iframeRef" t-on-blur="onBlur"/>
+                    </div>
                 </div>
                 <div t-if="!props.readonly and props.themeOptions.withBuilder and !props.showThemeSelector"
                     t-att-class="{ 'd-none': props.showCodeView }">