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 e5e666624dd..c3b1c3e04e5 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 @@ -1992,6 +1992,47 @@ export class OdooEditor extends EventTarget { this.toolbarShow(); } } + /** + * If the mouse is hovering over one of the borders of a table cell element, + * return the side of that border ('left'|'top'|'right'|'bottom'). + * Otherwise, return false. + * + * @private + * @param {MouseEvent} ev + * @returns {boolean} + */ + _isHoveringTdBorder(ev) { + if (ev.target && ev.target.nodeName === 'TD') { + const SENSITIVITY = 5; + const targetRect = ev.target.getBoundingClientRect(); + if (ev.clientX <= targetRect.x + SENSITIVITY) { + return 'left'; + } else if (ev.clientY <= targetRect.y + SENSITIVITY) { + return 'top'; + } else if (ev.clientX >= targetRect.x + ev.target.clientWidth - SENSITIVITY) { + return 'right'; + } else if (ev.clientY >= targetRect.y + ev.target.clientHeight - SENSITIVITY) { + return 'bottom'; + } + } + return false; + } + /** + * Change the cursor to a resizing cursor, in the direction specified. If no + * direction is specified, return the cursor to its default. + * + * @private + * @param {'col'|'row'|false} direction 'col'/'row' to hint column/row, + * false to remove the hints + */ + _toggleTableResizeCursor(direction) { + this.editable.classList.remove('o_col_resize', 'o_row_resize'); + if (direction === 'col') { + this.editable.classList.add('o_col_resize'); + } else if (direction === 'row') { + this.editable.classList.add('o_resizing_row'); + } + } // HISTORY // ======= @@ -2129,7 +2170,7 @@ export class OdooEditor extends EventTarget { const sel = this.document.getSelection(); if (!hasTableSelection(this.editable)) { - if (this.editable.classList.contains('o_resizing_column') || this.editable.classList.contains('o_resizing_row')) { + if (this.editable.classList.contains('o_col_resize') || this.editable.classList.contains('o_row_resize')) { show = false; } if (!sel.anchorNode) { @@ -3309,6 +3350,8 @@ export class OdooEditor extends EventTarget { if (this._currentMouseState === 'mousedown') { this._handleSelectionInTable(ev); } + const sideToDirection = {top: 'row', right: 'col', bottom: 'row', left: 'col'}; + this._toggleTableResizeCursor(sideToDirection[this._isHoveringTdBorder(ev)] || false); } /** diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss index 9bbbe9bb4ab..201ffd2ec44 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/style.scss @@ -1,11 +1,27 @@ -.odoo-editor-editable ::selection { - /* For color conversion over white background, use X = (Y-(1-P)*255)/P where - X = converted color component (R, G, B) (0 <= X <= 255) - Y = desired apparent color component (R, G, B) (0 <= Y <= 255) - P = opacity (0 <= P <=1) - (limitation: Y + 255P >= 255) - */ - background-color: rgba(117, 167, 249, 0.5) !important; /* #bad3fc equivalent when over white*/ +.odoo-editor-editable { + ::selection { + /* For color conversion over white background, use X = (Y-(1-P)*255)/P where + X = converted color component (R, G, B) (0 <= X <= 255) + Y = desired apparent color component (R, G, B) (0 <= Y <= 255) + P = opacity (0 <= P <=1) + (limitation: Y + 255P >= 255) + */ + background-color: rgba(117, 167, 249, 0.5) !important; /* #bad3fc equivalent when over white*/ + } + &.o_col_resize { + cursor: col-resize; + + ::selection { + background-color: transparent; + } + } + &.o_row_resize { + cursor: row-resize; + + ::selection { + background-color: transparent; + } + } } .o_selected_table { caret-color: transparent;