From cdc8d4c889b316664323afad0d848403960150d5 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 25 Nov 2022 18:12:28 +0000
Subject: [PATCH] [FIX] website: hide backend navbar tour tips when entering
edit mode
When entering edit mode, the navbar is hidden. The problem is that since
the merge of the website-in-backend feature at [1], it is only not shown
via an animation (height 0 + out of screen) but not `display: none`. The
tour system thus thinks it is still shown and keeps showing the related
tour tips.
E.g. with website_sale installed (and no demo data, to have the tours),
go on the shop page, there is a tooltip pointing at "+ New", enter edit
mode => the tooltip is still there and it even prevents to click on
"Discard" to leave the edit mode.
This commit fixes the issue by making the navbar `display: none` once
the closing animations are finished.
[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
task-3082439
closes odoo/odoo#106629
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
.../website_preview/website_preview.scss | 4 ++++
.../website/static/src/js/editor/snippets.editor.js | 12 ++++++++++++
2 files changed, 16 insertions(+)
diff --git a/addons/website/static/src/client_actions/website_preview/website_preview.scss b/addons/website/static/src/client_actions/website_preview/website_preview.scss
index 3b420e2ab75c..4206ab5a923b 100644
--- a/addons/website/static/src/client_actions/website_preview/website_preview.scss
+++ b/addons/website/static/src/client_actions/website_preview/website_preview.scss
@@ -89,6 +89,10 @@ header {
}
}
+.editor_has_snippets_hide_backend_navbar header .o_main_navbar {
+ display: none !important;
+}
+
.o_block_preview {
z-index: $zindex-dropdown - 1 !important;
}
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index b6bab39174e3..6c4fde50b165 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -42,6 +42,16 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
this._toggleAnimatedTextButton();
};
this.$body[0].addEventListener('selectionchange', this.__onSelectionChange);
+
+ // editor_has_snippets is, amongst other things, in charge of hiding the
+ // backend navbar with a CSS animation. But we also need to make it
+ // display: none when the animation finishes for efficiency but also so
+ // that the tour tooltips pointing at the navbar disappear. This could
+ // rely on listening to the transitionend event but it seems more future
+ // proof to just add a delay after which the navbar is hidden.
+ this._hideBackendNavbarTimeout = setTimeout(() => {
+ this.el.ownerDocument.body.classList.add('editor_has_snippets_hide_backend_navbar');
+ }, 500);
},
/**
* @override
@@ -50,6 +60,8 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
this._super(...arguments);
this.$body[0].removeEventListener('selectionchange', this.__onSelectionChange);
this.$body[0].classList.remove('o_animated_text_highlighted');
+ clearTimeout(this._hideBackendNavbarTimeout);
+ this.el.ownerDocument.body.classList.remove('editor_has_snippets_hide_backend_navbar');
},
//--------------------------------------------------------------------------
--
GitLab