From d10034c8b3679d65ac745e326a1d061f5516a360 Mon Sep 17 00:00:00 2001
From: AllePilli <peal@odoo.com>
Date: Tue, 20 Feb 2024 09:59:21 +0100
Subject: [PATCH] [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>
---
 addons/account/__manifest__.py                |  1 +
 .../static/src/scss/account_payment_term.scss | 24 +++++++++++++++++++
 .../views/account_payment_term_views.xml      |  6 ++---
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 addons/account/static/src/scss/account_payment_term.scss

diff --git a/addons/account/__manifest__.py b/addons/account/__manifest__.py
index 4402fa8fb22..c9c874ad991 100644
--- a/addons/account/__manifest__.py
+++ b/addons/account/__manifest__.py
@@ -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',
diff --git a/addons/account/static/src/scss/account_payment_term.scss b/addons/account/static/src/scss/account_payment_term.scss
new file mode 100644
index 00000000000..e6a8fa13022
--- /dev/null
+++ b/addons/account/static/src/scss/account_payment_term.scss
@@ -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;
+}
diff --git a/addons/account/views/account_payment_term_views.xml b/addons/account/views/account_payment_term_views.xml
index 5ce1f4fdb5d..786515853b3 100644
--- a/addons/account/views/account_payment_term_views.xml
+++ b/addons/account/views/account_payment_term_views.xml
@@ -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"