From 90033c95ea133f78a2bfa247da3aae1a8d53f98d Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 30 Jul 2020 13:31:21 +0000
Subject: [PATCH] [FIX] website: prevent page flickering when modal is opened

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>
---
 addons/web_editor/static/src/scss/wysiwyg.scss        |  1 -
 .../web_editor/static/src/scss/wysiwyg_snippets.scss  |  2 +-
 addons/website/static/src/js/content/website_root.js  |  2 ++
 addons/website/static/src/scss/website.ui.scss        | 11 +++++++----
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index d76b7f4b648..0418bf35c7d 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -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;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index ad11b201fde..eb462326d6e 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -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 {
diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index fa2a01eecd2..91581d6293f 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -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.
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 882529d7ac6..10e80bde523 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -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;