[IMP] web_editor, website: introduce foldable zones in the editor UI

Now any set of widgets and rows can be placed in a we-collapse element
so that those elements can be foldable. The first element inside (or
the mentioned "string" on the we-collapse element itself) is used as the
always shown element (with a toggler on its left to toggle the
visibility of the other items).

we-collapse inside other we-collapse is supported as well.

Limitations / Other infos:

- The use of '⌙' and   characters is not automatic (yet?).
  Sometimes it actually make sense to use them without a we-collapse or
  to not use them in a we-collapse.

- The use of we-collapse is limited to widgets inside the same option.
  So unfortunately, there is no current way to add all bg image options
  in a folable section as those contain many different options. Maybe
  in the future.

Part of https://github.com/odoo/odoo/pull/56350

closes odoo/odoo#56350

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

2 files changed, 56 insertions, 5 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index ca8f9e6a080..add424313c0 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -117,8 +117,7 @@ $o-we-sidebar-content-main-title-font-size: 13px !default;
 
 $o-we-sidebar-content-block-spacing: 10px !default;
 
-$o-we-sidebar-content-fold-block-bg: $o-we-bg-dark !default;
-$o-we-sidebar-content-fold-block-inner-spacing: $o-we-sidebar-content-block-spacing !default;
+$o-we-sidebar-content-fold-block-bg: $o-we-bg-light !default;
 
 $o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
 $o-we-sidebar-content-field-color: $o-we-fg-darker !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 01963484889..5419eb8a133 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -427,14 +427,13 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-options {
             position: relative;
             display: block;
-            padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
+            padding: 0 0 ($o-we-sidebar-content-block-spacing * 1.5) 0;
             background-color: $o-we-bg-lighter;
             box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
 
             > we-title {
                 display: flex;
                 align-items: center;
-                margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent);
                 padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
                 background-color: $o-we-bg-light;
                 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);
@@ -454,7 +453,9 @@ body.editor_enable.editor_has_snippets {
                     .oe_snippet_remove {
                         font-size: 1.2em;
                     }
-
+                    we-customizeblock-option {
+                        padding: 0;
+                    }
                     we-button {
                         margin-left: $o-we-sidebar-content-field-multi-spacing;
                         padding: 0 $o-we-sidebar-content-field-multi-spacing;
@@ -470,6 +471,7 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-option {
             position: relative;
             display: block;
+            padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
 
             .dropdown-menu {
                 // FIXME temporary fix for m2o option for example
@@ -1063,6 +1065,56 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        we-collapse {
+            position: relative;
+            display: block;
+            padding-left: $o-we-sidebar-content-indent;
+            padding-right: $o-we-sidebar-content-padding-base;
+            margin-right: -$o-we-sidebar-content-padding-base;
+            margin-left: -$o-we-sidebar-content-indent;
+            // Allow inner margin to be considered inside the block + Visual space after/before previous/next widget + No flickering on opening
+            $-inner-spacing: ceil($o-we-sidebar-content-field-spacing / 2);
+            border-top: ($o-we-sidebar-content-field-spacing - $-inner-spacing) solid transparent;
+            padding-bottom: ($o-we-sidebar-content-field-spacing - $-inner-spacing);
+            margin-bottom: -($o-we-sidebar-content-field-spacing - $-inner-spacing);
+            background-clip: padding-box;
+
+            > :first-child, .o_we_collapse_toggler {
+                margin-top: $-inner-spacing;
+            }
+            .o_we_collapse_toggler {
+                @include o-position-absolute($top: 0, $left: 0);
+                width: $o-we-sidebar-content-indent;
+                height: $o-we-sidebar-content-field-height;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+                background: none;
+                border: none;
+
+                &::after {
+                    content: '\f0da';
+                    position: static;
+                    transform: none;
+                }
+                &.active {
+
+                    &::after {
+                        content: '\f0d7';
+                    }
+                    + * {
+                        background: none;
+                        border: none;
+                        box-shadow: none;
+                    }
+                }
+            }
+            &.active {
+                background-color: $o-we-sidebar-content-fold-block-bg;
+            }
+        }
+
         .o_we_image_weight {
             display: flex;
             justify-content: flex-end;