From 533ccf7fb04f3256e7ed621ddb21257685d5f43d Mon Sep 17 00:00:00 2001
From: "Nasreddin Boulif (bon)" <bon@odoo.com>
Date: Fri, 26 Aug 2022 00:17:50 +0000
Subject: [PATCH] [FIX] web[_editor]: Apply RTL position to translate button

Steps to reproduce:

  - Install Inventory
  - Open any product
  - Switch to RTL language
  - Edit the product
  - Try to translate field "Internal Note"

Issue:

  Button is not displayed correctly (nearly hidden).
  Issue also present with wysiwyg or codeview editors.

Cause:

  Applying style `right: 5px` to the button without taking into account
  if layout direction.

Solution:

  On translate button:
  - Apply direction left for side-space if RTL, else right.
  - If wysiwyg is enabled, add it after the buttons in the sidebar.

opw-2962790

closes odoo/odoo#99567

X-original-commit: 56f620ff65ca9c1e5d9a64f5280ea16fd469c87d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/src/js/mass_mailing_widget.js      |  2 +-
 .../web/static/src/legacy/scss/form_view.scss |  4 ----
 .../static/src/js/backend/field_html.js       | 21 ++++++++++++-------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_widget.js b/addons/mass_mailing/static/src/js/mass_mailing_widget.js
index 25c52c2309f..a6071d76d6c 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_widget.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_widget.js
@@ -171,7 +171,7 @@ var MassMailingFieldHtml = FieldHtml.extend({
         if (_t.database.multi_lang && this.record.fields[fieldName].translate && this.res_id) {
             return $('<button>', {
                     type: 'button',
-                    'class': 'o_field_translate fa fa-globe btn btn-link',
+                    'class': 'o_field_translate fa fa-globe btn btn-primary',
                 })
                 .on('click', this._onTranslate.bind(this));
         }
diff --git a/addons/web/static/src/legacy/scss/form_view.scss b/addons/web/static/src/legacy/scss/form_view.scss
index c3ad2e3b886..dad1d971ad2 100644
--- a/addons/web/static/src/legacy/scss/form_view.scss
+++ b/addons/web/static/src/legacy/scss/form_view.scss
@@ -713,10 +713,6 @@ $o-form-label-margin-right: 0px;
             padding-right: 25px;
         }
     }
-    iframe.wysiwyg_iframe + .o_field_translate {
-        right: 30px !important;
-        top: 7px !important;
-    }
 
     // Text field with oe_inline class
     .o_field_text.oe_inline {
diff --git a/addons/web_editor/static/src/js/backend/field_html.js b/addons/web_editor/static/src/js/backend/field_html.js
index 3758ed7abcf..2194fc3e680 100644
--- a/addons/web_editor/static/src/js/backend/field_html.js
+++ b/addons/web_editor/static/src/js/backend/field_html.js
@@ -20,6 +20,7 @@ import "@web/views/fields/html/html_field"; // make sure the html field file has
 import { registry } from '@web/core/registry';
 
 var _lt = core._lt;
+var _t = core._t;
 var TranslatableFieldMixin = basic_fields.TranslatableFieldMixin;
 var DynamicPlaceholderFieldMixin = basic_fields.DynamicPlaceholderFieldMixin;
 var QWeb = core.qweb;
@@ -632,13 +633,19 @@ var FieldHtml = basic_fields.DebouncedField.extend(DynamicPlaceholderFieldMixin)
      */
     _onLoadWysiwyg: function () {
         var $button = this._renderTranslateButton();
-        $button.css({
-            'font-size': '15px',
-            position: 'absolute',
-            right: odoo.debug && this.nodeOptions.codeview ? '40px' : '5px',
-            top: '5px',
-        });
-        this.$el.append($button);
+        var $container;
+        if (this.nodeOptions.cssEdit && this.wysiwyg) {
+            $container = this.wysiwyg.$iframeBody.find('.email_designer_top_actions');
+        } else {
+            $container = this.$el;
+            $button.css({
+                'font-size': '15px',
+                position: 'absolute',
+                top: '5px',
+                [_t.database.parameters.direction === 'rtl' ? 'left' : 'right']: odoo.debug && this.nodeOptions.codeview ? '40px' : '5px',
+            });
+        }
+        $container.append($button);
         if (odoo.debug && this.nodeOptions.codeview) {
             const $codeviewButtonToolbar = $(`
                 <div id="codeview-btn-group" class="btn-group">