[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
This commit is contained in:
qsm-odoo
@@ -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',
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"/>
|
||||
<!--   -->
|
||||
<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 -->
|
||||
|
||||
@@ -244,7 +244,7 @@ list of filtered posts (by date or tag).
|
||||
<t t-set="resize_classes" t-value="set(json.loads(_record.cover_properties).get('resize_class').split(' '))"/>
|
||||
<a t-if="{'o_full_screen_height', 'o_half_screen_height', 'cover_full', 'cover_mid'}.intersection(resize_classes)"
|
||||
id="o_wblog_post_content_jump" href="#o_wblog_post_main"
|
||||
class="css_editable_mode_hidden justify-content-center align-items-center rounded-circle mx-auto text-decoration-none">
|
||||
class="css_editable_mode_hidden justify-content-center align-items-center rounded-circle mx-auto mb-5 text-decoration-none">
|
||||
<i class="fa fa-angle-down fa-3x text-white" aria-label="To blog content" title="To blog content"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user