From e67b16fb792f871059784ea673c6d98a00687784 Mon Sep 17 00:00:00 2001 From: Nicolas Bayet Date: Wed, 3 Jan 2024 10:40:38 +0100 Subject: [PATCH] [FIX] web_editor: show the row table ui on the right for rtl languages Before this commit, the row table UI toggler was positioned on the left for RTL languages. Since the first TD was on the far right rather than the far left, it was impossible to click on the row UI. It disappeared whenever an attempt was made to click on it. task-3664939 X-original-commit: fbc167bf84340b4bb6d0f8c59f2734814f56c6df Part-of: odoo/odoo#148543 --- .../js/editor/odoo-editor/src/OdooEditor.js | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index cf0f648c5d2..a144292943e 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -2915,19 +2915,33 @@ export class OdooEditor extends EventTarget { */ _positionTableUi(element) { const tableUiContainerRect = this._tableUiContainer.getBoundingClientRect(); + const isRtl = this.options.direction === 'rtl'; const isRow = element.nodeName === 'TR'; const ui = isRow ? this._rowUi : this._columnUi; const elementRect = element.getBoundingClientRect(); const wrappedUi = ui.firstElementChild; - const table = getInSelection(this.document, 'table'); + const table = closestElement(element, 'table'); + const tableRect = table && table.getBoundingClientRect(); const resetTableSize = ui.querySelector('.o_reset_table_size'); if (table && !table.hasAttribute('style')) { resetTableSize.classList.add('d-none'); } else { resetTableSize.classList.remove('d-none'); } - ui.style.left = elementRect.left - tableUiContainerRect.left - (isRow ? wrappedUi.clientWidth : 0) + 'px'; - ui.style.top = elementRect.top - tableUiContainerRect.top - (isRow ? 0 : wrappedUi.clientHeight) + 'px'; + + let left; + let top; + if (isRow && isRtl) { + left = tableRect.right - tableUiContainerRect.x; + } else if (isRow && !isRtl) { + left = elementRect.left - tableUiContainerRect.left - (isRow ? wrappedUi.clientWidth : 0); + } else { + left = elementRect.left - tableUiContainerRect.left - (isRow ? wrappedUi.clientWidth : 0); + } + top = elementRect.top - tableUiContainerRect.top - (isRow ? 0 : wrappedUi.clientHeight); + + ui.style.left = left + 'px'; + ui.style.top = top + 'px'; wrappedUi.style[isRow ? 'height' : 'width'] = elementRect[isRow ? 'height' : 'width'] + 'px'; }