From 9cf8b97fe40444b44ebb6e6fb992bc658a087d32 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 24 Sep 2020 11:33:35 +0000 Subject: [PATCH] [FIX] website, *: review modal behaviors with right-panelization *: web, web_editor Since the right-panelization made with [1], the modals were not compensating the body scrollbar when opened anymore and the backdrop was misplaced. This commit fixes the problems generically, to support modals with non-body scrolling. [1]: https://github.com/odoo/odoo/pull/57975 closes odoo/odoo#58442 X-original-commit: ebd0c90a146145079061e79c2d4c37fa182a2975 Signed-off-by: Quentin Smetz (qsm) --- addons/web/static/src/js/core/dom.js | 7 ++++++ addons/web/static/src/js/libs/bootstrap.js | 18 +++++++++++++++ addons/web/static/src/js/libs/jquery.js | 22 +++++++++++++++++++ addons/web/static/src/scss/base_frontend.scss | 3 +++ .../static/src/scss/wysiwyg_snippets.scss | 1 + addons/website/static/src/js/content/menu.js | 8 +------ .../static/src/scss/website.edit_mode.scss | 2 +- 7 files changed, 53 insertions(+), 8 deletions(-) diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js index f4aba50be8a..e0b0f67ef6d 100644 --- a/addons/web/static/src/js/core/dom.js +++ b/addons/web/static/src/js/core/dom.js @@ -147,6 +147,13 @@ var dom = { closestScrollable(el) { return $(el).closestScrollable()[0]; }, + /** + * @param {HTMLElement} el + * @see $.compensateScrollbar + */ + compensateScrollbar(el, ...rest) { + $(el).compensateScrollbar(...rest); + }, /** * jQuery find function behavior is:: * diff --git a/addons/web/static/src/js/libs/bootstrap.js b/addons/web/static/src/js/libs/bootstrap.js index 07e04c64a39..3e2962cc490 100644 --- a/addons/web/static/src/js/libs/bootstrap.js +++ b/addons/web/static/src/js/libs/bootstrap.js @@ -96,6 +96,24 @@ $.fn.scrollspy.Constructor.prototype.refresh = function () { } }; +/* Bootstrap modal scrollbar compensation on non-body */ +const bsSetScrollbarFunction = $.fn.modal.Constructor.prototype._setScrollbar; +$.fn.modal.Constructor.prototype._setScrollbar = function () { + const $scrollable = $().getScrollingElement(); + if (document.body.contains($scrollable[0])) { + $scrollable.compensateScrollbar(true); + } + return bsSetScrollbarFunction.apply(this, arguments); +}; +const bsResetScrollbarFunction = $.fn.modal.Constructor.prototype._resetScrollbar; +$.fn.modal.Constructor.prototype._resetScrollbar = function () { + const $scrollable = $().getScrollingElement(); + if (document.body.contains($scrollable[0])) { + $scrollable.compensateScrollbar(false); + } + return bsResetScrollbarFunction.apply(this, arguments); +}; + return { makeExtendedSanitizeWhiteList: makeExtendedSanitizeWhiteList, }; diff --git a/addons/web/static/src/js/libs/jquery.js b/addons/web/static/src/js/libs/jquery.js index 6921b004019..7c3273abc91 100644 --- a/addons/web/static/src/js/libs/jquery.js +++ b/addons/web/static/src/js/libs/jquery.js @@ -135,6 +135,28 @@ $.fn.extend({ } return $el; }, + /** + * Adapt the given css property by adding the size of a scrollbar if any. + * Limitation: only works if the given css property is not already used as + * inline style for another reason. + * + * @param {boolean} [add=true] + * @param {boolean} [isScrollElement=true] + * @param {string} [cssProperty='padding-right'] + */ + compensateScrollbar(add = true, isScrollElement = true, cssProperty = 'padding-right') { + for (const el of this) { + // Compensate scrollbar + el.style.removeProperty(cssProperty); + if (!add) { + return; + } + const scrollableEl = isScrollElement ? el : $(el).parent().closestScrollable()[0]; + const style = window.getComputedStyle(el); + const newValue = parseInt(style[cssProperty]) + scrollableEl.offsetWidth - scrollableEl.clientWidth; + el.style.setProperty(cssProperty, `${newValue}px`, 'important'); + } + }, /** * @returns {jQuery} */ diff --git a/addons/web/static/src/scss/base_frontend.scss b/addons/web/static/src/scss/base_frontend.scss index 585ce965ec5..c300b3db38e 100644 --- a/addons/web/static/src/scss/base_frontend.scss +++ b/addons/web/static/src/scss/base_frontend.scss @@ -24,3 +24,6 @@ html, body, #wrapwrap { flex: 1 0 auto; } } +.modal-open #wrapwrap { + overflow: hidden; +} diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 433d002bc7e..37ad3403a07 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -11,6 +11,7 @@ body.editor_enable.editor_has_snippets { } .modal:not(.o_technical_modal) { + top: 0 !important; // set z-index so customize options visible on dialog. z-index: $o-we-overlay-zindex - 1; // just for fake backdrop effect diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index 70ed4565185..b1da4caf809 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -73,13 +73,7 @@ const BaseAnimatedHeader = animations.Animation.extend({ * @private */ _adaptFixedHeaderPosition() { - // Compensate scrollbar - this.el.style.removeProperty('right'); - if (this.fixedHeader) { - const scrollableEl = this.$el.parent().closestScrollable()[0]; - const style = window.getComputedStyle(this.el); - this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important'); - } + dom.compensateScrollbar(this.el, this.fixedHeader, false, 'right'); }, /** * @private diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index 72c3a5f6538..f43fbef9548 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -159,8 +159,8 @@ body.editor_enable.editor_has_snippets { .s_popup .modal { // s_popup in edit mode - top: var(--o-we-toolbar-height); background-color: transparent; + &.fade .modal-dialog { transform: none; }