[IMP] account: payment term preview UI/UX

Emphasize the preview with colors and field borders to:
 - visually outline the preview result
 - clarify to the user that there are editable fields which customize the preview

closes odoo/odoo#155367

Task: 3751514
Signed-off-by: Quentin De Paoli <qdp@odoo.com>
This commit is contained in:
AllePilli
2024-03-13 10:54:02 +00:00
parent 9da06bc19b
commit d10034c8b3
3 changed files with 28 additions and 3 deletions
+1
View File
@@ -89,6 +89,7 @@ You could use this simplified accounting in case you work with an (external) acc
'account/static/src/css/account.css',
'account/static/src/scss/account_journal_dashboard.scss',
'account/static/src/scss/account_searchpanel.scss',
'account/static/src/scss/account_payment_term.scss',
'account/static/src/components/**/*',
'account/static/src/services/*.js',
'account/static/src/js/tours/account.js',
@@ -0,0 +1,24 @@
.o_example_note {
padding-left: $spacer * .5;
padding-right: $spacer * .5;
div.o_draggable {
display: none;
}
div#note_0 {
padding-left: 0px;
&:not(:focus) {
border-color: #B9B9B9;
}
}
.note_editable {
margin-right: 2px;
}
}
.o_example_date {
width: 20% !important;
}
@@ -77,10 +77,10 @@
Example:
<field name="example_amount" class="oe_inline"/>
on
<field name="example_date" class="fw-bold oe_inline"/>
<field name="example_date" class="fw-bold border-bottom o_example_date"/>
</div>
<div colspan="2" class="py-1 bg-view">
<field name="note" placeholder="e.g. Payment terms: 30 days after invoice date"/>
<div colspan="2" class="py-1 bg-secondary">
<field name="note" placeholder="e.g. Payment terms: 30 days after invoice date" class="border-bottom o_example_note"/>
<field name="example_preview_discount" class="ps-2"
invisible="not early_discount or not display_on_invoice"/>
<field name="example_preview" class="ps-2"