From 02b7bf524a7cc8744283f1de589661fd3e0e3400 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Geelen=20=28sge=29?= Date: Thu, 16 Sep 2021 13:40:22 +0000 Subject: [PATCH] [FIX] web_editor: toolbar outside of editable zone MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On very small editors the restriction on the toolbar size and position could generate issue (blocking text visibility). So we changed the rules to allow the toolbar to overflow outsize of the editable zone. task-2648156 closes odoo/odoo#76710 X-original-commit: 6390a4225ea8a97fd0bc0b267d0d016846d27e46 Signed-off-by: Antoine Guenet Signed-off-by: Sébastien Geelen --- .../web_editor/static/lib/odoo-editor/src/OdooEditor.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js index aff0a3f1709..358609ba919 100644 --- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js @@ -1886,7 +1886,7 @@ export class OdooEditor extends EventTarget { const OFFSET = 10; let isBottom = false; this.toolbar.classList.toggle('toolbar-bottom', false); - this.toolbar.style.maxWidth = this.editable.offsetWidth - OFFSET * 2 + 'px'; + this.toolbar.style.maxWidth = window.innerWidth - OFFSET * 2 + 'px'; const sel = this.document.getSelection(); const range = sel.getRangeAt(0); const isSelForward = @@ -1896,7 +1896,6 @@ export class OdooEditor extends EventTarget { const toolbarHeight = this.toolbar.offsetHeight; const editorRect = this.editable.getBoundingClientRect(); const parentContextRect = this.options.getContextFromParentRect(); - const editorLeftPos = Math.max(0, editorRect.left); const editorTopPos = Math.max(0, editorRect.top); const scrollX = this.document.defaultView.scrollX; const scrollY = this.document.defaultView.scrollY; @@ -1904,9 +1903,9 @@ export class OdooEditor extends EventTarget { // Get left position. let left = selRect.left + OFFSET; // Ensure the toolbar doesn't overflow the editor on the left. - left = Math.max(editorLeftPos + OFFSET, left); + left = Math.max(OFFSET, left); // Ensure the toolbar doesn't overflow the editor on the right. - left = Math.min(editorLeftPos + this.editable.offsetWidth - OFFSET - toolbarWidth, left); + left = Math.min(window.innerWidth - OFFSET - toolbarWidth, left); // Offset left to compensate for parent context position (eg. Iframe). left += parentContextRect.left; this.toolbar.style.left = scrollX + left + 'px'; @@ -1920,7 +1919,7 @@ export class OdooEditor extends EventTarget { isBottom = true; } // Ensure the toolbar doesn't overflow the editor on the bottom. - top = Math.min(editorTopPos + this.editable.offsetHeight - OFFSET - toolbarHeight, top); + top = Math.min(window.innerHeight - OFFSET - toolbarHeight, top); // Offset top to compensate for parent context position (eg. Iframe). top += parentContextRect.top; this.toolbar.style.top = scrollY + top + 'px';