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

[IMP] web_editor, website: keep the grid items at the same z-index

Browse Source 
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) <qsm@odoo.com>
This commit is contained in:
Soukéina Bojabza
2022-10-06 23:14:42 +02:00
committed by qsm-odoo
parent ae8a5dc330
commit a1c20d2a75
4 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/common/grid_layout_utils.js
+3 -3
View File
@@ -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);
addons/web_editor/static/src/js/editor/snippets.editor.js
+17 -9
View File
@@ -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
addons/web_editor/static/src/js/editor/snippets.options.js
-2
View File
@@ -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));
addons/website/views/snippets/s_masonry_block.xml
+32 -32
View File
@@ -13,21 +13,21 @@
<template id="s_masonry_block_default_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 1 / 11 / 7; z-index: 5;" contenteditable="false">
style="grid-area: 1 / 1 / 11 / 7; z-index: 1;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 7 / 6 / 10; z-index: 5;" >
style="grid-area: 1 / 7 / 6 / 10; z-index: 2;" >
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc3" data-name="Block"
style="grid-area: 1 / 10 / 6 / 13; z-index: 5;">
style="grid-area: 1 / 10 / 6 / 13; z-index: 3;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc4" data-name="Block"
style="grid-area: 6 / 7 / 11 / 10; z-index: 5;">
style="grid-area: 6 / 7 / 11 / 10; z-index: 4;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -42,22 +42,22 @@
<template id="s_masonry_block_reversed_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc3" data-name="Block"
style="grid-area: 1 / 1 / 6 / 4; z-index: 5;">
style="grid-area: 1 / 1 / 6 / 4; z-index: 1;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 4 / 6 / 7; z-index: 5;">
style="grid-area: 1 / 4 / 6 / 7; z-index: 2;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 6 / 1 / 11 / 4; z-index: 5;">
style="grid-area: 6 / 1 / 11 / 4; z-index: 3;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc4" data-name="Block"
style="grid-area: 6 / 4 / 11 / 7; z-index: 5;">
style="grid-area: 6 / 4 / 11 / 7; z-index: 4;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -71,7 +71,7 @@
<template id="s_masonry_block_images_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 1 / 11 / 7; z-index: 2;" contenteditable="false">
style="grid-area: 1 / 1 / 11 / 7; z-index: 1;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
@@ -84,16 +84,16 @@
<template id="s_masonry_block_image_texts_image_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 1 / 11 / 4; z-index: 4;" contenteditable="false">
style="grid-area: 1 / 1 / 11 / 4; z-index: 1;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 4 / 6 / 7; z-index: 4;">
style="grid-area: 1 / 4 / 6 / 7; z-index: 2;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc4" data-name="Block"
style="grid-area: 6 / 4 / 11 / 7; z-index: 4;">
style="grid-area: 6 / 4 / 11 / 7; z-index: 3;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -107,26 +107,26 @@
<template id="s_masonry_block_mosaic_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="12">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc3" data-name="Block"
style="grid-area: 1 / 1 / 3 / 4; z-index: 6;">
style="grid-area: 1 / 1 / 3 / 4; z-index: 1;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 4 / 3 / 7; z-index: 6;">
style="grid-area: 1 / 4 / 3 / 7; z-index: 2;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 3 / 1 / 13 / 7; z-index: 6;" contenteditable="false">
style="grid-area: 3 / 1 / 13 / 7; z-index: 3;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 7 / 11 / 13; z-index: 6;" contenteditable="false">
style="grid-area: 1 / 7 / 11 / 13; z-index: 4;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 11 / 7 / 13 / 10; z-index: 6;">
style="grid-area: 11 / 7 / 13 / 10; z-index: 5;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -141,22 +141,22 @@
<template id="s_masonry_block_texts_image_texts_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc3" data-name="Block"
style="grid-area: 1 / 1 / 6 / 4; z-index: 5;">
style="grid-area: 1 / 1 / 6 / 4; z-index: 1;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 6 / 1 / 11 / 4; z-index: 5;">
style="grid-area: 6 / 1 / 11 / 4; z-index: 2;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 4 / 11 / 10; z-index: 5;" contenteditable="false">
style="grid-area: 1 / 4 / 11 / 10; z-index: 3;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-5 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 10 / 6 / 13; z-index: 5;">
style="grid-area: 1 / 10 / 6 / 13; z-index: 4;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -171,17 +171,17 @@
<template id="s_masonry_block_alternation_text_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="2">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 1 / 3 / 4; z-index: 4;">
style="grid-area: 1 / 1 / 3 / 4; z-index: 1;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc4" data-name="Block"
style="grid-area: 1 / 4 / 3 / 7; z-index: 4;">
style="grid-area: 1 / 4 / 3 / 7; z-index: 2;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-2 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 7 / 3 / 10; z-index: 4;">
style="grid-area: 1 / 7 / 3 / 10; z-index: 3;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -196,16 +196,16 @@
<template id="s_masonry_block_alternation_text_image_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 1 / 11 / 4; z-index: 4;">
style="grid-area: 1 / 1 / 11 / 4; z-index: 1;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 4 / 11 / 7; z-index: 4;" contenteditable="false">
style="grid-area: 1 / 4 / 11 / 7; z-index: 2;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 7 / 11 / 10; z-index: 4;">
style="grid-area: 1 / 7 / 11 / 10; z-index: 3;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
@@ -219,16 +219,16 @@
<template id="s_masonry_block_alternation_image_text_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 1 / 11 / 4; z-index: 4;" contenteditable="false">
style="grid-area: 1 / 1 / 11 / 4; z-index: 1;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc4" data-name="Block"
style="grid-area: 1 / 4 / 11 / 7; z-index: 4;">
style="grid-area: 1 / 4 / 11 / 7; z-index: 2;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 7 / 11 / 10; z-index: 4;" contenteditable="false">
style="grid-area: 1 / 7 / 11 / 10; z-index: 3;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_2" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc3" data-name="Block"
@@ -242,12 +242,12 @@
<template id="s_masonry_block_alternation_text_image_text_template" groups="base.group_user">
<div class="row o_grid_mode" data-row-count="10">
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"
style="grid-area: 1 / 1 / 11 / 4; z-index: 3;">
style="grid-area: 1 / 1 / 11 / 4; z-index: 1;">
<h3>A great title</h3>
<p>And a great subtitle</p>
</div>
<div class="o_grid_item col-lg-6 g-col-lg-6 g-height-10 o_grid_item_image text-center" data-name="Block"
style="grid-area: 1 / 4 / 11 / 10; z-index: 3;" contenteditable="false">
style="grid-area: 1 / 4 / 11 / 10; z-index: 2;" contenteditable="false">
<img src="/web/image/website.s_masonry_block_default_image_1" class="img img-fluid mx-auto" alt=""/>
</div>
<div class="o_grid_item col-lg-3 g-col-lg-3 g-height-10 text-center o_cc o_cc2" data-name="Block"