From 3a0a52ee99a92b3540b1e82399c2fe3dbc195f4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Thu, 23 Nov 2023 11:33:48 +0100 Subject: [PATCH] [FIX] web_editor: make the drag towards the bottom in grid mode smoother Since commit [1], we can now drag and drop an image column by dragging it directly, and not only by the move handle. Commit [2] allowed the image to be dragged from anywhere and not only from the top middle. In grid mode, in order for the column to stay well inside the grid when dragging, its computed position was originally bound horizontally, to the left and the right of the row. With commit [2], it is now also bound vertically, to the top and the bottom of the row. While it makes sense for the top, because we need to take into account from where we dragged the image, it should not have been the case for the bottom, as we need to overflow in order to add new rows. This resulted in the drag towards the bottom becoming jumpy, because it locks on the bottom of the grid until a new row is added, when the mouse pointer is down enough. This commit removes this bottom bound, in order for the drag towards the bottom to be smooth again. Steps to reproduce: - Drop the "Text-Image" snippet and toggle the grid mode. - Drag a column towards the bottom in order to add new rows. => It is not smooth: it locks on the bottom of the grid. [1]: https://github.com/odoo/odoo/commit/cff6f79b5f38239be8a498ff03549ad9a5deebae [2]: https://github.com/odoo/odoo/commit/514d3dbad4d20db375cba634b6af68a4fb0cafe9 task-3601336 Part-of: odoo/odoo#144427 --- addons/web_editor/static/src/js/editor/snippets.editor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index e5eb2b35ca9..8f6df38a486 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1679,9 +1679,9 @@ var SnippetEditor = Widget.extend({ const bottom = top + columnHeight; let left = x - rowElLeft - this.mousePositionXOnElement; - // Horizontal & vertical overflow. + // Horizontal and top overflow. left = clamp(left, 0, rowEl.clientWidth - columnWidth); - top = clamp(top, 0, rowEl.clientHeight - columnHeight); + top = top < 0 ? 0 : top; columnEl.style.top = top + 'px'; columnEl.style.left = left + 'px';