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

[FIX] account,purchase,repair,sale,web: fix report layouts

Browse Source 
Following BS4 migration and adding sections and notes.

=====

Document templates:

- Remove margin from <p> in "informations" to allow them to be
	correctly centered vertically on their container.

- Also add a mt- and mb- on their <div> to better handle them going to a new
	line when there are too many of them.

- Add class for section and note to be able to customize them in layouts.

- Add class for price_total to be able to customize it in layouts instead
	of relying on :last-child.

- Add "page-break-inside: avoid;" on the "total" table to not split it
	between pages when it can be avoided.

- Fix sale report template "Informations" to use col-auto just like invoice
	See 6b8d7bb6d6

=====

Boxed layout:
	- fix section & note style
	- fix borders in general
	- fix the total table

Background layout:
	- fix section style
	- fix the total table

Clean layout:
	- fix page number vertical align

task-1889346

closes odoo/odoo#27782
This commit is contained in:
Sébastien Theys
2018-12-03 13:16:52 +00:00
parent 869f99b704
commit dc4a9d3db7
9 changed files with 184 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/account/views/report_invoice.xml
+21 -21
View File
@@ -19,36 +19,36 @@
<span t-field="o.number"/>
</h2>
<div class="row mt32 mb32">
<div class="col-auto" t-if="o.name" name="description">
<div id="informations" class="row mt32 mb32">
<div class="col-auto mw-100 mb-2" t-if="o.name" name="description">
<strong>Description:</strong>
<p t-field="o.name"/>
<p class="m-0" t-field="o.name"/>
</div>
<div class="col-auto" t-if="o.date_invoice" name="invoice_date">
<div class="col-auto mw-100 mb-2" t-if="o.date_invoice" name="invoice_date">
<strong>Invoice Date:</strong>
<p t-field="o.date_invoice"/>
<p class="m-0" t-field="o.date_invoice"/>
</div>
<div class="col-auto" t-if="o.date_due and o.type == 'out_invoice' and o.state in ('open', 'in_payment', 'paid')" name="due_date">
<div class="col-auto mw-100 mb-2" t-if="o.date_due and o.type == 'out_invoice' and o.state in ('open', 'in_payment', 'paid')" name="due_date">
<strong>Due Date:</strong>
<p t-field="o.date_due"/>
<p class="m-0" t-field="o.date_due"/>
</div>
<div class="col-auto" t-if="o.origin" name="origin">
<div class="col-auto mw-100 mb-2" t-if="o.origin" name="origin">
<strong>Source:</strong>
<p t-field="o.origin"/>
<p class="m-0" t-field="o.origin"/>
</div>
<div class="col-auto" t-if="o.partner_id.ref" name="customer_code">
<div class="col-auto mw-100 mb-2" t-if="o.partner_id.ref" name="customer_code">
<strong>Customer Code:</strong>
<p t-field="o.partner_id.ref"/>
<p class="m-0" t-field="o.partner_id.ref"/>
</div>
<div name="reference" class="col-auto" t-if="o.reference">
<div name="reference" class="col-auto mw-100 mb-2" t-if="o.reference">
<strong>Reference:</strong>
<p t-field="o.reference"/>
<p class="m-0" t-field="o.reference"/>
</div>
</div>
<t t-set="display_discount" t-value="any([l.discount for l in o.invoice_line_ids])"/>
<table class="table table-sm" name="invoice_line_table">
<table class="table table-sm o_main_table" name="invoice_line_table">
<thead>
<tr>
<t t-set="colspan" t-value="6"/>
@@ -75,7 +75,7 @@
<t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
<t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
<tr t-att-class="'bg-200 font-weight-bold' if line.display_type == 'line_section' else 'font-italic' if line.display_type == 'line_note' else ''">
<tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
<t t-if="not line.display_type" name="account_invoice_line_accountable">
<td name="account_invoice_line_name"><span t-field="line.name"/></td>
<td class="d-none"><span t-field="line.origin"/></td>
@@ -92,7 +92,7 @@
<td t-attf-class="text-left {{ 'd-none d-md-table-cell' if report_type == 'html' else '' }}">
<span t-esc="', '.join(map(lambda x: (x.description or x.name), line.invoice_line_tax_ids))"/>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
<span t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
</td>
@@ -130,17 +130,17 @@
<div id="total" class="row">
<div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ml-auto">
<table class="table table-sm">
<tr class="border-black" style="border-bottom:1px solid #dddddd;">
<tr class="border-black o_subtotal" style="">
<td><strong>Subtotal</strong></td>
<td class="text-right">
<span t-field="o.amount_untaxed"/>
</td>
</tr>
<t t-foreach="o.amount_by_group" t-as="amount_by_group">
<tr style="border-bottom:1px solid #dddddd;">
<tr style="">
<t t-if="len(o.tax_line_ids) == 1 and o.amount_untaxed == amount_by_group[2]">
<td><span t-esc="amount_by_group[0]"/></td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-esc="amount_by_group[3]" />
</td>
</t>
@@ -151,13 +151,13 @@
<t t-esc="amount_by_group[4]"/>
</span>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-esc="amount_by_group[3]"/>
</td>
</t>
</tr>
</t>
<tr class="border-black">
<tr class="border-black o_total">
<td><strong>Total</strong></td>
<td class="text-right">
<span t-field="o.amount_total"/>
addons/purchase/report/purchase_order_templates.xml
+10 -10
View File
@@ -26,22 +26,22 @@
<h2 t-if="o.state in ['purchase', 'done']">Purchase Order Confirmation #<span t-field="o.name"/></h2>
<h2 t-if="o.state == 'cancel'">Cancelled Purchase Order #<span t-field="o.name"/></h2>
<div class="row mt32 mb32">
<div t-if="o.name" class="col-3">
<div id="informations" class="row mt32 mb32">
<div t-if="o.name" class="col-3 bm-2">
<strong>Our Order Reference:</strong>
<p t-field="o.name"/>
<p t-field="o.name" class="m-0"/>
</div>
<div t-if="o.partner_ref" class="col-3">
<div t-if="o.partner_ref" class="col-3 bm-2">
<strong>Your Order Reference:</strong>
<p t-field="o.partner_ref"/>
<p t-field="o.partner_ref" class="m-0"/>
</div>
<div t-if="o.date_order" class="col-3">
<div t-if="o.date_order" class="col-3 bm-2">
<strong>Order Date:</strong>
<p t-field="o.date_order"/>
<p t-field="o.date_order" class="m-0"/>
</div>
</div>
<table class="table table-sm">
<table class="table table-sm o_main_table">
<thead>
<tr>
<th><strong>Description</strong></th>
@@ -78,7 +78,7 @@
</tbody>
</table>
<div class="row justify-content-end">
<div id="total" class="row justify-content-end">
<div class="col-4">
<table class="table table-sm">
<tr class="border-black">
@@ -95,7 +95,7 @@
t-options='{"widget": "monetary", "display_currency": o.currency_id}'/>
</td>
</tr>
<tr class="border-black">
<tr class="border-black o_total">
<td><strong>Total</strong></td>
<td class="text-right">
<span t-field="o.amount_total"
addons/repair/report/repair_templates_repair_order.xml
+18 -18
View File
@@ -33,28 +33,28 @@
<span t-field="o.name"/>
</h2>
<div class="row mt32 mb32">
<div t-if="o.product_id.name" class="col-3">
<div id="informations" class="row mt32 mb32">
<div t-if="o.product_id.name" class="col-3 bm-2">
<strong>Product to Repair:</strong>
<p t-field="o.product_id.name"/>
<p t-field="o.product_id.name" class="m-0"/>
</div>
<div class="col-3" groups="stock.group_production_lot">
<div class="col-3 bm-2" groups="stock.group_production_lot">
<strong>Lot/Serial Number:</strong>
<t t-if="o.lot_id">
<span t-field="o.lot_id.name"/>
</t>
</div>
<div t-if="o.guarantee_limit" class="col-3">
<div t-if="o.guarantee_limit" class="col-3 bm-2">
<strong>Warranty:</strong>
<p t-field="o.guarantee_limit"/>
<p t-field="o.guarantee_limit" class="m-0"/>
</div>
<div class="col-3">
<div class="col-3 bm-2">
<strong>Printing Date:</strong>
<p t-esc="datetime.datetime.now().strftime('%Y-%m-%d')" t-options="{'widget': 'date'}"/>
<p t-esc="datetime.datetime.now().strftime('%Y-%m-%d')" t-options="{'widget': 'date'}" class="m-0"/>
</div>
</div>
<table class="table table-sm">
<table class="table table-sm o_main_table">
<thead>
<tr>
<th>Description</th>
@@ -68,7 +68,7 @@
</thead>
<tbody>
<t t-if="o.operations">
<tr><td colspan="5"><strong>Parts</strong></td></tr>
<tr class="bg-200 o_line_section"><td colspan="5"><strong>Parts</strong></td></tr>
<tr t-foreach="o.operations" t-as="line">
<td>
<p t-if="line.type == 'add'"><i>(Add)</i> <span t-field="line.name" /></p>
@@ -85,14 +85,14 @@
<td class="text-center">
<span t-esc="','.join(map( lambda x: x.name, line.tax_id))"/>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-field="line.price_subtotal" t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
</td>
</t>
</tr>
</t>
<t t-if="o.fees_lines">
<tr><td colspan="5"><strong>Operations</strong></td></tr>
<tr class="bg-200 o_line_section"><td colspan="5"><strong>Operations</strong></td></tr>
<tr t-foreach="o.fees_lines" t-as="fees">
<td>
<span t-field="fees.name"/>
@@ -108,7 +108,7 @@
<td class="text-center">
<span t-esc="','.join(map( lambda x: x.name, fees.tax_id))"/>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-field="fees.price_subtotal"
t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
</td>
@@ -118,11 +118,11 @@
</tbody>
</table>
<div class="row justify-content-end">
<div id="total" class="row justify-content-end">
<div class="col-4">
<table class="table table-sm">
<t t-if="o.invoice_method !='none'">
<tr class="border-black">
<tr class="border-black o_subtotal">
<td><strong>Total Without Taxes</strong></td>
<td class="text-right">
<span t-field="o.amount_untaxed"
@@ -131,14 +131,14 @@
</tr>
<tr>
<td>Taxes</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-field="o.amount_tax"
t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
</td>
</tr>
<tr class="border-black">
<tr class="border-black o_total">
<td><strong>Total</strong></td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-field="o.amount_total"
t-options='{"widget": "monetary", "display_currency": o.pricelist_id.currency_id}'/>
</td>
addons/sale/report/sale_report_templates.xml
+22 -22
View File
@@ -37,37 +37,37 @@
<span t-field="doc.name"/>
</h2>
<div class="row col mt32 mb32" id="informations">
<div t-if="doc.client_order_ref" class="mr32">
<div class="row mt32 mb32" id="informations">
<div t-if="doc.client_order_ref" class="col-auto mw-100 mb-2">
<strong>Your Reference:</strong>
<p t-field="doc.client_order_ref"/>
<p class="m-0" t-field="doc.client_order_ref"/>
</div>
<div t-if="doc.confirmation_date and doc.state not in ['draft','sent']" class="mr32">
<div t-if="doc.confirmation_date and doc.state not in ['draft','sent']" class="col-auto mw-100 mb-2">
<strong>Date Ordered:</strong>
<p t-field="doc.confirmation_date"/>
<p class="m-0" t-field="doc.confirmation_date"/>
</div>
<div t-if="doc.date_order and doc.state in ['draft','sent']" class="mr32">
<div t-if="doc.date_order and doc.state in ['draft','sent']" class="col-auto mw-100 mb-2">
<strong>Quotation Date:</strong>
<p t-field="doc.date_order"/>
<p class="m-0" t-field="doc.date_order"/>
</div>
<div t-if="doc.user_id.name" class="mr32">
<div t-if="doc.user_id.name" class="col-auto mw-100 mb-2">
<strong>Salesperson:</strong>
<p t-field="doc.user_id"/>
<p class="m-0" t-field="doc.user_id"/>
</div>
<div name="payment_term" t-if="doc.payment_term_id" class="mr32">
<div name="payment_term" t-if="doc.payment_term_id" class="col-auto mw-100 mb-2">
<strong>Payment Terms:</strong>
<p t-field="doc.payment_term_id"/>
<p class="m-0" t-field="doc.payment_term_id"/>
</div>
<div t-if="doc.validity_date and doc.state in ['draft', 'sent']" class="mr32">
<div t-if="doc.validity_date and doc.state in ['draft', 'sent']" class="col-auto mw-100 mb-2">
<strong>Expiration Date:</strong>
<p t-field="doc.validity_date"/>
<p class="m-0" t-field="doc.validity_date"/>
</div>
</div>
<!-- Is there a discount on at least one line? -->
<t t-set="display_discount" t-value="any([l.discount for l in doc.order_line])"/>
<table class="table table-sm">
<table class="table table-sm o_main_table">
<thead>
<tr>
<t t-set="colspan" t-value="5"/>
@@ -94,7 +94,7 @@
<t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
<t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
<tr t-att-class="'bg-200 font-weight-bold' if line.display_type == 'line_section' else 'font-italic' if line.display_type == 'line_note' else ''">
<tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
<t t-if="not line.display_type">
<td><span t-field="line.name"/></td>
<td class="text-right">
@@ -110,7 +110,7 @@
<td class="text-right">
<span t-esc="', '.join(map(lambda x: (x.description or x.name), line.tax_id))"/>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-field="line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
<span t-field="line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
</td>
@@ -145,23 +145,23 @@
</table>
<div class="clearfix">
<div class="row" name="total">
<div id="total" class="row" name="total">
<div t-attf-class="#{'col-4' if report_type != 'html' else 'col-sm-7 col-md-5'} ml-auto">
<table class="table table-sm">
<tr class="border-black" style="border-bottom:1px solid #dddddd;">
<tr class="border-black o_subtotal" style="">
<td><strong>Subtotal</strong></td>
<td class="text-right">
<span t-field="doc.amount_untaxed"/>
</td>
</tr>
<t t-foreach="doc.amount_by_group" t-as="amount_by_group">
<tr style="border-bottom:1px solid #dddddd;">
<tr style="">
<t t-if="amount_by_group[3] == 1 and doc.amount_untaxed == amount_by_group[2]">
<td>
<span t-esc="amount_by_group[0]"/>
<span>&amp;nbsp;<span>on</span>&amp;nbsp;<t t-esc="amount_by_group[2]" t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'/></span>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-esc="amount_by_group[1]"
t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'/>
</td>
@@ -170,14 +170,14 @@
<td>
<span t-esc="amount_by_group[0]"/>
</td>
<td class="text-right">
<td class="text-right o_price_total">
<span t-esc="amount_by_group[1]"
t-options='{"widget": "monetary", "display_currency": doc.pricelist_id.currency_id}'/>
</td>
</t>
</tr>
</t>
<tr class="border-black">
<tr class="border-black o_total">
<td><strong>Total</strong></td>
<td class="text-right">
<span t-field="doc.amount_total"/>
addons/sale/views/sale_portal_templates.xml
+1 -1
View File
@@ -449,7 +449,7 @@
<t t-set="current_subtotal" t-value="current_subtotal + line.price_subtotal" groups="account.group_show_line_subtotals_tax_excluded"/>
<t t-set="current_subtotal" t-value="current_subtotal + line.price_total" groups="account.group_show_line_subtotals_tax_included"/>
<tr t-att-class="'bg-200 font-weight-bold' if line.display_type == 'line_section' else 'font-italic' if line.display_type == 'line_note' else ''">
<tr t-att-class="'bg-200 font-weight-bold o_line_section' if line.display_type == 'line_section' else 'font-italic o_line_note' if line.display_type == 'line_note' else ''">
<t t-if="not line.display_type">
<td id="product_name"><span t-field="line.name"/></td>
<td class="text-right">
addons/web/static/src/scss/layout_background.scss
+34 -20
View File
@@ -34,34 +34,48 @@
background-position: bottom center;
background-repeat: no-repeat;
min-height: 620px;
.table {
border-top: 1px solid gray('300');
}
.table td, .table th {
border-top: none;
}
thead tr th, h2 {
color: $o-brand-odoo;
}
tbody {
color: gray('700');
tr:nth-child(odd) {
background-color: rgba(220, 205, 216, 0.2);
}
tr td {
border-top: none;
tr {
&:nth-child(odd) {
background-color: rgba(220, 205, 216, 0.2);
}
&.o_line_section {
color: $o-brand-odoo;
background-color: rgba(73, 80, 87, 0.2) !important;
}
}
}
/*Total table*/
.row > .col-4 > table {
tr:nth-child(odd) {
background-color: transparent !important;
}
tr:first-child td {
/*we could get rid of this rule if .border-black td would be terminated in report.scss*/
border-top: none !important;
}
tr:last-child td {
color: $o-brand-odoo;
}
}
#total {
table tr:last-child td {
border-bottom: 1px solid black;
/* row div rule compat 12.0 */
.row > div > table,
div#total table {
tr {
&:nth-child(odd) {
background-color: transparent !important;
}
/* first-child & last-child rule compat 12.0 */
&:first-child,
&:last-child,
&.o_subtotal,
&.o_total {
border-top: none !important;
td {
color: $o-brand-odoo;
border-top: 1px solid gray('400') !important;
}
}
}
}
}
addons/web/static/src/scss/layout_boxed.scss
+44 -23
View File
@@ -23,52 +23,73 @@
}
}
.o_report_layout_boxed {
// This is not a general rule since the id is not used in all the reports,
// we should make a general structure for report body to use it everywhere
#informations {
border: 1px solid gray('700');
padding-top: 10px;
margin: 0;
}
> h2 {
text-transform: uppercase;
}
table {
border: 1px solid gray('700');
thead {
border-bottom: 2px solid gray('700');
tr th {
border-bottom: 3px solid gray('700') !important;
text-transform: uppercase;
border: 1px solid gray('700');
}
}
tbody {
color: gray('700');
tr {
td {
// remove border-top from standard layout
border-top: none;
border-right: 1px solid gray('700');
}
td:last-child {
&.o_line_section td,
&.o_line_note td,
&.is-subtotal td {
border-top: 1px solid gray('700');
border-bottom: 1px solid gray('700');
}
&.o_line_section td {
background-color: gray('700');
color: #fff;
}
&.is-subtotal,
td.o_price_total {
background-color: gray('200');
}
}
}
}
/* compat 12.0 */
.page > table:not(.o_main_table) tr td:last-child {
background-color: gray('200');
}
/* compat 12.0 */
.row:not(#total) > div > table tr:not(:first-child):not(:last-child) td:last-child {
background-color: gray('200');
}
/*Total table*/
.row > .col-4 > table {
td {
border-right: none;
}
tr:last-child td, tr:first-child td {
/*we could get rid of this rule if .border-black td would be terminated in report.scss*/
border-top: none !important;
}
tr:first-child td {
background-color: transparent;
}
tr:last-child td {
background-color: gray('700');
color: #fff;
/* row div rule compat 12.0 */
.row > div > table,
div#total table {
tr {
&:first-child,
&.o_subtotal {
border-bottom: 1px solid gray('700');
td:first-child {
border-right: none;
}
}
&:last-child td,
&.o_total td {
background-color: gray('700');
color: #fff;
&:first-child {
border-right: none;
}
}
}
}
}
addons/web/static/src/scss/layout_clean.scss
+19 -13
View File
@@ -18,12 +18,10 @@
font-weight: bolder;
}
.pagenumber {
width: 35px;
height: 35px;
border: 3px solid $o-brand-odoo;
background-color: $o-brand-primary;
color: white;
padding-top: 6px;
padding: 4px 8px;
text-align: center;
}
}
@@ -36,6 +34,10 @@
color: $o-brand-odoo;
}
table {
&.o_main_table {
margin-bottom: 0;
}
thead {
color: $o-brand-odoo;
tr th {
@@ -66,18 +68,22 @@
}
}
/*Total table*/
.row > .col-4 {
width: 43%;
position: relative;
top: -20px;
> table {
tr:last-child td {
border-top: 1px solid gray('200') !important;
}
tr:first-child td {
/*we could get rid of this rule if .border-black td would be terminated in report.scss*/
/* compat 12.0 */
.row:not(#total) > div:has(table) {
top: -16px;
}
/* row col rule compat 12.0 */
.row > div > table,
div#total table {
tr {
&:first-child td,
&.o_subtotal {
border-top: none !important;
}
&:last-child td,
&.o_total {
border-top: 1px solid gray('200') !important;
}
}
}
}
addons/web/static/src/scss/report.scss
+15
View File
@@ -44,3 +44,18 @@ body {
.o_underline {
text-decoration: underline;
}
/*Total table*/
div#total {
page-break-inside: avoid;
table {
tr {
&.o_subtotal,
&.o_total {
td {
border-top: 1px solid black !important;
}
}
}
}
}