pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: toolbar outside of editable zone

Browse Source 
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 <Zinston@users.noreply.github.com>
Signed-off-by: Sébastien Geelen <sebgeelen@users.noreply.github.com>
This commit is contained in:
Sébastien Geelen (sge)
2021-09-17 05:59:10 +00:00
parent 86c8cd76cc
commit 02b7bf524a
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+4 -5
View File
@@ -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';