From f9e00bf2bacb9cdff3f2e742edc7ddc2db831993 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Thu, 15 Sep 2022 07:51:10 +0000 Subject: [PATCH] [IMP] web_editor: limit the number of rows added in a grid on drag When dragging a grid item downwards in a grid, an infinite number of rows can be added. This is unconvenient because it is difficult to escape a grid if the snippet is "container-fluid" for example. This commit limits the number of rows that can be added at once when dragging downwards. The limit is fixed to 10 rows. Of course, it is not a total limit, this means that after dropping, if the grid item is dragged again, 10 additional rows can be added. task-2973198 X-original-commit: 888f522aa812136f10af1c5fad8f17eea0c3b5b6 Part-of: odoo/odoo#102525 --- .../static/src/js/common/grid_layout_utils.js | 2 ++ .../static/src/js/editor/snippets.editor.js | 17 +++++++++++++---- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js index b940cf14bd1..626b1bf6201 100644 --- a/addons/web_editor/static/src/js/common/grid_layout_utils.js +++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js @@ -3,6 +3,8 @@ import {qweb} from 'web.core'; const rowSize = 50; // 50px. +// Maximum number of rows that can be added when dragging a grid item. +export const additionalRowLimit = 10; /** * Returns the grid properties: rowGap, rowSize, columnGap and columnSize. 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 13ef195afa9..58089c805be 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1537,11 +1537,20 @@ var SnippetEditor = Widget.extend({ const dropzoneEl = this.dragState.dropzoneEl; const rowOverflow = Math.round((bottom - currentHeight) / (gridProp.rowSize + gridProp.rowGap)); const updateRows = bottom > currentHeight || bottom <= currentHeight && bottom > startingHeight; + const rowCount = Math.max(rowEl.dataset.rowCount, this.dragState.columnRowCount); + const maxRowEnd = rowCount + gridUtils.additionalRowLimit + 1; if (Math.abs(rowOverflow) >= 1 && updateRows) { - const dropzoneEnd = parseInt(dropzoneEl.style.gridRowEnd); - dropzoneEl.style.gridRowEnd = dropzoneEnd + rowOverflow; - backgroundGridEl.style.gridRowEnd = dropzoneEnd + rowOverflow; - this.dragState.currentHeight += rowOverflow * (gridProp.rowSize + gridProp.rowGap); + if (rowEnd <= maxRowEnd) { + const dropzoneEnd = parseInt(dropzoneEl.style.gridRowEnd); + dropzoneEl.style.gridRowEnd = dropzoneEnd + rowOverflow; + backgroundGridEl.style.gridRowEnd = dropzoneEnd + rowOverflow; + this.dragState.currentHeight += rowOverflow * (gridProp.rowSize + gridProp.rowGap); + } else { + // Don't add new rows if we have reached the limit. + dropzoneEl.style.gridRowEnd = maxRowEnd; + backgroundGridEl.style.gridRowEnd = maxRowEnd; + this.dragState.currentHeight = (maxRowEnd - 1) * (gridProp.rowSize + gridProp.rowGap) - gridProp.rowGap; + } } } });