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

[FIX] web_editor: fix the history of the drag and drop in grid mode

Browse Source 
When drag and dropping a grid item and then undoing the operation, it
is not undone correctly, causing the grid items to be broken. This
happens because since `observerUnactive` is called at the start of the
drag, the style (like the `grid-area`) and the grid classes changes are
not recorded and therefore, undoing does not restore them.

This issue was previously fixed in [1] by removing the call to
`observerUnactive` but it should not have been done and this call was
restored in [2].

This commit solves this issue by activating the observer for the
changes that have to be recorded when drag and dropping in grid mode,
in order to undo them properly afterwards.

[1]: https://github.com/odoo/odoo/commit/cc406afcea7bf5846233a9f97a4a8ac5f618f3ec
[2]: https://github.com/odoo/odoo/pull/106029

task-3074139

closes odoo/odoo#113384

X-original-commit: 1dfb127f70832aa9e9022ac337af343b7dc17729
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>
This commit is contained in:
Soukéina Bojabza
2023-02-22 18:42:37 +01:00
parent f5e8d8ea92
commit c1e570afd0
1 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.editor.js
+16
View File
@@ -931,7 +931,9 @@ var SnippetEditor = Widget.extend({
// resizing the grid and the dropzone.
self.dragState.dragHelperEl.remove();
self.dragState.backgroundGridEl.remove();
self.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
gridUtils._resizeGrid(rowEl);
self.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
const rowCount = parseInt(rowEl.dataset.rowCount);
previousDropzoneEl.style.gridRowEnd = Math.max(rowCount + 1, 1);
}
@@ -1003,8 +1005,10 @@ var SnippetEditor = Widget.extend({
if (allowGridMode) {
// Toggle grid mode if it is not already on.
if (!rowEl.classList.contains('o_grid_mode')) {
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
const containerEl = rowEl.parentNode;
gridUtils._toggleGridMode(containerEl);
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
}
// Computing the moving column width and height in terms of columns
@@ -1223,6 +1227,7 @@ var SnippetEditor = Widget.extend({
const rowCount = Math.max(rowEl.dataset.rowCount, columnRowCount);
$dropzone[0].style.gridRowEnd = rowCount + 1;
self.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
// 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
@@ -1246,6 +1251,7 @@ var SnippetEditor = Widget.extend({
self.$target[0].style.position = 'absolute';
self.$target[0].style.removeProperty('grid-area');
rowEl.style.position = 'relative';
self.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
// Storing useful information and adding an event listener.
self.dragState.startingHeight = rowEl.clientHeight;
@@ -1277,7 +1283,9 @@ var SnippetEditor = Widget.extend({
// resizing the grid and the dropzone.
self.dragState.dragHelperEl.remove();
self.dragState.backgroundGridEl.remove();
self.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
gridUtils._resizeGrid(rowEl);
self.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
const rowCount = parseInt(rowEl.dataset.rowCount);
dropzoneEl.style.gridRowEnd = Math.max(rowCount + 1, 1);
}
@@ -1338,11 +1346,15 @@ var SnippetEditor = Widget.extend({
gridUtils._gridCleanUp(rowEl, this.$target[0]);
this.dragState.dragHelperEl.remove();
this.dragState.backgroundGridEl.remove();
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
gridUtils._resizeGrid(rowEl);
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
} 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', 'o_grid_item_image', 'o_grid_item_image_contain');
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
this.$target[0].style.removeProperty('grid-area');
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
}
// TODO lot of this is duplicated code of the d&d feature of snippets
@@ -1367,9 +1379,11 @@ var SnippetEditor = Widget.extend({
}
// Placing it in the top left corner.
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
this.$target[0].style.gridArea = `1 / 1 / ${1 + this.dragState.columnRowCount} / ${1 + this.dragState.columnColCount}`;
const rowCount = Math.max(rowEl.dataset.rowCount, 1 + this.dragState.columnRowCount);
rowEl.dataset.rowCount = rowCount;
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
// Setting the grid item z-index.
if (rowEl === this.dragState.startingGrid) {
@@ -1382,8 +1396,10 @@ var SnippetEditor = Widget.extend({
// Case when a grid column is dropped near a non-grid
// dropzone.
this.$target[0].classList.remove('o_grid_item', 'o_grid_item_image', 'o_grid_item_image_contain');
this.options.wysiwyg.odooEditor.observerActive('dragAndDropMoveSnippet');
this.$target[0].style.removeProperty('z-index');
this.$target[0].style.removeProperty('grid-area');
this.options.wysiwyg.odooEditor.observerUnactive('dragAndDropMoveSnippet');
}
}