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

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;

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

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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}