From 6048355feebdfbc99fb1b2f9649fe7854a1eb864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Warnon?= <awa@odoo.com>
Date: Tue, 9 Oct 2018 08:29:01 +0000
Subject: [PATCH] [IMP] (website_)sale: improve product configurator layout

Targets commit d3530eb07e24278117ab396ecb86a59deecc312d

Purpose
=======
- Improved the layout of the product configurator window in both sale order and web shop
- Added some other minor improvements such as editable="bottom" instead of "top", fields reordering, ...

closes odoo/odoo#27567
---
 .../product/views/product_attribute_views.xml |  4 +-
 .../src/js/product_configurator_mixin.js      | 20 +++++---
 .../static/src/scss/product_configurator.scss | 50 ++++++++++++++-----
 .../sale_product_configurator_templates.xml   | 47 +++++++++--------
 .../static/src/scss/website_sale.scss         |  4 --
 5 files changed, 78 insertions(+), 47 deletions(-)

diff --git a/addons/product/views/product_attribute_views.xml b/addons/product/views/product_attribute_views.xml
index 43cd832d743..503990fead8 100644
--- a/addons/product/views/product_attribute_views.xml
+++ b/addons/product/views/product_attribute_views.xml
@@ -21,6 +21,7 @@
                     <group name="main_fields">
                         <label for="name" string="Attribute Name"/>
                         <field name="name" nolabel="1"/>
+                        <field name="create_variant" widget="radio"/>
                     </group>
                 </group>
                 <group name="values_ids">
@@ -31,7 +32,6 @@
                             <field name="name"/>
                         </tree>
                     </field>
-                    <field name="create_variant" widget="radio"/>
                 </group>
             </form>
         </field>
@@ -111,7 +111,7 @@
                     <field name="name" />
                     <field name="price_extra" />
                     <field name="exclude_for" widget="one2many_list" mode="tree">
-                        <tree editable="top">
+                        <tree editable="bottom">
                             <field name="product_tmpl_id" />
                             <field name="value_ids" widget="many2many_tags" options="{'no_create': true}" />
                         </tree>
