From 8eaddda4961de499ce4ddb41e28ebdef6d86d9dd Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Tue, 5 Jul 2022 08:50:52 +0000
Subject: [PATCH] [FIX] web: field translate button unapplied style

Before this commit
There is  an issue about the translatable field button not properly
shown.
A translatable field <input/> or <textarea/> should have a right padding
in order to ensure its text content does not go behind the translate
button.

After this commit
Existing style regarding this is reapplied.

Part-of: odoo/odoo#94952
---
 .../static/src/views/fields/char/char_field.xml  |  1 +
 .../static/src/views/fields/text/text_field.xml  |  1 +
 .../tests/views/fields/char_field_tests.js       | 16 +++++++++-------
 .../tests/views/fields/text_field_tests.js       | 10 ++++++----
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/addons/web/static/src/views/fields/char/char_field.xml b/addons/web/static/src/views/fields/char/char_field.xml
index ca328ce60a7..f01c33b5505 100644
--- a/addons/web/static/src/views/fields/char/char_field.xml
+++ b/addons/web/static/src/views/fields/char/char_field.xml
@@ -8,6 +8,7 @@
         <t t-else="">
             <input
                 class="o_input"
+                t-att-class="{'o_field_translate': props.isTranslatable}"
                 t-att-id="props.id"
                 t-att-type="props.isPassword ? 'password' : 'text'"
                 t-att-autocomplete="props.autocomplete or (props.isPassword ? 'new-password' : 'off')"
diff --git a/addons/web/static/src/views/fields/text/text_field.xml b/addons/web/static/src/views/fields/text/text_field.xml
index 1108c7e5b62..f2f4d133235 100644
--- a/addons/web/static/src/views/fields/text/text_field.xml
+++ b/addons/web/static/src/views/fields/text/text_field.xml
@@ -8,6 +8,7 @@
         <t t-else="">
             <textarea
                 class="o_input"
+                t-att-class="{'o_field_translate': props.isTranslatable}"
                 t-att-id="props.id"
                 t-att-placeholder="props.placeholder"
                 t-att-rows="rowCount"
diff --git a/addons/web/static/tests/views/fields/char_field_tests.js b/addons/web/static/tests/views/fields/char_field_tests.js
index 29c4bf2bf39..8ac4b4f9e42 100644
--- a/addons/web/static/tests/views/fields/char_field_tests.js
+++ b/addons/web/static/tests/views/fields/char_field_tests.js
@@ -307,7 +307,7 @@ QUnit.module("Fields", (hooks) => {
     });
 
     QUnit.test("char field translatable", async function (assert) {
-        assert.expect(12);
+        assert.expect(13);
 
         serverData.models.partner.fields.foo.translate = true;
         serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
@@ -367,17 +367,19 @@ QUnit.module("Fields", (hooks) => {
 
         await click(target, ".o_form_button_edit");
 
+        assert.hasClass(target.querySelector("[name=foo] input"), "o_field_translate");
+
         assert.containsOnce(
             target,
-            ".o_field_char .o_field_translate",
+            ".o_field_char .btn.o_field_translate",
             "should have a translate button"
         );
         assert.strictEqual(
-            target.querySelector(".o_field_char .o_field_translate").textContent,
+            target.querySelector(".o_field_char .btn.o_field_translate").textContent,
             "EN",
             "the button should have as test the current language"
         );
-        await click(target, ".o_field_char .o_field_translate");
+        await click(target, ".o_field_char .btn.o_field_translate");
 
         assert.containsOnce(target, ".modal", "a translate modal should be visible");
         assert.containsN(
@@ -405,7 +407,7 @@ QUnit.module("Fields", (hooks) => {
         );
 
         await editInput(target, `.o_field_char input[type="text"]`, "new english value");
-        await click(target, ".o_field_char .o_field_translate");
+        await click(target, ".o_field_char .btn.o_field_translate");
 
         enFields = target.querySelectorAll(".modal .o_translation_dialog .translation input");
         assert.strictEqual(
@@ -509,7 +511,7 @@ QUnit.module("Fields", (hooks) => {
             "<p>first paragraph</p><p>second paragraph</p>"
         );
 
-        await click(target, ".o_field_char .o_field_translate");
+        await click(target, ".o_field_char .btn.o_field_translate");
         assert.containsOnce(target, ".modal", "a translate modal should be visible");
         assert.containsN(
             target,
@@ -559,7 +561,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            `.o_field_char .o_field_translate`,
+            `.o_field_char .btn.o_field_translate`,
             "should have a translate button in create mode"
         );
     });
diff --git a/addons/web/static/tests/views/fields/text_field_tests.js b/addons/web/static/tests/views/fields/text_field_tests.js
index 4ab2837575f..8ee24e0b12c 100644
--- a/addons/web/static/tests/views/fields/text_field_tests.js
+++ b/addons/web/static/tests/views/fields/text_field_tests.js
@@ -372,7 +372,7 @@ QUnit.module("Fields", (hooks) => {
     });
 
     QUnit.test("text field translatable", async function (assert) {
-        assert.expect(3);
+        assert.expect(4);
 
         serverData.models.partner.fields.txt.translate = true;
         serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
@@ -412,12 +412,14 @@ QUnit.module("Fields", (hooks) => {
 
         await click(target, ".o_form_button_edit");
 
+        assert.hasClass(target.querySelector("[name=txt] textarea"), "o_field_translate");
+
         assert.containsOnce(
             target,
-            ".o_field_text .o_field_translate",
+            ".o_field_text .btn.o_field_translate",
             "should have a translate button"
         );
-        await click(target, ".o_field_text .o_field_translate");
+        await click(target, ".o_field_text .btn.o_field_translate");
 
         assert.containsOnce(target, ".modal", "there should be a translation modal");
     });
@@ -444,7 +446,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsOnce(
             target,
-            ".o_field_text .o_field_translate",
+            ".o_field_text .btn.o_field_translate",
             "should have a translate button in create mode"
         );
     });