From 2aea38467e6d541dd413988d4fd78f99a746ace2 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Mon, 19 Jul 2021 09:58:37 +0000
Subject: [PATCH] [IMP] web_editor: review floating toolbar and its SCSS
 structure

The "floating" and the "into-sidebar" toolbar designs are visually very
different but share the same XML template.

Prior to this commit we relied on SCSS overrides to achieve the two
designs, meaning that any new rule added in wysiwyg.scss was supposed to
be followed by an override in wysiwyg_snippets.scss.

This approach led to glitches and undesired behaviors, especially
considering that all customizations we apply are already overrides of
the standalone OdooEditor lib (that, by the way, applies its own
overrides on top of bootstrap too...).

This commit will add the 'oe-floating' class by default, and will
remove it when the toolbar is rendered inside the sidebar.

This approach allows to target the floating design when needed only, and
consequentially will leave the '.oe-toolbar' selector for the code
shared between the two designs.

Part of https://github.com/odoo/odoo/pull/73565
task-2496339

Part-of: odoo/odoo#73565
---
 .../static/src/js/editor/snippets.editor.js           |  2 ++
 addons/web_editor/static/src/scss/wysiwyg.scss        | 11 +++++++++++
 addons/web_editor/static/src/xml/editor.xml           |  2 +-
 3 files changed, 14 insertions(+), 1 deletion(-)

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 038d2ad27fd..3c7c7dc7d2f 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -3110,6 +3110,8 @@ var SnippetsMenu = Widget.extend({
                 break;
         }
 
+        this.options.wysiwyg.toolbar.el.classList.remove('oe-floating');
+
         const $customizeBlock = $('<WE-CUSTOMIZEBLOCK-OPTIONS id="o_we_editor_toolbar_container"/>');
         const $title = $("<we-title><span>" + titleText + "</span></we-title>");
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 5bfbf05f60d..c6547519c2d 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -28,7 +28,18 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
     margin: 0;
     padding: 0;
 }
+
+// Toolbar - Generic rules shared among backend & frontend
 .oe-toolbar {
+    .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+// Floating Toolbar
+.oe-toolbar.oe-floating {
     padding-bottom: 0;
     border-bottom: $o-we-border-width solid $o-we-fg-light;
     background-color: $o-we-bg;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 32e020fd7a7..d30b801506c 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -6,7 +6,7 @@
 
     <!-- Editor toolbar -->
     <t t-name="web_editor.toolbar">
-        <div id="toolbar" class="oe-toolbar">
+        <div id="toolbar" class="oe-toolbar oe-floating">
             <div id="style" class="btn-group dropdown">
                 <button type="button" class="btn dropdown-toggle"
                     data-toggle="dropdown" title="Text style" tabindex="-1" data-display="static"