diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index 82b5e1cb7c3abbcd80a0a6070454afcb23d4f8ef..e3d7a4d8eff80bc73934dd386ecf74cb571d72a0 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -2121,6 +2121,10 @@ var SnippetsMenu = Widget.extend({ .removeProp('contentEditable'); this.getEditableArea().find('.o_we_selected_image') .removeClass('o_we_selected_image'); + [...this.getEditableArea()].forEach(editableAreaEl => { + editableAreaEl.querySelectorAll("[data-visibility='conditional']") + .forEach(invisibleEl => delete invisibleEl.dataset.invisible); + }); }, /** * Load snippets. diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index ab17d894e4d309f723ea1bc257929c94517611da..7590d7b2b42facd14670da577a829764c8c82114 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -3204,20 +3204,11 @@ options.registry.ConditionalVisibility = options.registry.DeviceVisibility.exten await this._super(...arguments); this.$target[0].classList.remove('o_conditional_hidden'); }, + // Todo: remove me in master. /** * @override */ - async cleanForSave() { - await this._super(...arguments); - // Kinda hacky: the snippet is forced hidden via onTargetHide on save - // but should be marked as visible as when entering edit mode later, the - // snippet will be shown naturally (as the CSS rules won't apply). - // Without this, the "eye" icon of the visibility panel would be shut - // when entering edit mode. - if (this.$target[0].classList.contains('o_snippet_invisible')) { - this.trigger_up('snippet_option_visibility_update', { show: true }); - } - }, + cleanForSave() {}, //-------------------------------------------------------------------------- // Options diff --git a/addons/website/static/tests/tours/conditional_visibility.js b/addons/website/static/tests/tours/conditional_visibility.js index e7d3053d9c7fe704640b40108ff0b5f45fb8fa7d..df53c57acbb34e92bc1c353e9787eb002d1a7c2a 100644 --- a/addons/website/static/tests/tours/conditional_visibility.js +++ b/addons/website/static/tests/tours/conditional_visibility.js @@ -7,7 +7,27 @@ const snippets = [ id: 's_text_image', name: 'Text - Image', }, + { + id: "s_banner", + name: "Banner", + }, + { + id: "s_popup", + name: "Popup", + }, ]; +function checkEyeIcon(snippetName, visible) { + const eyeIcon = visible ? "fa-eye" : "fa-eye-slash"; + const openOrClose = visible ? "open" : "close"; + const endExplanation = `should be ${openOrClose} in the "Invisible Elements" panel`; + const invisibleElPanel = "o_we_invisible_el_panel"; + return { + content: `The eye icon of ${snippetName} ${endExplanation}`, + trigger: + `.${invisibleElPanel} .o_we_invisible_entry:contains("${snippetName}") i.${eyeIcon}`, + run: () => {}, // it is a check + }; +} wTourUtils.registerWebsitePreviewTour('conditional_visibility_1', { edition: true, url: '/', @@ -55,3 +75,56 @@ wTourUtils.changeOption('ConditionalVisibility', 'we-toggler'), }, }, ]); + +wTourUtils.registerWebsitePreviewTour("conditional_visibility_3", { + edition: true, + test: true, + url: "/", +}, +[ +checkEyeIcon("Text - Image", true), +// Drag a "Banner" snippet on the website. +wTourUtils.dragNDrop(snippets[1]), +// Click on the "Banner" snippet. +wTourUtils.clickOnSnippet(snippets[1]), +wTourUtils.changeOption("ConditionalVisibility", "we-toggler"), +wTourUtils.changeOption("ConditionalVisibility", '[data-name="visibility_conditional"]'), +checkEyeIcon("Banner", true), +{ + content: "click on 'Blocks'", + trigger: "#snippets_menu button:contains('Blocks')", +}, +// Drag a "Popup" snippet on the website. +wTourUtils.dragNDrop(snippets[2]), +{ + content: "Toggle the visibility of the popup", + in_modal: false, + trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Popup')", +}, +checkEyeIcon("Popup", false), +{ + content: "Click on footer", + trigger: "iframe #wrapwrap footer", +}, +wTourUtils.changeOption("HideFooter", "we-checkbox"), +checkEyeIcon("Footer", false), +{ + content: "Click on Header", + trigger: "iframe #wrapwrap header", +}, +wTourUtils.changeOption("TopMenuVisibility", "we-toggler"), +wTourUtils.changeOption("TopMenuVisibility", '[data-visibility="hidden"]'), +checkEyeIcon("Header", false), +{ + content: "Toggle the visibility of the Banner snippet", + trigger: ".o_we_invisible_el_panel .o_we_invisible_entry:contains('Banner')", +}, +checkEyeIcon("Banner", false), +...wTourUtils.clickOnSave(), +...wTourUtils.clickOnEditAndWaitEditMode(), +checkEyeIcon("Header", false), +checkEyeIcon("Text - Image", true), +checkEyeIcon("Popup", false), +checkEyeIcon("Banner", true), +checkEyeIcon("Footer", false), +]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index efc63963e232d75597c0a9eaffff37709fbefd69..92f6b23b5196470f31ced2ea7d32c0ee3aa868a1 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -288,6 +288,7 @@ class TestUi(odoo.tests.HttpCase): def test_10_website_conditional_visibility(self): self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_1', login='admin') self.start_tour('/web', 'conditional_visibility_2', login='admin') + self.start_tour(self.env['website'].get_client_action_url('/'), 'conditional_visibility_3', login='admin') def test_11_website_snippet_background_edition(self): self.env['ir.attachment'].create({