[IMP] web_editor, *: review the editor design CSS

*: web, mass_mailing, website, website_form, website_sale

New CSS design of the editor (step 1/x).

This work is unfortunately far from perfect but is a first step towards
what we want. In particular, much CSS linked to elements that are meant
to be removed/moved in the upcoming weeks was done in a huge rush but
will thus hopefully be removed/reviewed before the 14.0 release.

As the design is now far more complex including gradients and other
"complex" elements, it was also very difficult to keep a design based on
css-variable so this system was removed, which means that the editor now
appears the same everywhere (backend, frontend, ...). The original goal
of this system was to have an adapted style for backend, frontend and
website visitors. Unfortunately, the current result was a very good
frontend editor design, a not-so-good backend editor design (for mass
mailing at least) and a totally unadapted design for the website
visitors. Making this perfect will be achievable by loading different
assets for those 3 areas and hopefully those assets will only differ by
the values of editor scss variables.

Part of https://github.com/odoo/odoo/pull/53930
task-2157252

7 files changed, 98 insertions, 160 deletions

diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 24b950afc8c..ca231278fd1 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -1,6 +1,7 @@
 odoo.define('website.snippet.editor', function (require) {
 'use strict';
 
+const {_t} = require('web.core');
 const weSnippetEditor = require('web_editor.snippet.editor');
 const wSnippetOptions = require('website.editor.snippets.options');
 
@@ -64,7 +65,7 @@ weSnippetEditor.Class.include({
 
         if (!this.fakeThemeEl) {
             this.fakeThemeEl = document.createElement('theme');
-            this.fakeThemeEl.dataset.name = "";
+            this.fakeThemeEl.dataset.name = _t("General Options");
             this.el.appendChild(this.fakeThemeEl);
         }
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 189497b738d..0626c0fba11 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -33,7 +33,8 @@ const UrlPickerUserValueWidget = InputUserValueWidget.extend({
         linkButton.classList.add('o_we_redirect_to', 'fa', 'fa-fw', 'fa-external-link');
         linkButton.title = _t("Redirect to URL in a new tab");
         this.containerEl.appendChild(linkButton);
-        $(this.inputEl).addClass('text-left');
+        this.el.classList.add('o_we_large_input');
+        this.inputEl.classList.add('text-left');
         wUtils.autocompleteWithPages(this, $(this.inputEl));
     },
 
@@ -590,6 +591,33 @@ options.registry.background.include({
     },
 });
 
+options.registry.SwitchTheme = options.Class.extend({
+    isTopOption: true,
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * @see this.selectClass for parameters
+     */
+    switchTheme: async function (previewMode, widgetValue, params) {
+        const save = await new Promise(resolve => {
+            Dialog.confirm(this, _t("Changing theme requires to leave the editor. This will save all your changes, are you sure you want to proceed? Be careful that changing the theme will reset all your color customizations."), {
+                confirm_callback: () => resolve(true),
+                cancel_callback: () => resolve(false),
+            });
+        });
+        if (!save) {
+            return;
+        }
+        this.trigger_up('request_save', {
+            reload: false,
+            onSuccess: () => window.location.href = '/web#action=website.theme_install_kanban_action',
+        });
+    },
+});
+
 options.registry.Theme = options.Class.extend({
     events: {
         'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick',
@@ -725,24 +753,6 @@ options.registry.Theme = options.Class.extend({
             dialog.open();
         });
     },
-    /**
-     * @see this.selectClass for parameters
-     */
-    switchTheme: async function (previewMode, widgetValue, params) {
-        const save = await new Promise(resolve => {
-            Dialog.confirm(this, _t("Changing theme requires to leave the editor. This will save all your changes, are you sure you want to proceed? Be careful that changing the theme will reset all your color customizations."), {
-                confirm_callback: () => resolve(true),
-                cancel_callback: () => resolve(false),
-            });
-        });
-        if (!save) {
-            return;
-        }
-        this.trigger_up('request_save', {
-            reload: false,
-            onSuccess: () => window.location.href = '/web#action=website.theme_install_kanban_action',
-        });
-    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index b916b232a85..1a4acd4aac9 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -2,10 +2,10 @@ $-editor-messages-margin-x: 2%;
 %o-editor-messages {
     width: 100% - $-editor-messages-margin-x * 2; // Need to be forced here to avoid flickering
     margin: 20px $-editor-messages-margin-x;
-    border: 2px dashed $o-we-color-text-normal;
+    border: 2px dashed #999999;
     padding: 112px 0px;
     text-align: center;
-    color: $o-we-color-text-normal;
+    color: #999999;
 
     &:before {
         content: attr(data-editor-message);
diff --git a/addons/website/static/src/scss/website.editor.ui.scss b/addons/website/static/src/scss/website.editor.ui.scss
index de2b602cd21..d004626b03b 100644
--- a/addons/website/static/src/scss/website.editor.ui.scss
+++ b/addons/website/static/src/scss/website.editor.ui.scss
@@ -19,13 +19,15 @@
 }
 
 // INPUTS
+$o-we-switch-size: 2ex !default;
+$o-we-switch-inactive-color: #F7F7F7 !default;
 .o_switch {
     display: flex;
     align-items: center;
     font-weight: normal;
     cursor: pointer;
 
-    >input {
+    > input {
         display: none;
 
         + span {
@@ -36,18 +38,18 @@
             width: $o-we-switch-size * 1.8;
             margin-right: 0.5em;
             display: inline-block;
-            transition: all 0.3s $o-we-md-ease;
+            transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 
             &:after {
                 content: "";
-                background: $o-we-bg-color;
+                background: white;
                 display: block;
                 width: $o-we-switch-size - 0.2;
                 height: $o-we-switch-size - 0.2;
                 margin-top: 0.1ex;
                 margin-left: 0.1ex;
                 border-radius: 100rem;
-                transition: all 0.3s $o-we-md-ease;
+                transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
                 box-shadow: 0 1px 1px darken($o-we-switch-inactive-color, 35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color, 10%);
             }
         }
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 539a1c3860f..882529d7ac6 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -8,7 +8,7 @@ body {
     // Set frontend direction that will be flipped with
     // rtlcss for right-to-left text direction.
     direction: ltr;
-    transition: padding 0.35s;
+    transition: padding 400ms ease 0s;
 }
 body.o_connected_user {
     padding-top: $o-navbar-height!important;
@@ -29,9 +29,6 @@ body.o_connected_user {
         }
     }
 }
-#oe_main_menu_navbar, #web_editor-top-edit, #oe_snippets {
-    transition: transform 0.35s !important;
-}
 
 // MAIN MENU STYLE (added above navbar.scss)
 #oe_main_menu_navbar {
@@ -39,9 +36,10 @@ body.o_connected_user {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
     z-index: $zindex-modal - 10;
-
     font-family: $o-we-font-family;
     font-size: 14px;
+    transition: transform 400ms ease 0s; // For fullscreen
+
     a:hover, a:focus {
         text-decoration: none;
     }
@@ -164,7 +162,7 @@ body .modal {
                         }
                     }
                     .close {
-                        color: $o-we-color-light;
+                        color: #4e525b;
                     }
                 }
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index ac02704f523..90be93c7f79 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -10,16 +10,6 @@
     // Override css variables to influence the default style of the editor
     // without duplicating the css.
     @include print-variable('o-we-toolbar-height', $o-navbar-height);
-    @include print-variable('o-we-bg-color', $o-we-color-dark);
-    @include print-variable('o-we-bg-color-dark', $o-we-color-darker);
-    @include print-variable('o-we-color', $o-we-color-text-normal);
-    @include print-variable('o-we-color-accent', $o-we-color-text-light);
-
-    @include print-variable('o-we-dropdown-bg-color', $o-we-color-darker);
-    @include print-variable('o-we-dropdown-color', $o-we-color-text-normal);
-
-    @include print-variable('o-we-snippets-bg-color', $o-we-color-normal);
-    @include print-variable('o-we-snippets-color', $o-we-color-text-light);
 
     // Need info about the color of each color palette
     @for $index from 1 through length($o-color-palettes) - 1 { // Not the user one
@@ -30,63 +20,48 @@
 }
 
 // EDITOR TOP BAR AND POPOVER
-#web_editor-top-edit {
-    form.navbar-form {
-        @include o-position-absolute(0, 0, 0, auto);
-        z-index: $zindex-popover + 5;
-        height: $o-navbar-height;
-        margin: 0;
-        padding: 0;
-        transition: right 0.4s $o-we-md-ease 0s;
-        border-left: 1px solid $o-we-color-divider;
-
-        .btn-group {
-            height: 100%;
-        }
+#web_editor-top-edit .o_we_website_top_actions {
+    @include o-position-absolute($top: 0, $left: 0);
+    z-index: $zindex-popover + 5;
+    display: flex;
+    width: $o-we-sidebar-width;
+    height: $o-we-sidebar-top-height;
+    background-color: $o-we-sidebar-tabs-bg;
+
+    .btn-group, .btn {
+        height: 100%;
+    }
 
-        .btn {
-            height: 100%;
-            margin: 0;
-            padding: 10px;
-            line-height: 1.2;
-            font-size: 13px;
-            font-family: $o-we-font-family;
-
-            transition: all 0.3s ease 0s;
-            border: none;
-            border-radius: 0;
-
-            .fa {
-                margin-right: $grid-gutter-width/4;
-
-                &.fa-times {
-                    color: $o-we-color-danger;
-                }
-            }
-
-            &.btn-primary {
-                @include button-variant($o-brand-odoo, $o-brand-odoo);
-            }
-
-            &.btn-secondary {
-                @include button-variant($o-we-color-dark, $o-we-color-dark);
-
-                &:hover {
-                    background: rgba(black, 0.5);
-                }
-            }
-
-            &:focus,
-            &:active,
-            &:focus:active {
-                outline: none;
-            }
-        }
+    .btn {
+        border: none;
+        border-radius: 0;
+        font-size: $o-we-sidebar-font-size;
+        font-weight: 700;
+        line-height: 1;
 
-        .dropdown-menu {
-            left: auto;
-            right: 0;
+        &.btn-primary {
+            @include button-variant($o-brand-primary, $o-brand-primary);
         }
+        &.btn-secondary {
+            @include button-variant($o-we-sidebar-tabs-bg, $o-we-sidebar-tabs-bg);
+        }
+        &:focus, &:active, &:focus:active {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+
+    .dropdown-menu {
+        left: auto;
+        right: 0;
+    }
+}
+
+#oe_snippets {
+    top: $o-we-sidebar-top-height;
+
+    .o_color_combinations_edition {
+        margin-top: $o-we-sidebar-content-field-spacing;
     }
 }
 
@@ -128,73 +103,25 @@ $i: 1;
     border-top: 1px solid currentColor !important;
 }
 
-$palette-size: 10em;
-.o_palette_color_preview {
-    flex: 0 0 auto;
-    display: inline-block;
-    width: $palette-size / 3;
-    height: 1.35em;
-    margin: 4px 0;
-    transition: width 150ms ease 0s;
-
-    &:nth-child(4), &:nth-child(5) {
-        width: 0;
+#oe_snippets > .o_we_customize_panel .o_we_user_value_widget.o_palette_color_preview_button {
+    > div {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: stretch;
     }
-}
-.o_palette_color_preview_button:hover .o_palette_color_preview {
-    width: $palette-size / 5;
-}
-
-// SNIPPET OPTIONS
-.colorpicker {
-    .o_colorpicker_sections {
-        .note-color-palette > div {
-            color: $o-we-color-text-light;
-        }
-    }
-
-    .o_colorpicker_section {
-        &:after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        > .o_we_color_btn {
-
-            &:hover,
-            &.selected {
-                box-shadow: 0px 0px 2px 2px $o-we-color-light;
-            }
-
-            &[data-event="foreColor"] {
-                background-color: $o-we-color-normal;
-
-                &:before {
-                    background-color: rgba(white, 0.3);
-                }
-            }
-        }
-    }
-
-    .note-palette-title, a, button:not(.o_we_color_combination_btn) {
-
-        &, &:hover {
-            color: $o-we-color-text-light;
-        }
+    .o_palette_color_preview {
+        flex: 1 0 0;
+        margin: 1px 0;
+        transition: flex 150ms ease 0s;
     }
-
-    .palette-reset {
-        .note-color-reset {
-            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
-
-            &:hover {
-                color: $o-we-color-danger;
-            }
+    &:not(:hover) .o_palette_color_preview {
+        &:nth-child(4), &:nth-child(5) {
+            flex: 0 0 0;
         }
     }
 }
 
+// SNIPPET OPTIONS
 we-collapse {
     position: relative;
     padding: 0.3em 0.3em 0.3em 1em;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 998c60f4963..bea9661aa21 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -13,9 +13,9 @@
     <!-- Editor top bar which contains the summernote tools and save/discard buttons -->
     <t t-name="website.editorbar">
         <div id="web_editor-top-edit">
-            <form class="navbar-form text-muted">
-                <button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j"><i class="fa fa-times"/> Discard</button>
-                <button type="button" class="btn btn-primary" data-action="save" accesskey="s"><i class="fa fa-floppy-o"/> Save</button>
+            <form class="o_we_website_top_actions">
+                <button type="button" class="btn btn-primary" data-action="save" accesskey="s">Save</button>
+                <button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j">Discard</button>
             </form>
         </div>
     </t>