[IMP] web_editor, *: introduce and restore new web_editor UI

* mass_mailing, note, website, website_blog, website_form,
website_mass_mailing, website_sale

This commit, unfortunately, mixes three things:

- Restoring as much as possible the scss organisation to allow styling
the web_editor UI properly.

- Fixing some bugs like a border around the page once the editor is
loaded, no ability to scroll the snippets, etc

- Introducing a whole new UI for snippet options: a left panel instead
of the old dropdown & button overlay.

Note: this commit also do some linting and ES6 convertion even though
some of it has been done in the parent commit.

Note 2: some elements that were removed are still styled in the POS apps
but this is because part of a feature was removed while leaving dead
code behind, this is handled in another PR which is to be merged
(https://github.com/odoo/odoo/pull/36136).

Part of https://github.com/odoo/odoo/pull/36068
task-1942370

closes odoo/odoo#36068

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

1 files changed, 28 insertions, 30 deletions

diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index 3b1563d3182..7898ed63f95 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -79,25 +79,24 @@ MockServer.include({
                         'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
                         '    <div data-js="colorpicker" data-selector=".test_option_all">' +
-                        '       <div class="dropdown-submenu">' +
-                        '           <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>' +
-                        '           <div class="dropdown-menu" role="menu"/>' +
-                        '       </div>' +
+                        '       <we-collapse-area>' +
+                        '           <we-toggler><i class="fa fa-eyedropper"/> Background Color</we-toggler>' +
+                        '           <we-collapse/>' +
+                        '       </we-collapse-area>' +
                         '    </div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background Image</a>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <div class="dropdown-submenu">' +
-                        '            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-v"/>Alignment</a>' +
-                        '            <div class="dropdown-menu" role="menu">' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-start">Top</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-center">Middle</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottom</a>' +
-                        '                <div class="dropdown-divider"/>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal height</a>' +
-                        '            </div>' +
-                        '        </div>' +
+                        '        <we-collapse-area>' +
+                        '            <we-toggler><i class="fa fa-arrows-v"/> Alignment</we-toggler>' +
+                        '            <we-collapse>' +
+                        '                <we-button data-select-class="align-items-start">Top</we-button>' +
+                        '                <we-button data-select-class="align-items-center">Middle</we-button>' +
+                        '                <we-button data-select-class="align-items-end">Bottom</we-button>' +
+                        '                <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
+                        '            </we-collapse>' +
+                        '        </we-collapse-area>' +
                         '    </div>' +
                         '</div>';
                 return Promise.resolve(template);
@@ -255,25 +254,24 @@ function wysiwygData(data) {
                         'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
                         '    <div data-js="colorpicker" data-selector=".test_option_all">' +
-                        '       <div class="dropdown-submenu">' +
-                        '           <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>' +
-                        '           <div class="dropdown-menu" role="menu"/>' +
-                        '       </div>' +
+                        '       <we-collapse-area>' +
+                        '           <we-toggler><i class="fa fa-eyedropper"/>Background Color</we-toggler>' +
+                        '           <we-collapse/>' +
+                        '       </we-collapse-area>' +
                         '    </div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background Image</a>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <div class="dropdown-submenu">' +
-                        '            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-v"/>Alignment</a>' +
-                        '            <div class="dropdown-menu" role="menu">' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-start">Top</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-center">Middle</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottom</a>' +
-                        '                <div class="dropdown-divider"/>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal height</a>' +
-                        '            </div>' +
-                        '        </div>' +
+                        '        <we-collapse-area>' +
+                        '            <we-toggler><i class="fa fa-arrows-v"/> Alignment</we-toggler>' +
+                        '            <we-collapse>' +
+                        '                <we-button data-select-class="align-items-start">Top</we-button>' +
+                        '                <we-button data-select-class="align-items-center">Middle</we-button>' +
+                        '                <we-button data-select-class="align-items-end">Bottom</we-button>' +
+                        '                <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
+                        '            </we-collapse>' +
+                        '        </we-collapse-area>' +
                         '    </div>' +
                         '</div>';
                 }