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

2 files changed, 7 insertions, 2 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>'),
     });