From aca85f9f197de465b47443cff099d9b2c67b2faf Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 3 Sep 2021 13:19:58 +0000
Subject: [PATCH] [IMP] website_sale: improve the design of the product block
 options

task-2501515

Part-of: odoo/odoo#74206
---
 .../static/src/js/editor/snippets.options.js  |  3 +-
 .../static/src/scss/website_sale.editor.scss  |  4 +-
 .../website_sale/views/snippets/snippets.xml  | 47 ++++++++++---------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 466e37a4fc6..fa037627f3a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3477,7 +3477,8 @@ const SnippetOptionWidget = Widget.extend({
         // TODO improve this, this is hackish to rely on DOM structure here.
         // Layouting elements should be handled as widgets or other.
         for (const el of this.$el.find('we-row')) {
-            el.classList.toggle('d-none', !$(el).find('> div > .o_we_user_value_widget').not('.d-none').length);
+            const $userValueWidget = $(el).find('> div > .o_we_user_value_widget');
+            el.classList.toggle('d-none', $userValueWidget.length && !$userValueWidget.not('.d-none').length);
         }
         for (const el of this.$el.find('we-collapse')) {
             const $el = $(el);
diff --git a/addons/website_sale/static/src/scss/website_sale.editor.scss b/addons/website_sale/static/src/scss/website_sale.editor.scss
index deacc64ebd4..58757206f00 100644
--- a/addons/website_sale/static/src/scss/website_sale.editor.scss
+++ b/addons/website_sale/static/src/scss/website_sale.editor.scss
@@ -1,8 +1,6 @@
 .o_wsale_soptions_menu_sizes {
-    margin-top: $o-we-sidebar-content-field-spacing;
-
     we-title {
-        width: $o-we-sidebar-content-field-label-width;
+        align-self: flex-start;
     }
 
     table {
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index b7a525dafd2..817373c6004 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -76,24 +76,32 @@
         <div data-js="WebsiteSaleProductsItem"
             data-selector="#products_grid .oe_product"
             data-no-check="true">
-            <div class="o_wsale_soptions_menu_sizes d-flex">
-                <we-title>Size</we-title>
-                <table>
-                    <tr>
-                        <td/><td/><td/><td/>
-                    </tr>
-                    <tr>
-                        <td/><td/><td/><td/>
-                    </tr>
-                    <tr>
-                        <td/><td/><td/><td/>
-                    </tr>
-                    <tr>
-                        <td/><td/><td/><td/>
-                    </tr>
-                </table>
+            <div class="o_wsale_soptions_menu_sizes">
+                <we-row string="Size">
+                    <table>
+                        <tr>
+                            <td/><td/><td/><td/>
+                        </tr>
+                        <tr>
+                            <td/><td/><td/><td/>
+                        </tr>
+                        <tr>
+                            <td/><td/><td/><td/>
+                        </tr>
+                        <tr>
+                            <td/><td/><td/><td/>
+                        </tr>
+                    </table>
+                </we-row>
             </div>
 
+            <we-row string="Re-order" data-no-preview="true">
+                <we-button title="Push to top" data-change-sequence="top" class="fa fa-fw fa-angle-double-left"/>
+                <we-button title="Push up" data-change-sequence="up" class="fa fa-fw fa-angle-left"/>
+                <we-button title="Push down" data-change-sequence="down" class="fa fa-fw fa-angle-right"/>
+                <we-button title="Push to bottom" data-change-sequence="bottom" class="fa fa-fw fa-angle-double-right"/>
+            </we-row>
+
             <we-row data-name="ribbon_options">
                 <we-select string="Ribbon" class="o_wsale_ribbon_select">
                     <we-button data-set-ribbon="" data-name="no_ribbon_opt">None</we-button>
@@ -119,13 +127,6 @@
                     <we-button data-set-ribbon-position="right">Right</we-button>
                 </we-select>
             </div>
-
-            <div name="reordering" data-no-preview="true">
-                <we-button data-change-sequence="top">Push to top</we-button>
-                <we-button data-change-sequence="up">Push up</we-button>
-                <we-button data-change-sequence="down">Push down</we-button>
-                <we-button data-change-sequence="bottom">Push to bottom</we-button>
-            </div>
         </div>
         <div data-selector="#wrapwrap > header"
             data-no-check="true"