[FIX] website, *: review scroll button and height option behaviors

*: website_blog

- The scroll button option is now again available for all snippets, not
  only when the height is forced to 50% or 100%. Indeed, nobody would
  think to change that option if the snippet is already naturally tall
  and you could well want that scroll button on small-height covers.

- The scroll button is now placed on top of the snippet content instead
  of below in its natural flow. This allows it to work with snippets
  like "Big Boxes" and actually prevent to miscenter the snippet content
  just by adding that scroll button.

- Review the option UI and allow to control the spacing around the
  scroll button.

- the "Big Boxes" snippet was at last adapted to work well with 50% and
  100% height options.

- The 100% height option has now associated JS so that the height is
  computed to use 100% minus the size of the header.

Note: this may be backported to 13.2 where the option was introduced and
where those improvements may appear essential for the feature to not be
considered as buggy.

Part of https://github.com/odoo/odoo/pull/57764
task-2224404

5 files changed, 85 insertions, 19 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index a68e8555c1d..2840bc1e7e3 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -941,6 +941,55 @@ registry.anchorSlide = publicWidget.Widget.extend({
     },
 });
 
+registry.FullScreenHeight = publicWidget.Widget.extend({
+    selector: '.o_full_screen_height',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    start() {
+        if (this.$el.outerHeight() > this._computeIdealHeight()) {
+            // Only initialize if taller than the ideal height as some extra css
+            // rules may alter the full-screen-height class behavior in some
+            // cases (blog...).
+            this._adaptSize();
+            $(window).on('resize.FullScreenHeight', _.debounce(() => this._adaptSize(), 250));
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        $(window).off('.FullScreenHeight');
+        this.el.style.setProperty('min-height', '');
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _adaptSize() {
+        const height = this._computeIdealHeight();
+        this.el.style.setProperty('min-height', `${height}px`, 'important');
+    },
+    /**
+     * @private
+     */
+    _computeIdealHeight() {
+        const windowHeight = $(window).outerHeight();
+        // Doing it that way allows to considerer fixed headers, hidden headers,
+        // connected users, ...
+        const mainTopPos = $('#wrapwrap > main')[0].getBoundingClientRect().top;
+        return (windowHeight - mainTopPos);
+    },
+});
+
 registry.ScrollButton = registry.anchorSlide.extend({
     selector: '.o_scroll_button',
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 082f6cba958..5819402c93a 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1907,6 +1907,21 @@ options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
      */
     async visibility(previewMode, widgetValue, params) {
         await this._super(...arguments);
+        await this._changeVisibility(widgetValue);
+        // TODO this is hacky but changing the header visibility may have an
+        // effect on features like FullScreenHeight which depend on viewport
+        // size so we simulate a resize.
+        $(window).trigger('resize');
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _changeVisibility(widgetValue) {
         const show = (widgetValue !== 'hidden');
         if (!show) {
             return;
@@ -1930,11 +1945,6 @@ options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
             });
         });
     },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
     /**
      * @override
      */
@@ -2539,6 +2549,7 @@ options.registry.ScrollButton = options.Class.extend({
                 const anchor = document.createElement('a');
                 anchor.classList.add(
                     'o_scroll_button',
+                    'mb-3',
                     'rounded-circle',
                     'align-items-center',
                     'justify-content-center',
@@ -2573,12 +2584,6 @@ options.registry.ScrollButton = options.Class.extend({
         }
         return this._super(...arguments);
     },
-    /**
-     * @override
-     */
-    _computeVisibility: function () {
-        return this.$target.is('.o_full_screen_height, .o_half_screen_height');
-    },
 });
 
 return {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index f037f189f5d..ec1c6f6b96e 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -448,13 +448,9 @@ table.table_desc tr td {
 }
 
 .o_full_screen_height {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
     min-height: 100vh !important;
 }
 .o_half_screen_height {
-    @extend .o_full_screen_height;
     min-height: 55vh !important;
 }
 
@@ -1312,6 +1308,7 @@ header {
 
 // Scroll down button
 .o_scroll_button {
+    @include o-position-absolute(auto, 0, 0, 0);
     display: flex;
     width: 50px;
     height: 50px;
diff --git a/addons/website/static/src/snippets/s_color_blocks_2/000.scss b/addons/website/static/src/snippets/s_color_blocks_2/000.scss
index 70d476a3308..c8cf79c3121 100644
--- a/addons/website/static/src/snippets/s_color_blocks_2/000.scss
+++ b/addons/website/static/src/snippets/s_color_blocks_2/000.scss
@@ -1,7 +1,10 @@
 .s_color_blocks_2 {
+    display: flex; // Needed to be able to stretch the inner container so that
+                   // the snippet works with the 50% and 100% height
     .row {
         display: flex;
         flex-flow: row wrap;
+        height: 100%; // Needed for the 50% and 100% height option
 
         // Fix for safari browser as it 'supports' flex but not with the right
         // behavior
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index ac44ad6ec71..937e2ac59cf 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1012,10 +1012,12 @@
 
     <!-- Scroll to next section button (only for full height) -->
     <div data-js="ScrollButton" data-selector="section">
-        <we-row string="Scroll down button" class="o_scroll_button_opt">
-            <we-checkbox data-toggle-button="true"
-                data-no-preview="true"
-                data-name="scroll_button_opt"/>
+        <we-checkbox string="Scroll down button"
+                     data-toggle-button="true"
+                     data-no-preview="true"
+                     data-name="scroll_button_opt"/>
+        <!-- &emsp; -->
+        <we-row string=" ⌙ Colors">
             <we-colorpicker
                 data-select-style="true"
                 data-css-property="background-color"
@@ -1028,6 +1030,16 @@
                 data-apply-to=".o_scroll_button"
                 data-dependencies="scroll_button_opt"/>
         </we-row>
+        <we-select string=" ⌙ Spacing"
+                   data-apply-to=".o_scroll_button"
+                   data-dependencies="scroll_button_opt">
+            <we-button data-select-class="">None</we-button>
+            <we-button data-select-class="mb-1">Extra-Small</we-button>
+            <we-button data-select-class="mb-2">Small</we-button>
+            <we-button data-select-class="mb-3">Medium</we-button>
+            <we-button data-select-class="mb-4">Large</we-button>
+            <we-button data-select-class="mb-5">Extra-Large</we-button>
+        </we-select>
     </div>
 
     <!--  Vertical Alignment -->