pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] sale,purchase: product matrix revamp v16

Browse Source 
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>
This commit is contained in:
Mathieu (mano)
2022-12-15 12:37:01 +01:00
parent ad9bd90d7b
commit 4e48c6d6de
5 changed files with 56 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/product_matrix/static/src/scss/product_matrix.scss
+21 -52
View File
@@ -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;
}
}
}
addons/product_matrix/static/src/xml/product_matrix.xml
+28 -17
View File
@@ -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>
addons/product_matrix/static/src/xml/product_matrix_dialog.xml
+1 -1
View File
@@ -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"/>
addons/purchase_product_matrix/static/tests/tours/purchase_product_matrix_tour.js
+2 -2
View File
@@ -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);
addons/test_sale_product_configurators/static/tests/tours/product_matrix_tour.js
+4 -4
View File
@@ -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);