From a1c20d2a75f889aacf25e9237a24a13fa4f04341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Wed, 5 Oct 2022 09:50:43 +0000 Subject: [PATCH] [IMP] web_editor, website: keep the grid items at the same z-index In [1], the resizing and the drag and drop of a grid item both put it in front of all the other items and in front of the background grid (thanks to the `z-index` property). This commit changes that behavior: now, the grid item stays at the same z-index if we are resizing it or if we are dragging it over the grid from which it is coming. In the case of a drag over an other grid, it is placed in front of all its grid items. In all these cases, the grid item is placed behind the background grid. [1]: https://github.com/odoo/odoo/pull/93144 task-2973198 closes odoo/odoo#102525 X-original-commit: 67d1b078329600efce414974307d74e9fa9ba9fe Related: odoo/design-themes#601 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/common/grid_layout_utils.js | 6 +- .../static/src/js/editor/snippets.editor.js | 26 +++++--- .../static/src/js/editor/snippets.options.js | 2 - .../views/snippets/s_masonry_block.xml | 64 +++++++++---------- 4 files changed, 52 insertions(+), 46 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 626b1bf6201..89a68bf8d73 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 @@ -147,7 +147,7 @@ export function _toggleGridMode(containerEl) { function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) { let maxRowEnd = 0; const columnSpans = []; - const columnCount = columnEls.length; // number of column in the grid. + let zIndex = 1; const imageColumns = []; // array of boolean telling if it is a column with only an image. // Checking if all the columns have a background color to take that into @@ -199,8 +199,8 @@ function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) { columnEl.classList.remove(...toRemove); columnEl.classList.add('g-col-lg-' + columnSpan, 'g-height-' + rowSpan); - // Setting the initial z-index to the number of columns. - columnEl.style.zIndex = columnCount; + // Setting the initial z-index. + columnEl.style.zIndex = zIndex++; // Reload the images. _reloadLazyImages(columnEl); 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 1e97e19f27d..029dcab5182 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1028,6 +1028,8 @@ var SnippetEditor = Widget.extend({ this.dragState.startingGrid = rowEl; this.dragState.prevGridArea = self.$target[0].style.gridArea; + this.dragState.startingZIndex = self.$target[0].style.zIndex; + // Reload the images. gridUtils._reloadLazyImages(this.$target[0]); } else { @@ -1172,11 +1174,16 @@ var SnippetEditor = Widget.extend({ const rowCount = Math.max(rowEl.dataset.rowCount, columnRowCount); $dropzone[0].style.gridRowEnd = rowCount + 1; - // Setting the background grid, the moving grid item and - // the drag helper z-indexes so they are in front of the - // other elements and in this order. + // Setting the moving grid item, the background grid and + // the drag helper z-indexes. The grid item z-index is set + // to its original one if we are in its starting grid, or + // to the maximum z-index of the grid otherwise. + if (rowEl === self.dragState.startingGrid) { + self.$target[0].style.zIndex = self.dragState.startingZIndex; + } else { + gridUtils._setElementToMaxZindex(self.$target[0], rowEl); + } gridUtils._setElementToMaxZindex(backgroundGridEl, rowEl); - gridUtils._setElementToMaxZindex(self.$target[0], rowEl); gridUtils._setElementToMaxZindex(dragHelperEl, rowEl); // Setting the column height and width to keep its size @@ -1283,9 +1290,6 @@ var SnippetEditor = Widget.extend({ this.dragState.dragHelperEl.remove(); this.dragState.backgroundGridEl.remove(); gridUtils._resizeGrid(rowEl); - - // Setting the z-index to the maximum of the grid. - gridUtils._setElementToMaxZindex(this.$target[0], rowEl); } else if (this.$target[0].classList.contains('o_grid_item') && this.dropped) { // Case when dropping a grid item in a non-grid dropzone. this.$target[0].classList.remove('o_grid_item'); @@ -1322,8 +1326,12 @@ var SnippetEditor = Widget.extend({ const rowCount = Math.max(rowEl.dataset.rowCount, 1 + this.dragState.columnRowCount); rowEl.dataset.rowCount = rowCount; - // Setting the z-index to the maximum of the grid. - gridUtils._setElementToMaxZindex(this.$target[0], rowEl); + // Setting the grid item z-index. + if (rowEl === this.dragState.startingGrid) { + this.$target[0].style.zIndex = this.dragState.startingZIndex; + } else { + gridUtils._setElementToMaxZindex(this.$target[0], rowEl); + } } else { if (this.$target[0].classList.contains('o_grid_item')) { // Case when a grid column is dropped near a non-grid diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index b88ad29fd7a..3e2a7d63dea 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -4272,7 +4272,6 @@ registry.sizing = SnippetOptionWidget.extend({ backgroundGridEl = gridUtils._addBackgroundGrid(rowEl, 0); self.options.wysiwyg.odooEditor.observerActive('displayBackgroundGrid'); gridUtils._setElementToMaxZindex(backgroundGridEl, rowEl); - gridUtils._setElementToMaxZindex(self.$target[0], rowEl); } // For loop to handle the cases where it is ne, nw, se or sw. Since @@ -4364,7 +4363,6 @@ registry.sizing = SnippetOptionWidget.extend({ backgroundGridEl.remove(); self.options.wysiwyg.odooEditor.observerActive('displayBackgroundGrid'); gridUtils._resizeGrid(rowEl); - gridUtils._setElementToMaxZindex(self.$target[0], rowEl); const colClass = [...self.$target[0].classList].find(c => /^col-/.test(c)); const gColClass = [...self.$target[0].classList].find(c => /^g-col-/.test(c)); diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml index af009f01c37..930978b7350 100644 --- a/addons/website/views/snippets/s_masonry_block.xml +++ b/addons/website/views/snippets/s_masonry_block.xml @@ -13,21 +13,21 @@