[FIX] web_editor: correctly display dialogs on mobile

Before this commit, web_editor dialog was opened inside an iframe and
not on the window.top. So dialogs didn't take all screen area.

To fix this, we open dialogs in full screen mode but we also put the
web editor in full screen to increase the size of the iframe.
Note that the initial state of the web editor (full screen or not) is
preserved when you close the modal.

We also add some fixes to make the "web_editor media dialog" responsive.

3 files changed, 116 insertions, 1 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/dialog.js
index b46e43ab051..48828b68e0c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/dialog.js
@@ -1,6 +1,7 @@
 odoo.define('wysiwyg.widgets.Dialog', function (require) {
 'use strict';
 
+var config = require('web.config');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 
@@ -15,6 +16,9 @@ var SummernoteDialog = Dialog.extend({
      */
     init: function (parent, options) {
         this.options = options || {};
+        if (config.device.isMobile) {
+            options.fullscreen = true;
+        }
         this._super(parent, _.extend({}, {
             buttons: [{
                     text: this.options.save_text || _t("Save"),
@@ -36,10 +40,19 @@ var SummernoteDialog = Dialog.extend({
             self.$el.closest('.modal').on('hidden.bs.modal', self.options.onClose);
         });
         this.on('closed', this, function () {
+            self._toggleFullScreen();
             this.trigger(this.destroyAction, this.final_data || null);
         });
     },
-
+    /**
+     * Only use on config.device.isMobile, it's used by mass mailing to allow the dialog opening on fullscreen
+     * @private
+     */
+    _toggleFullScreen: function() {
+        if (config.device.isMobile && !this.hasFullScreen) {
+            $('#iframe_target[isMobile="true"] #web_editor-top-edit .o_fullscreen').click();
+        }
+    },
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
@@ -52,6 +65,15 @@ var SummernoteDialog = Dialog.extend({
         this.destroyAction = "save";
         this.close();
     },
+    /**
+     * @override
+     * @returns {*}
+     */
+    open: function() {
+        this.hasFullScreen = $(window.top.document.body).hasClass('o_field_widgetTextHtml_fullscreen');
+        this._toggleFullScreen();
+        return this._super.apply(this, arguments);
+    },
 });
 
 return SummernoteDialog;
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 c0709a2c90e..6757797c82c 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js
@@ -4,6 +4,7 @@ odoo.define('web_editor.wysiwyg.iframe', function (require) {
 var Wysiwyg = require('web_editor.wysiwyg');
 var ajax = require('web.ajax');
 var core = require('web.core');
+var config = require('web.config');
 
 var qweb = core.qweb;
 var promiseCommon;
@@ -87,6 +88,7 @@ Wysiwyg.include({
                 }
                 delete window.top[self._onUpdateIframeId];
                 var $iframeTarget = self.$iframe.contents().find('#iframe_target');
+                $iframeTarget.attr("isMobile", config.device.isMobile);
                 $iframeTarget.find('.o_editable').html(self.$target.val());
                 self.options.toolbarHandler = $('#web_editor-top-edit', self.$iframe[0].contentWindow.document);
                 $(qweb.render('web_editor.FieldTextHtml.fullscreen'))
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 43f174e2862..d4ad43d6a89 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -401,3 +401,94 @@ a.o_underline {
         @extend %o-nocontent-empty-document;
     }
 }
+
+@include media-breakpoint-down(sm) {
+    // modal select media
+    .o_technical_modal {
+        // see template 'web_editor.FieldTextHtml.fullscreen'
+        z-index: 2001;
+
+        > .o_select_media_dialog {
+            max-width: inherit !important;
+            z-index: 2001;
+
+            .modal-dialog, .model-content {
+                height: 100%;
+            }
+
+            .modal-body {
+                .nav .nav-item.search {
+                    width: 100%;
+
+                    .btn-group {
+                        display: flex;
+                        justify-content: space-around;
+                        padding: 5px;
+                    }
+                }
+
+                // center pictogram
+                .font-icons-icons {
+                    text-align: center;
+                }
+
+                // fix search image
+                .form-control.o_we_search {
+                    height: inherit;
+                }
+
+                .form-inline {
+                    .btn-group {
+                        width: 100%;
+
+                        .btn.btn-primary:not(.dropdown-toggle) {
+                            width: 90%;
+                        }
+                    }
+
+                    > .input-group.ml-2 {
+                        margin-left: 0 !important;
+
+                        > .input-group-append {
+                            width: 100%;
+
+                            > .btn {
+                                width: 100%;
+                            }
+
+                            > .ml-2 {
+                                margin-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+
+                // attachment cells
+                .o_we_existing_attachments > .row {
+                    flex-direction: column;
+
+                    > .o_existing_attachment_cell {
+                        flex: initial;
+                        max-width: 100%;
+
+                        > .o_existing_attachment_remove {
+                            opacity: inherit;
+                            top: 10px;
+                        }
+                    }
+                }
+
+                // select media dialog unsplash error
+                #editor-media-image .unsplash_img_container .unsplash_error .mx-auto {
+                    width: 100%;
+
+                    .form-group {
+                        input.w-100 {
+                            min-width: 100px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}