[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>
This commit is contained in:
Nasreddin Boulif (bon)
2022-09-05 23:51:09 +02:00
parent 5f7da6920b
commit 533ccf7fb0
3 changed files with 15 additions and 12 deletions
@@ -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));
}
@@ -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 {
@@ -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">