From edc71cda9f992a33fc2c419e9a466861e100074f Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 11 May 2023 11:42:47 +0000
Subject: [PATCH] [FIX] website: fix contradiction between visibility class and
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, when a snippet section was hidden on mobile devices
and its height was then set to 50% or 100%, the visibility classes
remained as "d-lg-block" instead of "d-lg-flex". This inconsistency
resulted in the content not being vertically centered until the "hidden
on mobile" toggle was turned off and then back on.

Steps to reproduce the bug:
- In edit mode, drag and drop a "Text" snippet onto the page.
- Click on the "Mobile visibility" option button to hide the snippet on
mobile devices.
- Click on the "50%" button in the "Height" option of the snippet.
- Bug: The content within the "Text" snippet is not vertically centered.

This commit fixes the issue by properly updating the CSS class set by
the mobile visibility option when the "height" option is enabled.

task-3224575

closes odoo/odoo#123135

X-original-commit: 0377b035eff80baec3f78ea984e12ad1422dbf7a
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
---
 .../static/src/js/editor/snippets.options.js  | 22 +++++++++++++++++++
 .../static/src/scss/website.wysiwyg.scss      |  4 ++++
 2 files changed, 26 insertions(+)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index fe9746bce95..f19efa56334 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -3077,6 +3077,28 @@ options.registry.ScrollButton = options.Class.extend({
             this.$button.detach();
         }
     },
+    /**
+     * @override
+     */
+    async selectClass(previewMode, widgetValue, params) {
+        await this._super(...arguments);
+        // If a "d-lg-block" class exists on the section (e.g., for mobile
+        // visibility option), it should be replaced with a "d-lg-flex" class.
+        // This ensures that the section has the "display: flex" property
+        // applied, which is the default rule for both "height" option classes.
+        if (params.possibleValues.includes("o_half_screen_height")) {
+            if (widgetValue) {
+                this.$target[0].classList.replace("d-lg-block", "d-lg-flex");
+            } else if (this.$target[0].classList.contains("d-lg-flex")) {
+                // There are no known cases, but we still make sure that the
+                // <section> element doesn't have a "display: flex" originally.
+                this.$target[0].classList.remove("d-lg-flex");
+                const sectionStyle = window.getComputedStyle(this.$target[0]);
+                const hasDisplayFlex = sectionStyle.getPropertyValue("display") === "flex";
+                this.$target[0].classList.add(hasDisplayFlex ? "d-lg-flex" : "d-lg-block");
+            }
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index ec2c4f133ab..2ed8c7fc472 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -48,6 +48,10 @@ html[data-edit_translations="1"] {
     opacity: 70%;
     position: relative;
 
+    &.d-lg-flex, &.d-md-flex, &.o_half_screen_height, &.o_full_screen_height {
+        // e.g. Useful if "Height" option (50% or 100%) is enabled.
+        display: flex !important;
+    }
     &::before {
         position: absolute;
         // Content is 0px wide => use available width.