From 84d9344e5d7f925bb50ca9d52ffb14042fdcb8c4 Mon Sep 17 00:00:00 2001
From: roen-odoo <roen@odoo.com>
Date: Tue, 13 Jun 2023 14:45:44 +0000
Subject: [PATCH] [FIX] point_of_sale: fix css for cash in/out popup

Current behavior:
When the text for the button in the cash in/out popup is too long, the
first number of the amount is hidden behind the currency symbol.

Steps to reproduce:
- Install l10n_bo and PoS
- Switch language to Spanish
- Create and open a PoS with a cash payment method
- Open the cash in/out popup, enter a value.
- The first number of the amount is hidden behind the currency symbol.

opw-3324406

closes odoo/odoo#126120

X-original-commit: decafb5b7d59967d64f5bb553e95fe32c7b0ccb8
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
Signed-off-by: Robin Engels (roen) <roen@odoo.com>
---
 .../cash_move_popup/cash_move_popup.scss      | 39 ++++++++++---------
 .../cash_move_popup/cash_move_popup.xml       | 12 ++----
 addons/point_of_sale/static/src/scss/pos.scss |  1 +
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss
index 1fb8ec6077e..4a2e5354767 100644
--- a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss
+++ b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.scss
@@ -4,6 +4,14 @@
     .input-amount {
         display: flex;
         flex-flow: row;
+
+        .input-container {
+            padding: 0px;
+            padding-left: 5px;
+            padding-right: 5px;
+            display: flex;
+            align-items: center;
+        }
     }
 
     .input-type {
@@ -40,25 +48,6 @@
         }
     }
 
-    .input-field {
-        position: relative;
-        flex-grow: 1;
-
-        .currency {
-            position: absolute;
-            right: 10px;
-            top: 10px;
-        }
-
-        .left-currency {
-            position: absolute;
-            left: 10px;
-            top: 10px;
-            background-color: #fff;
-            padding-right: 8px;
-        }
-    }
-
     textarea {
         resize: none;
         margin-top: 10px;
@@ -85,6 +74,18 @@
             margin-right: 0;
         }
     }
+
+    .input-container .input-field,
+    .input-container .input-field:focus {
+        position: relative;
+        flex-grow: 1;
+        border: none;
+        outline: none;
+        box-shadow: none;
+        background-color: transparent;
+        padding: 0px;
+        padding-left: 5px;
+        }
 }
 
 .cash-move {
diff --git a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml
index 59f779884a6..276d29aecc5 100644
--- a/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml
+++ b/addons/point_of_sale/static/src/app/navbar/cash_move_popup/cash_move_popup.xml
@@ -12,14 +12,10 @@
                         <span t-on-click="() => this.onClickButton('out')" class="input-type" t-att-class="{ 'red-highlight': state.type === 'out' }">
                             Cash Out
                         </span>
-                        <div class="input-field">
-                            <input type="text" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
-                            <t t-if="pos.currency.symbol.length > 1">
-                                <span class="left-currency" t-esc="pos.currency.symbol" />
-                            </t>
-                            <t t-else="">
-                                <span class="currency" t-esc="pos.currency.symbol" />
-                            </t>
+                        <div class="input-container popup-input" >
+                            <span class="currency" t-esc="pos.currency.symbol" t-if="pos.currency.position=='before'"/>
+                            <input class="input-field" type="text" name="amount" t-model="state.amount" t-ref="amountInput" t-on-keypress="_onAmountKeypress"/>
+                            <span class="currency" t-esc="pos.currency.symbol" t-if="pos.currency.position=='after'"/>
                         </div>
                     </div>
                     <textarea name="reason" t-model="state.reason" placeholder="Reason"></textarea>
diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index c656c592358..3e0d0c3eb3f 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -2755,6 +2755,7 @@ td {
     text-align: right;
 }
 .pos .popup input:focus,
+.pos .popup-input:focus-within,
 .pos .popup-input.active {
     outline: none;
     box-shadow: 0px 0px 0px 3px $primary;