[IMP] website_mass_mailing, *: improve newsletter snippets

* website, mass_mailing, web_editor

This commit adds various improvements in newsletter snippets as follow:

- Improves UI for newsletter popup.

- We only had one popup for all websites. Now, we can have a different
popup for each website.

- The popup was not appearing on mobile/tablet devices. Now, in
mobile/tablet devices, the popup appears automatically after 5secs.

- Added the ability to customize the whole editor popup like any
editable area (background colors, etc).

- User needed to enable popup snippet from the settings. We removed that
setting so now popup snippet will always be available.

- Added new snippet "Newsletter block".

- Display notification after successful subscription the same way for
all newsletter snippets.

Closes https://github.com/odoo/odoo/pull/29353
task-1903256

closes odoo/odoo#29353

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>


Co-authored-by: qsm-odoo <qsm@odoo.com>

5 files changed, 26 insertions, 0 deletions

diff --git a/addons/website/static/src/img/library/marketing.jpg b/addons/website/static/src/img/library/marketing.jpg
new file mode 100644
index 00000000000..f94c9c68315
--- /dev/null
+++ b/addons/website/static/src/img/library/marketing.jpg
diff --git a/addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.png b/addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.png
new file mode 100644
index 00000000000..c0cd2562ce6
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.png
diff --git a/addons/website/static/src/img/snippets_thumbs/s_newsletter_block.png b/addons/website/static/src/img/snippets_thumbs/s_newsletter_block.png
new file mode 100644
index 00000000000..828d39b3cf2
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_newsletter_block.png
diff --git a/addons/website/static/src/js/editor/editor_menu.js b/addons/website/static/src/js/editor/editor_menu.js
index 46c3fc0b6b1..b370815ccfd 100644
--- a/addons/website/static/src/js/editor/editor_menu.js
+++ b/addons/website/static/src/js/editor/editor_menu.js
@@ -24,6 +24,7 @@ var EditorMenu = Widget.extend({
     },
     custom_events: {
         request_save: '_onSnippetRequestSave',
+        get_clean_html: '_onGetCleanHTML',
     },
 
     /**
@@ -198,6 +199,15 @@ var EditorMenu = Widget.extend({
         this.cancel(false);
     },
     /**
+     * Get the cleaned value of the editable element.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onGetCleanHTML: function (ev) {
+        ev.data.callback(this.wysiwyg.getValue({$layout: ev.data.$layout}));
+    },
+    /**
      * Snippet (menu_data) can request to save the document to leave the page
      *
      * @private
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 4fbfad8ced1..6dd3a43b390 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -339,3 +339,19 @@ table.editorbar-panel {
         cursor: pointer;
     }
 }
+
+// User modal in edit mode
+.editor_enable, .note-editable {
+    .modal:not(.o_technical_modal) {
+        top: 40px;
+        right: 0;
+        bottom: 0;
+        left: $o-we-sidebar-width;
+        width: auto;
+        height: auto;
+
+        .modal-dialog {
+            padding: 0.5rem 0; // To use more editor space if necessary
+        }
+    }
+}