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

[FIX] web_editor: properly update grid/col buttons on mobile view toggle

Browse Source 
Commit [1] introduced the grid mode for multi-column snippets, with
discriminating behavior between mobile and desktop previews.
When toggling multiple times the mobile view, the buttons above the
block sometimes remain in their previous state. The `updateUIVisibility`
trigger doesn't seem to go through.

Step to reproduce:
- Drop an Image - Text snippet
- Activate the grid mode
- Click on a column
- Toggle the mobile view until either of the following happens:
  - When going from desktop to mobile: the buttons are still the ones
    that should appear on desktop (send to front, send to back, move
    handle and delete).
  - When going from mobile to desktop: the buttons are still the ones
    that should appear on mobile (left/right arrows and delete).

[1]: https://github.com/odoo/odoo/commit/ca215a5bdf20a1a665cfa87fb4fab0d9b3a0ae2b

task-3551537

closes odoo/odoo#141359

X-original-commit: 174e9fe0d8665d1a81c90a6f7bf5cc9e3361f161
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2023-11-07 21:02:31 +00:00
parent bb1984d915
commit 8b7b4f7fb4
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.editor.js
+26 -17
View File
@@ -4441,16 +4441,38 @@ var SnippetsMenu = Widget.extend({
* Preview on mobile.
*/
_onMobilePreviewClick() {
this.trigger_up('request_mobile_preview');
// TODO refactor things to make this more understandable -> on mobile
// edition, update the UI. But to do it properly and inside the mutex
// this simulates what happens when a snippet option is used.
this._execWithLoadingEffect(async () => {
const initialBodySize = this.$body[0].clientWidth;
this.trigger_up('request_mobile_preview');
// TODO needed so that mobile edition is considered before updating
// the UI but this is clearly random. The trigger_up above should
// properly await for the rerender somehow.
await new Promise(resolve => setTimeout(resolve));
// properly await for the rerender somehow or, better, the UI update
// should not depend on the mobile re-render entirely.
let count = 0;
do {
await new Promise(resolve => setTimeout(resolve, 1));
// Technically, should not be possible to fall into an infinite loop
// but extra safety as a stable fix.
} while (count++ < 1000 && Math.abs(this.$body[0].clientWidth - initialBodySize) < 1);
// Reload images inside grid items so that no image disappears when
// activating mobile preview.
const $gridItemEls = this.getEditableArea().find('div.o_grid_item');
for (const gridItemEl of $gridItemEls) {
gridUtils._reloadLazyImages(gridItemEl);
}
for (const invisibleOverrideEl of this.getEditableArea().find('.o_snippet_mobile_invisible, .o_snippet_desktop_invisible')) {
invisibleOverrideEl.classList.remove('o_snippet_override_invisible');
invisibleOverrideEl.dataset.invisible = '1';
}
// This is async but using the main editor mutex, currently locked.
this._updateInvisibleDOM();
return new Promise(resolve => {
this.trigger_up('snippet_option_update', {
@@ -4458,19 +4480,6 @@ var SnippetsMenu = Widget.extend({
});
});
}, false);
// Reload images inside grid items so that no image disappears when
// activating mobile preview.
const $gridItemEls = this.getEditableArea().find('div.o_grid_item');
for (const gridItemEl of $gridItemEls) {
gridUtils._reloadLazyImages(gridItemEl);
}
for (const invisibleOverrideEl of this.getEditableArea().find('.o_snippet_mobile_invisible, .o_snippet_desktop_invisible')) {
invisibleOverrideEl.classList.remove('o_snippet_override_invisible');
invisibleOverrideEl.dataset.invisible = '1';
}
// This is async but using the main editor mutex.
this._updateInvisibleDOM();
},
/**
* Undo..