From d7bfcc7ff18438f07f731fa306c2bf121d787d51 Mon Sep 17 00:00:00 2001
From: "Jacky (trj)" <trj@odoo.com>
Date: Tue, 15 Jun 2021 13:37:26 +0000
Subject: [PATCH] [REF] point_of_sale: product configurator UX for radio input

The product configurator modal was too wide and the items were not correctly aligned. This commit changes the general aspect of the radio input and add responsiveness.

task-2492631
---
 addons/point_of_sale/static/src/css/pos.css   | 60 +++++++++++++------
 .../xml/Popups/ProductConfiguratorPopup.xml   | 38 +++++++-----
 .../helpers/ProductConfiguratorTourMethods.js |  2 +-
 3 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index f92e8c8e2d0..543f340cce3 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -2475,8 +2475,8 @@ td {
     transform: translate(-50%, -50%);
 }
 
-.pos .modal-dialog .popup-lg{
-    max-width: 80%;
+.pos .modal-dialog .popup-med{
+    max-width: 700px;
     max-height: 600px;
     height: auto;
 }
@@ -2494,7 +2494,7 @@ td {
     margin: 16px;
 }
 
-.pos .popup-lg .body {
+.pos .popup-med .body {
     max-height: 400px;
     overflow-y: auto;
 }
@@ -3010,16 +3010,7 @@ td {
 
 .pos .product_configurator_attributes .attribute {
     margin-bottom: 1em;
-    display: inline-block;
-    width: 45%;
     padding-left: 0.5em;
-    vertical-align: top;
-}
-
-@media screen and (max-width: 768px) {
-    .pos .product_configurator_attributes .attribute {
-        width: 95%;
-    }
 }
 
 .pos .product_configurator_attributes .attribute_name {
@@ -3038,17 +3029,31 @@ td {
     line-height: 1.5;
 }
 
+.pos .product_configurator_attributes .configurator_radio .table {
+    display: grid;
+    grid-template-columns: max-content max-content 1fr;
+    grid-template-rows: max-content;
+}
+
+.pos .product_configurator_attributes .configurator_radio .table div {
+    margin: 5px 0;
+}
+
+.pos .product_configurator_attributes .configurator_radio .attribute-name-cell {
+    grid-column: 1;
+    word-break: break-word;
+    max-width: 300px;
+}
+
+.pos .product_configurator_attributes .configurator_radio .price-extra-cell {
+    grid-column: 2;
+}
+
 .pos .product_configurator_attributes .configurator_radio input[type='radio'] {
     box-shadow: none;
     margin-right: 0.5em;
 }
 
-.pos .product_configurator_attributes .configurator_radio .radio_attribute_label {
-    font-weight: normal;
-    display: inline-block;
-    width: 80%;
-}
-
 .pos .product_configurator_attributes .configurator_radio .price_extra {
     margin-left: 0.5em;
     padding: 0.2em 0.4em;
@@ -3058,7 +3063,9 @@ td {
 }
 
 .pos .product_configurator_attributes .configurator_radio .custom_value {
-    margin: 0.3em 1.3em;
+    margin-left: 0.5em;
+    height: 1.3em;
+
 }
 
 /** Selector attribute **/
@@ -3111,6 +3118,21 @@ td {
     margin: 18px;
 }
 
+@media screen and (max-width: 768px) {
+    .pos .product_configurator_attributes .attribute {
+        width: 95%;
+    }
+
+    .pos .product_configurator_attributes .configurator_radio .attribute-name-cell {
+        max-width: 190px;
+    }
+
+    .pos .product_configurator_attributes .configurator_radio .custom-value-cell {
+        grid-column: 1 / 3;
+        justify-self: center;
+    }
+}
+
 /* TICKET SCREEN */
 
 .ticket-screen {
diff --git a/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml b/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml
index 56c13d0cc82..3322e7c7379 100644
--- a/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml
@@ -3,7 +3,7 @@
 
     <t t-name="ProductConfiguratorPopup" owl="1">
         <div role="dialog" class="modal-dialog">
-            <div class="popup popup-text popup-lg product-configurator-popup">
+            <div class="popup popup-text popup-med product-configurator-popup">
                 <header class="title">
                     <t t-esc="props.product.display_name" />
                 </header>
@@ -31,22 +31,28 @@
 
     <t t-name="RadioProductAttribute" owl="1">
         <div class="configurator_radio">
-            <div t-foreach="values" t-as="value">
-                <input type="radio" t-model="state.selected_value" t-att-name="attribute.id"
-                    t-attf-id="{{ attribute.id }}_{{ value.id }}" t-att-value="value.id"/>
-
-                <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
-                    <div class="radio_attribute_label">
-                        <t t-esc="value.name"/>
-                        <span t-if="value.price_extra" class="price_extra">
-                            + <t t-esc="env.pos.format_currency(value.price_extra)"/>
-                        </span>
+            <div class="table">
+                <t t-foreach="values" t-as="value">
+                    <div class="attribute-name-cell">
+                        <input type="radio" t-model="state.selected_value" t-att-name="attribute.id"
+                                   t-attf-id="{{ attribute.id }}_{{ value.id }}" t-att-value="value.id"/>
+                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                                <t t-esc="value.name"/>
+                        </label>
                     </div>
-
-                    <t t-if="value.id == state.selected_value &amp;&amp; value.is_custom">
-                        <input class="custom_value" type="text" t-model="state.custom_value"/>
-                    </t>
-                </label>
+                    <div t-if="value.price_extra" class="price-extra-cell">
+                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                            <span class="price_extra">
+                                + <t t-esc="env.pos.format_currency(value.price_extra)"/>
+                            </span>
+                        </label>
+                    </div>
+                    <div t-if="value.id == state.selected_value &amp;&amp; value.is_custom" class="custom-value-cell">
+                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}">
+                            <input class="custom_value" type="text" t-model="state.custom_value"/>
+                        </label>
+                    </div>
+                </t>
             </div>
         </div>
     </t>
diff --git a/addons/point_of_sale/static/tests/tours/helpers/ProductConfiguratorTourMethods.js b/addons/point_of_sale/static/tests/tours/helpers/ProductConfiguratorTourMethods.js
index 5d10f9fd430..ccf05c3a736 100644
--- a/addons/point_of_sale/static/tests/tours/helpers/ProductConfiguratorTourMethods.js
+++ b/addons/point_of_sale/static/tests/tours/helpers/ProductConfiguratorTourMethods.js
@@ -8,7 +8,7 @@ odoo.define('point_of_sale.tour.ProductConfiguratorTourMethods', function (requi
             return [
                 {
                     content: `picking radio attribute with name ${name}`,
-                    trigger: `.product-configurator-popup .radio_attribute_label:contains('${name}')`,
+                    trigger: `.product-configurator-popup .attribute-name-cell label:contains('${name}')`,
                 },
             ];
         }