[IMP] web_editor, website, *: move text tools in snippets panel

*: website_event, test_website

This commit is a series of hacks. The goal is to move the summernote
text tools to the editor panel for the website editor. All the code
to use the text tools in a top bar is kept (mass mailing, etc) and the
text tools are placed at the right place for website in an ugly way.

This is obviously temporary, until we can implement those text tools
more generically and in a better way thanks to the new editor.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

closes odoo/odoo#57975

Related: odoo/design-themes#364
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

5 files changed, 77 insertions, 23 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 718c2407e57..e7d685262bc 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -888,6 +888,7 @@ var SnippetsMenu = Widget.extend({
 
         this._notActivableElementsSelector = [
             '#web_editor-top-edit',
+            '.o_we_website_top_actions',
             '#oe_snippets',
             '#oe_manipulators',
             '.o_technical_modal',
@@ -926,6 +927,9 @@ var SnippetsMenu = Widget.extend({
         this.customizePanel = document.createElement('div');
         this.customizePanel.classList.add('o_we_customize_panel', 'd-none');
 
+        this.textEditorPanelEl = document.createElement('div');
+        this.textEditorPanelEl.classList.add('o_we_snippet_text_tools');
+
         this.invisibleDOMPanelEl = document.createElement('div');
         this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel');
         this.invisibleDOMPanelEl.appendChild(
@@ -1651,6 +1655,7 @@ var SnippetsMenu = Widget.extend({
         // Add the computed template and make elements draggable
         this.$el.html($html);
         this.$el.append(this.customizePanel);
+        this.$el.append(this.textEditorPanelEl);
         this.$el.append(this.invisibleDOMPanelEl);
         this._makeSnippetDraggable(this.$snippets);
         this._disableUndroppableSnippets();
diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js
index 01269589811..f1145c8d8c1 100644
--- a/addons/web_editor/static/src/js/editor/summernote.js
+++ b/addons/web_editor/static/src/js/editor/summernote.js
@@ -984,12 +984,12 @@ renderer.tplButtonInfo.color = function (lang, options) {
         value: '{"backColor":"#B35E9B"}'
     });
     var foreColorButton = renderer.getTemplate().button(foreColorButtonLabel, {
-        className: 'note-fore-color-preview mx-1',
+        className: 'note-fore-color-preview',
         title: lang.color.foreground,
         dropdown: renderer.getTemplate().dropdown('<li><div data-event-name="foreColor" class="colorPalette"/></li>'),
     });
     var backColorButton = renderer.getTemplate().button(backColorButtonLabel, {
-        className: 'note-back-color-preview mx-1',
+        className: 'note-back-color-preview',
         title: lang.color.background,
         dropdown: renderer.getTemplate().dropdown('<li><div data-event-name="backColor" class="colorPalette"/></li>'),
     });
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
index 9b4b9f84222..73801dc93f5 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js
@@ -36,11 +36,17 @@ Wysiwyg.include({
      * @private
      */
     _relocateEditorBar: function () {
+        if (!this.options.toolbarHandler.length) {
+            this.options.toolbarHandler = $('.o_we_snippet_text_tools');
+        }
         this.options.toolbarHandler.append(this.editor.$el);
+
         // TODO the next four lines are a huge hack: since the editor.$el
         // is repositioned, the snippetsMenu elements are not at the
-        // correct position anymore... the whole logic has to be refactored.
-        if (this.editor.snippetsMenu) {
+        // correct position anymore if it was repositioned outside of it...
+        // the whole logic has to be refactored... hopefully not needed anymore
+        // with editor team changes
+        if (this.editor.snippetsMenu && !this.editor.snippetsMenu.$el.has(this.options.toolbarHandler).length) {
             this.editor.snippetsMenu.$el.insertAfter(this.options.toolbarHandler);
             this.editor.snippetsMenu.$snippetEditorArea.insertAfter(this.editor.snippetsMenu.$el);
         }
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index e7e62129243..60e7799f455 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -18,17 +18,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     }
 }
 
-.editor_enable {
-    padding-top: var(--o-we-toolbar-height) !important;
-
-    .note-popover .popover .popover-body {
-        height: var(--o-we-toolbar-height);
-    }
-    .note-popover .popover  {
-        transform: none;
-    }
-}
-
 #web_editor-top-edit {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
@@ -42,6 +31,10 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         right: 0 !important;
         border: none !important;
         max-width: none;
+        transform: none;
+    }
+    .note-popover .popover .popover-body {
+        height: var(--o-we-toolbar-height);
     }
 }
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index daa9f5c7312..2dd12418a04 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -48,6 +48,50 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+// Ugly hack to force ugly rules... while waiting for new editor
+#oe_snippets#oe_snippets .o_we_snippet_text_tools {
+    padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
+    box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
+    z-index: $o-we-zindex;
+
+    .popover {
+        position: static !important;
+        top: 0 !important;
+        left: 0 !important;
+        transform: none !important;
+        border: none !important;
+    }
+    .popover-body {
+        padding: 0 !important;
+
+        > * {
+            margin-bottom: $o-we-sidebar-content-field-spacing;
+        }
+    }
+    .btn {
+        @extend %we-generic-button;
+    }
+    .btn-group {
+        > .d-none + * {
+            margin-left: 0 !important;
+        }
+    }
+    .note-color {
+        .btn-group {
+            position: static;
+        }
+        .dropdown-menu { // Drop up
+          top: auto;
+          bottom: 100%;
+          margin-top: 0;
+          margin-bottom: $dropdown-spacer;
+        }
+    }
+}
+#o_scroll:not(.d-none) ~ .o_we_snippet_text_tools {
+    padding-right: $o-we-sidebar-blocks-content-spacing;
+    padding-left: $o-we-sidebar-blocks-content-spacing;
+}
 
 .oe_snippet {
     // No root because can be drag and drop (and the helper is in the body)
@@ -264,8 +308,7 @@ body.editor_enable.editor_has_snippets {
     }
 
     > #o_scroll, > .o_we_customize_panel {
-        flex: 1 1 auto;
-        height: 100%;
+        min-height: 0;
         overflow: auto;
     }
 
@@ -1166,6 +1209,7 @@ body.editor_enable.editor_has_snippets {
         flex: 0 0 auto;
         max-height: 220px;
         overflow-y: auto;
+        margin-top: auto;
         padding: $o-we-sidebar-blocks-content-spacing;
         background-color: $o-we-sidebar-blocks-content-bg;
         box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
@@ -1185,12 +1229,18 @@ body.editor_enable.editor_has_snippets {
     }
 
     &.o_we_backdrop {
-        > .o_we_customize_panel::after {
-            content: "";
-            @include o-position-absolute(0, 0, 0, 0);
-            display: block;
-            pointer-events: none;
-            background: $o-we-sidebar-content-backdrop-bg;
+        > .o_we_customize_panel {
+            // Ensure the panel takes full height so that an opened dropdown
+            // does not make a scrollbar appear for no reason
+            flex: 1 1 auto;
+
+            &::after {
+                content: "";
+                @include o-position-absolute(0, 0, 0, 0);
+                display: block;
+                pointer-events: none;
+                background: $o-we-sidebar-content-backdrop-bg;
+            }
         }
 
         .o_we_widget_opened {