pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: prevent page flickering when modal is opened

Browse Source 
Commit [1] introduced a flickering when any modal was opened on the
frontend. Indeed, it introduced the possibility to go into "fullscreen"
mode, which makes the Odoo UI navbar and sidebar disappear. This is
animated: the padding of the `<body/>` element is using a CSS
transition... but when a Bootstrap modal opens, the padding-right is
changed to compensate the scrollbar removal. This change now being
animated, it creates a flickering.

A generic solution was made: only animate what is animated for the
duration of the fullscreen mode switch.

[1]: https://github.com/odoo/odoo/commit/0b0690a3934cedcab0d5e34373e8d40c2ab25660

closes odoo/odoo#55210

X-original-commit: ccadb20c82a651e9ef87e818b898f3e9a081cacd
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-07-30 14:50:04 +00:00
parent 8a57b4ce79
commit 90033c95ea
4 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/wysiwyg.scss
-1
View File
@@ -35,7 +35,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
z-index: $o-we-zindex;
height: var(--o-we-toolbar-height);
background-color: $o-we-bg;
transition: transform 400ms ease 0s; // For fullscreen
.note-popover .popover {
top: 0 !important;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+1 -1
View File
@@ -108,7 +108,7 @@ body.editor_enable.editor_has_snippets {
font-weight: 700;
line-height: 1;
transition: transform 400ms ease 0s; // Also for fullscreen
transition: transform 400ms ease 0s;
transform: translateX(-100%);
&.o_loaded {
addons/website/static/src/js/content/website_root.js
+2
View File
@@ -170,6 +170,7 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
*/
_toggleFullscreen(state) {
this.isFullscreen = state;
document.body.classList.add('o_fullscreen_transition');
document.body.classList.toggle('o_fullscreen', this.isFullscreen);
document.body.style.overflowX = 'hidden';
let resizing = true;
@@ -189,6 +190,7 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
resizing = false;
document.body.style.overflowX = '';
document.body.removeEventListener('transitionend', onTransitionEnd);
document.body.classList.remove('o_fullscreen_transition');
};
document.body.addEventListener('transitionend', onTransitionEnd);
// Safeguard in case the transitionend event doesn't trigger for whatever reason.
addons/website/static/src/scss/website.ui.scss
+7 -4
View File
@@ -8,22 +8,26 @@ body {
// Set frontend direction that will be flipped with
// rtlcss for right-to-left text direction.
direction: ltr;
transition: padding 400ms ease 0s;
}
body.o_connected_user {
padding-top: $o-navbar-height!important;
&.o_fullscreen_transition {
transition: padding 400ms ease 0s;
#oe_main_menu_navbar, #web_editor-top-edit, #oe_snippets {
transition: transform 400ms ease 0s !important;
}
}
&.o_fullscreen {
padding-top: 0 !important;
&.editor_enable.editor_has_snippets {
padding-left: 0 !important;
}
#oe_main_menu_navbar, #web_editor-top-edit {
transform: translateY(-100%);
}
#oe_snippets {
transform: translateX(-100%);
}
@@ -38,7 +42,6 @@ body.o_connected_user {
z-index: $zindex-modal - 10;
font-family: $o-we-font-family;
font-size: 14px;
transition: transform 400ms ease 0s; // For fullscreen
a:hover, a:focus {
text-decoration: none;