diff --git a/addons/sale/static/src/js/product_configurator_mixin.js b/addons/sale/static/src/js/product_configurator_mixin.js
index 1dfd62b815b..25ee4adf80e 100644
--- a/addons/sale/static/src/js/product_configurator_mixin.js
+++ b/addons/sale/static/src/js/product_configurator_mixin.js
@@ -108,18 +108,26 @@ var ProductConfiguratorMixin = {
                     $variantContainer.find('.variant_custom_value_label').remove();
                     $variantContainer.find('.variant_custom_value').remove();
 
-                    var $label = $('<label>', {
-                        html: attributeValueName + ': ',
-                        class: 'variant_custom_value_label'
-                    });
-
                     var $input = $('<input>', {
                         type: 'text',
                         'data-attribute_value_id': attributeValueId,
                         'data-attribute_value_name': attributeValueName,
                         class: 'variant_custom_value form-control'
                     });
-                    $variantContainer.append($label).append($input);
+
+                    var isRadioInput = $target.is('input[type=radio]') &&
+                        $target.closest('label.css_attribute_color').length === 0;
+
+                    if (isRadioInput) {
+                        $input.addClass('custom_value_radio');
+                        $target.closest('div').after($input);
+                    } else {
+                        var $label = $('<label>', {
+                            html: attributeValueName + ': ',
+                            class: 'variant_custom_value_label'
+                        });
+                        $variantContainer.append($label).append($input);
+                    }
                 }
             } else {
                 $variantContainer.find('.variant_custom_value_label').remove();
diff --git a/addons/sale/static/src/scss/product_configurator.scss b/addons/sale/static/src/scss/product_configurator.scss
index a223118f7c2..ca3b9f63af2 100644
--- a/addons/sale/static/src/scss/product_configurator.scss
+++ b/addons/sale/static/src/scss/product_configurator.scss
@@ -63,23 +63,47 @@ label.css_attribute_color.css_not_available {
     background-size: cover;
 }
 
+.variant_attribute {
+    padding-bottom: 0.5rem;
+
+    .attribute_name {
+        padding-bottom: 0.5rem;
+        display: inline-block;
+    }
+
+    .radio_input {
+        margin-right: 0.7rem;
+        vertical-align: middle;
+    }
+
+    .radio_input_value {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 1;
+    }
+
+    .variant_custom_value {
+        margin-bottom: 0.7rem;
+    }
+
+    .custom_value_radio {
+        margin: 0.3rem 0rem 0.3rem 1.6rem;
+    }
+
+    .variant_custom_value_label {
+        margin: 0.3rem 0rem;
+    }
+}
+
 .o_product_configurator {
     .product_detail_img {
         max-height: 240px;
     }
 
-    .variant_custom_value {
-        margin-bottom: 10px;
-    }
-
-    .variant_custom_value_label {
-        margin-top: 10px;
-    }
-}
-
-.configurator_container {
-    ul ul {
-        margin-left: 1.5rem;
+    .variant_attribute {
+        .custom_value_radio {
+            margin: 0.3rem 0rem 0.3rem 2.1rem;
+        }
     }
 }
 
@@ -133,7 +157,7 @@ label.css_attribute_color.css_not_available {
     }
 
     .td-qty {
-        width: 130px;
+        width: 200px;
         a.input-group-addon {
             background-color: transparent;
             border: 0px;
diff --git a/addons/sale/views/sale_product_configurator_templates.xml b/addons/sale/views/sale_product_configurator_templates.xml
index 66e520d570e..99c89a03f29 100644
--- a/addons/sale/views/sale_product_configurator_templates.xml
+++ b/addons/sale/views/sale_product_configurator_templates.xml
@@ -138,7 +138,7 @@
         </div>
         </td>
         <td class="td-qty">
-        <div class="float-right">
+        <div class="float-left">
             <t t-call="sale.variants"/>
         </div>
         </td>
@@ -177,9 +177,9 @@
       <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
       <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
         <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
-          <li t-att-data-attribute_id="variant_id.attribute_id.id" t-att-data-attribute_name="variant_id.attribute_id.name">
+          <li t-att-data-attribute_id="variant_id.attribute_id.id" t-att-data-attribute_name="variant_id.attribute_id.name" class="variant_attribute">
 
-            <strong t-field="variant_id.attribute_id.name"/>
+            <strong t-field="variant_id.attribute_id.name" class="attribute_name" />
 
             <t t-if="variant_id.attribute_id.type == 'select'">
               <select
@@ -210,25 +210,28 @@
                   <t t-set="inc" t-value="0"/>
                   <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
                       <li class="form-group js_attribute_value" style="margin: 0;">
-                          <label class="col-form-label" style="margin: 0 20px;">
-                              <input type="radio"
-                                t-attf-class="js_variant_change  #{variant_id.attribute_id.create_variant}"
-                                t-att-checked="'checked' if not inc else None"
-                                t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
-                                t-att-value="value_id.id"
-                                t-att-data-value_id="value_id.product_attribute_value_id.id"
-                                t-att-data-value_name="value_id.name"
-                                t-att-data-attribute_name="value_id.attribute_id.name"
-                                t-att-data-is_custom="value_id.is_custom"
-                                style="vertical-align: top; margin-right: 10px;"/>
-                              <span t-field="value_id.name"/>
-                              <span class="badge badge-pill" t-if="value_id.price_extra">
-                                <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
-                                    "widget": "monetary",
-                                    "from_currency": product.currency_id,
-                                    "display_currency": to_currency or website.currency_id
-                                }'/>
-                              </span>
+                          <label class="col-form-label">
+                              <div>
+                                <input type="radio"
+                                    t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
+                                    t-att-checked="'checked' if not inc else None"
+                                    t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
+                                    t-att-value="value_id.id"
+                                    t-att-data-value_id="value_id.product_attribute_value_id.id"
+                                    t-att-data-value_name="value_id.name"
+                                    t-att-data-attribute_name="value_id.attribute_id.name"
+                                    t-att-data-is_custom="value_id.is_custom" />
+                                    <div class="radio_input_value">
+                                        <span t-field="value_id.name"/>
+                                        <span class="badge badge-pill" t-if="value_id.price_extra">
+                                            <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
+                                                "widget": "monetary",
+                                                "from_currency": product.currency_id,
+                                                "display_currency": to_currency or website.currency_id
+                                            }'/>
+                                        </span>
+                                    </div>
+                                </div>
                           </label>
                       </li>
                       <t t-set="inc" t-value="inc+1"/>
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index f2eed17f3b6..04c19167df1 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -25,10 +25,6 @@
         }
     }
 
-    ul ul {
-        margin-left: 1.5em;
-    }
-
     h1[itemprop="name"],
     .oe_product_cart form h5 {
         word-wrap: break-word;