[IMP] website: add footer "scroll-to-top" button option

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: stefanorigano (SRI) <sri@odoo.com>
Co-authored-by: Cocographique <nmi@odoo.com>

7 files changed, 68 insertions, 2 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 add424313c0..d777752fe06 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -565,14 +565,14 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
 
 // Apply colors according to the given identifier. Can either be a preset
 // number, a color name or a css color.
-@mixin o-apply-colors($identifier, $background: $body-bg) {
+@mixin o-apply-colors($identifier, $with-extras: true, $background: $body-bg) {
     $-related-color: o-related-color($identifier, $max-recursions: 10);
     @if type-of($-related-color) == 'number' {
         // This is a preset to be applied, just extend it. This should probably
         // be avoided and use the class in XML if possible.
         @extend .o_cc#{$-related-color};
     } @else {
-        @include o-bg-color(o-color($-related-color), $background: $background, $important: false);
+        @include o-bg-color(o-color($-related-color), $with-extras: $with-extras, $background: $background, $important: false);
     }
 }
 
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 7ea51e50ce5..60323f3b57d 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -175,6 +175,7 @@ class Theme(models.AbstractModel):
                 'btn-ripple': 'null',
                 'header-template': 'null',
                 'footer-template': 'null',
+                'footer-scrolltop': 'null',
             }
         )
 
@@ -194,6 +195,9 @@ class Theme(models.AbstractModel):
         self.disable_view('website.template_footer_logo_only')
         self.disable_view('website.template_footer_address_logo')
 
+        # Reinitialize footer scrolltop template
+        self.disable_view('website.option_footer_scrolltop')
+
     @api.model
     def _toggle_view(self, xml_id, active):
         obj = self.env.ref(xml_id)
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 044f2629cf2..7764ae7df9f 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -266,6 +266,7 @@ $o-base-website-values-palette: (
 
     'footer-template': 'products_contacts_about_us',
     'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
+    'footer-scrolltop': false,
 );
 $o-font-aliases-to-keys: (
     'base': 'font',
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index e0a80129113..72288fbebaa 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -28,6 +28,13 @@ $-editor-messages-margin-x: 2%;
     &:focus, &[data-oe-type] {
         min-height: 0.8em;
         min-width: 8px;
+
+        // TODO this feature just needs to be reviewed to not have to make
+        // exceptions such as this
+        &#o_footer_scrolltop_wrapper {
+            min-height: 0;
+            min-width: 0;
+        }
     }
     &.o_is_inline_editable {
         display: inline-block;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index a4c517cb1b3..b9a17bff532 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -141,6 +141,7 @@ $-header-nav-link-height: $nav-link-height;
         @include o-apply-colors('copyright', $background: o-color('footer'));
     }
 }
+
 h2, h3, h4, h5, h6 {
     color: color('o-cc1-h2');
 }
@@ -888,6 +889,32 @@ header {
     vertical-align: top;
 }
 
+// Footer scrolltop button
+@if o-website-value('footer-scrolltop') {
+    #o_footer_scrolltop {
+        $-footer-color: o-color('footer');
+        $-copyright-color: o-color('copyright');
+        $-copyright-color: mix(rgba($-copyright-color, 1.0), $-footer-color, percentage(alpha($-copyright-color)));
+
+        box-sizing: content-box;
+        width: 3rem;
+        height: 3rem;
+        border: 0;
+        padding: 0;
+        @include o-apply-colors('footer', $with-extras: false, $background: $-footer-color);
+        text-decoration: none;
+
+        @if $-footer-color == $-copyright-color {
+            color: rgba(color-yiq($-footer-color), 0.5);
+        }
+
+        @include hover-focus {
+            @include o-apply-colors($-copyright-color, $with-extras: false, $background: $-footer-color);
+            text-decoration: none;
+        }
+    }
+}
+
 // Figure with special style
 .o_figure_relative_layout {
     position: relative;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 1da86d618d6..f478dda4a3a 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -696,6 +696,19 @@
                 data-customize-website-views="website.footer_no_copyright|portal.footer_language_selector"
                 data-no-preview="true"
                 data-reload="/"/>
+
+        <we-row string="Scroll Top Button">
+            <we-checkbox data-name="footer_scrolltop_opt"
+                         data-customize-website-views="website.option_footer_scrolltop"
+                         data-customize-website-variable="false|true"
+                         data-variable="footer-scrolltop"
+                         data-reload="/"/>
+            <we-select data-dependencies="footer_scrolltop_opt" data-apply-to="#o_footer_scrolltop_wrapper">
+                <we-button string="Left" data-select-class="justify-content-start"/>
+                <we-button string="Center" data-select-class="justify-content-center"/>
+                <we-button string="Right" data-select-class="justify-content-end"/>
+            </we-select>
+        </we-row>
     </div>
 
     <div data-js="HideFooter"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index c65f65ca386..cfbc767b49f 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -557,6 +557,20 @@
     </xpath>
 </template>
 
+<template id="option_footer_scrolltop" inherit_id="website.layout" active="False">
+    <xpath expr="//div[@id='footer']" position="after">
+        <div id="o_footer_scrolltop_wrapper" class="container h-0 d-flex align-items-center justify-content-center">
+            <a id="o_footer_scrolltop"
+               role="button"
+               href="#top"
+               title="Scroll To Top"
+               class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center">
+                <span class="fa fa-1x fa-chevron-up"/>
+            </a>
+        </div>
+    </xpath>
+</template>
+
 <template id="cookies_bar" inherit_id="website.layout" name="Cookies Bar">
     <xpath expr="//footer" position="after">
         <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar" data-vcss="001" data-invisible="1">