From 4e48c6d6dea9abb5bd25bb0f5d068e4052cbe95b Mon Sep 17 00:00:00 2001
From: "Mathieu (mano)" <mano@odoo.com>
Date: Fri, 2 Dec 2022 13:11:27 +0000
Subject: [PATCH] [IMP] sale,purchase: product matrix revamp v16

The product matrix was recently converted to OWL but the design was not
adapted to v16 style.

This commit revamps the table to better fits Odoo 16 design.

The previous table had issue with wrong color in dark mode and the
table head title were not aligned with the inputs.

task-3074063

closes odoo/odoo#107102

Related: odoo/enterprise#34743
Signed-off-by: Victor Feyens (vfe) <vfe@odoo.com>
---
 .../static/src/scss/product_matrix.scss       | 73 ++++++-------------
 .../static/src/xml/product_matrix.xml         | 45 +++++++-----
 .../static/src/xml/product_matrix_dialog.xml  |  2 +-
 .../tours/purchase_product_matrix_tour.js     |  4 +-
 .../static/tests/tours/product_matrix_tour.js |  8 +-
 5 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/addons/product_matrix/static/src/scss/product_matrix.scss b/addons/product_matrix/static/src/scss/product_matrix.scss
index 4d27ed224f9..d22f3a32a9c 100644
--- a/addons/product_matrix/static/src/scss/product_matrix.scss
+++ b/addons/product_matrix/static/src/scss/product_matrix.scss
@@ -1,59 +1,28 @@
-.o_web_client .o_matrix_input_table {
-    table {
-        margin-bottom: 0;
-        table-layout: fixed;
-        min-width: 100%;
-        width: auto;
-        max-width: none;
+.o_matrix_input_table {
+    .o_matrix_ps {
+        padding-left: $modal-inner-padding;
     }
-    th, td {
-        border: 0 !important;
-        vertical-align: middle;
-        width: 5em;
+    .o_matrix_pe {
+        padding-right: $modal-inner-padding;
     }
-    .o_matrix_title_header {
-        width: 10em;
-    }
-    thead {
-        color: $o-main-text-color;
-        background-color: $o-brand-lightsecondary;
-        th {
-            text-align: center;
-            white-space: pre-line;
+    //removing input field=number arrows as their size might
+    //change depending on browser default styling and shift input's position
+    .o_matrix_input {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &[type=number] {
+            -moz-appearance: textfield;
         }
     }
-    tbody {
-        background-color: $o-view-background-color;
-        text-align: right;
-        tr {
-            border-top: 1px solid $o-form-lightsecondary;
-            border-bottom: 1px solid $o-form-lightsecondary;
-        }
-        .o_matrix_input {
-            text-align: right;
-            border: none;
-        }
-    }
-    .o_matrix_text_muted{
-        color: lighten($o-main-text-color, 15%);
-        font-style: italic;
-    }
-
-    // ensure white background completely surrounds nocontent bubble
-    .o_matrix_nocontent_container {
-        overflow: auto;
-
-        .oe_view_nocontent_img_link {
-            padding:10px;
-        }
-    }
-}
-
-.o_product_variant_matrix {
-    .form-control {
-        &:focus {
-            box-shadow: none;
-            border: 1px solid $gray-400;
+    .o_matrix_input_td {
+        border: none;
+        &:focus-within {
+            --table-accent-bg: none;
+            background-color: $o-view-background-color;
+            border-bottom: $o-black 1px solid;
         }
     }
 }
diff --git a/addons/product_matrix/static/src/xml/product_matrix.xml b/addons/product_matrix/static/src/xml/product_matrix.xml
index 8e82b7dce4a..3d006412a13 100644
--- a/addons/product_matrix/static/src/xml/product_matrix.xml
+++ b/addons/product_matrix/static/src/xml/product_matrix.xml
@@ -1,33 +1,44 @@
 <template>
     <div t-name="product_matrix.matrix" t-ref="productMatrix" owl="1">
-        <table class="o_matrix_input_table o_product_variant_matrix table table-sm table-striped table-bordered cursor-default">
-            <thead>
-                <tr>
+        <table class="o_matrix_input_table table table-sm table-striped table-hover table-bordered cursor-default mb-0 h-100">
+            <thead class="border-0">
+                <tr class="border-0 h-100">
                     <t t-foreach="header" t-as="column_header" t-key="column_header_index">
-                        <th t-attf-class="o_matrix_title_header {{column_header_first?'text-start':'text-center'}}">
-                            <span t-esc="column_header.name"/>
-                            <t t-call="product_matrix.extra_price">
-                                <t t-set="cell" t-value="column_header"/>
-                            </t>
+                        <th class="border-0"
+                            t-attf-class="{{column_header_first?'o_matrix_ps':''}} {{column_header_last?'o_matrix_pe':''}}">
+                            <div class="d-flex flex-column justify-content-start h-100"
+                                 t-attf-class="{{column_header_first?'align-items-start':'align-items-end'}}">
+                                <span t-esc="column_header.name"/>
+                                <t t-call="product_matrix.extra_price">
+                                    <t t-set="cell" t-value="column_header"/>
+                                </t>
+                            </div>
                         </th>
                     </t>
                 </tr>
             </thead>
             <tbody>
-                <tr t-foreach="rows" t-as="row" t-key="row_index">
+                <tr t-foreach="rows" t-as="row" t-key="row_index" class="border-1 border-end-0 border-start-0">
                     <t t-foreach="row" t-as="cell" t-key="cell_index">
-                        <th t-if="cell.name" class="text-start">
-                            <strong t-esc="cell.name"/>
-                            <t t-call="product_matrix.extra_price"/>
+                        <th t-if="cell.name"
+                            class="border-0"
+                            t-attf-class="{{cell_first?'o_matrix_ps o_matrix_pe':''}} {{cell_last?'o_matrix_pe':''}}">
+                            <div class="d-flex align-items-center justify-content-between">
+                                <strong t-esc="cell.name" class="pe-2"/>
+                                <t t-call="product_matrix.extra_price"/>
+                            </div>
                         </th>
-                        <td t-else="">
+                        <td t-else="" 
+                            class="o_matrix_input_td text-end"
+                            t-attf-class="{{cell_last?'o_matrix_pe':''}}">
                             <div t-if="cell.is_possible_combination" class="input-group">
-                                <input type="number"
-                                       class="o_matrix_input"
-                                       t-att="{'ptav_ids': cell.ptav_ids,'value': cell.qty}"/>
+                                <input  type="number"
+                                        class="o_input o_field_number o_matrix_input border-0 text-end"
+                                        t-att="{'ptav_ids': cell.ptav_ids,'value': cell.qty}"
+                                        onClick="this.select();"/>
                             </div>
                             <span t-else=""
-                                  class="o_matrix_cell o_matrix_text_muted o_matrix_nocontent_container">
+                                  class="text-muted overflow-auto">
                                 Not available
                             </span>
                         </td>
diff --git a/addons/product_matrix/static/src/xml/product_matrix_dialog.xml b/addons/product_matrix/static/src/xml/product_matrix_dialog.xml
index 03c7eeceaf6..e8c7c5ec9bd 100644
--- a/addons/product_matrix/static/src/xml/product_matrix_dialog.xml
+++ b/addons/product_matrix/static/src/xml/product_matrix_dialog.xml
@@ -1,6 +1,6 @@
 <templates>
     <t t-name="product_matrix.dialog" owl="1">
-        <Dialog size="size" title="title">
+        <Dialog size="size" title="title" withBodyPadding="false">
             <t t-call="product_matrix.matrix">
                 <t t-set="header" t-value="props.header"/>
                 <t t-set="rows" t-value="props.rows"/>
diff --git a/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js b/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
index 5a40f06cee1..c232e44e136 100644
--- a/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
+++ b/addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
@@ -25,7 +25,7 @@ tour.register('purchase_matrix_tour', {
 }, {
     trigger: 'ul.ui-autocomplete a:contains("Matrix")',
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // fill the whole matrix with 1's
         $('.o_matrix_input').val(1);
@@ -44,7 +44,7 @@ tour.register('purchase_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil', // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // update some of the matrix values.
         $('.o_matrix_input').slice(8, 16).val(4);
diff --git a/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js b/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
index 6eaed842405..4b8d2bc952c 100644
--- a/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
+++ b/addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
@@ -39,7 +39,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: 'ul.ui-autocomplete a:contains("Matrix")',
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // fill the whole matrix with 1's
         $('.o_matrix_input').val(1);
@@ -56,7 +56,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil',  // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // whitespace normalization: removes newlines around text from markup
         // content, then collapse & convert internal whitespace to regular
@@ -85,7 +85,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil',  // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // reset all qties to 1
         $('.o_matrix_input').val(1);
@@ -106,7 +106,7 @@ tour.register('sale_matrix_tour', {
 }, {
     trigger: '[name=product_template_id] button.fa-pencil',  // edit the matrix
 }, {
-    trigger: '.o_product_variant_matrix',
+    trigger: '.o_matrix_input_table',
     run: function () {
         // update some of the matrix values.
         $('.o_matrix_input').slice(8, 16).val(4);