From cbe58fd16f9bf1a7ac2fbd5afa6acd3e4585f262 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Mon, 3 Oct 2022 12:01:46 +0000
Subject: [PATCH] [IMP] website: move device visibility options onto visibility
 options

Before this commit the Device visibility option was on its own row
inside the options panel.

This commit moves the buttons of the Device visibility option before
the dropdown inside the main row of the Visibility option.

task-2900730

closes odoo/odoo#102154

X-original-commit: 82000acfb6f8c7884994135413dcddac5441f8b4
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.options.js  |  7 ++--
 addons/website/views/snippets/snippets.xml    | 34 +++++++++++--------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index bfcafc27a93..bda6027aade 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2910,7 +2910,7 @@ options.registry.ScrollButton = options.Class.extend({
     },
 });
 
-options.registry.ConditionalVisibility = options.Class.extend({
+options.registry.ConditionalVisibility = options.registry.DeviceVisibility.extend({
     /**
      * @constructor
      */
@@ -2942,6 +2942,7 @@ options.registry.ConditionalVisibility = options.Class.extend({
      * @override
      */
     async onTargetHide() {
+        await this._super(...arguments);
         if (this.$target[0].classList.contains('o_snippet_invisible')) {
             this.$target[0].classList.add('o_conditional_hidden');
         }
@@ -2950,12 +2951,14 @@ options.registry.ConditionalVisibility = options.Class.extend({
      * @override
      */
     async onTargetShow() {
+        await this._super(...arguments);
         this.$target[0].classList.remove('o_conditional_hidden');
     },
     /**
      * @override
      */
-    cleanForSave() {
+    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).
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 8b8ef6bbfed..e125d7b60a4 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1210,13 +1210,26 @@
         </we-select>
     </div>
 
+    <t t-set="_device_visibility_widgets">
+        <we-button class="o_we_device" data-toggle-device-visibility="no_desktop" title="Show/Hide on Desktop"
+            data-no-preview="true"
+            data-img="/website/static/src/img/snippets_options/desktop_invisible.svg"
+        />
+        <we-button class="o_we_device" data-toggle-device-visibility="no_mobile" title="Show/Hide on Mobile"
+            data-no-preview="true"
+            data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
+        />
+    </t>
     <div data-js="ConditionalVisibility" data-selector="section">
         <t t-set="current_website" t-value="request.env['website'].get_current_website()"/>
         <we-collapse>
-            <we-select string="Visibility" data-attribute-name="visibility" data-no-preview="true">
-                <we-button data-select-data-attribute="">Always visible</we-button>
-                <we-button data-select-data-attribute="conditional" data-select-class="o_snippet_invisible" data-name="visibility_conditional">Conditionally</we-button>
-            </we-select>
+            <we-row string="Visibility">
+                <t t-out="_device_visibility_widgets"/>
+                <we-select data-attribute-name="visibility" data-no-preview="true">
+                    <we-button data-select-data-attribute="">No condition</we-button>
+                    <we-button data-select-data-attribute="conditional" data-select-class="o_snippet_invisible" data-name="visibility_conditional">Conditionally</we-button>
+                </we-select>
+            </we-row>
 
             <t t-if="request.geoip.get('country_code')">
                 <t t-call="website.snippet_options_conditional_visibility">
@@ -1280,17 +1293,10 @@
     </div>
 
     <!-- Mobile/Desktop display options -->
-    <div data-js="DeviceVisibility" data-selector="section, section .row > div"
+    <div data-js="DeviceVisibility" data-selector="section .row > div"
             data-exclude=".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize">
-        <we-row string="Device">
-            <we-button class="o_we_device" data-toggle-device-visibility="no_desktop" title="Show/Hide on Desktop"
-                data-no-preview="true"
-                data-img="/website/static/src/img/snippets_options/desktop_invisible.svg"
-            />
-            <we-button class="o_we_device" data-toggle-device-visibility="no_mobile" title="Show/Hide on Mobile"
-                data-no-preview="true"
-                data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"
-            />
+        <we-row string="Visibility">
+            <t t-out="_device_visibility_widgets"/>
         </we-row>
     </div>