From d229931486eda6110187f9f90be5faf8a31ceab0 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 15 Sep 2020 14:54:57 +0000 Subject: [PATCH] [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 X-original-commit: 9d5cd2c1747488524c107e6165d7c55d74b80606 --- .../src/js/content/snippets.animation.js | 49 +++++++++++++++++++ .../static/src/js/editor/snippets.options.js | 27 +++++----- addons/website/static/src/scss/website.scss | 5 +- .../src/snippets/s_color_blocks_2/000.scss | 3 ++ addons/website/views/snippets/snippets.xml | 20 ++++++-- .../views/website_blog_templates.xml | 2 +- 6 files changed, 86 insertions(+), 20 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 @@
- - + + + + + None + Extra-Small + Small + Medium + Large + Extra-Large +
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml index d2800c149a3..3a92cc5ea36 100644 --- a/addons/website_blog/views/website_blog_templates.xml +++ b/addons/website_blog/views/website_blog_templates.xml @@ -244,7 +244,7 @@ list of filtered posts (by date or tag). + class="css_editable_mode_hidden justify-content-center align-items-center rounded-circle mx-auto mb-5 text-decoration-none">