[IMP] web_editor: improve the "outdated block" alert
Before this commit, when editing a snippet that is outdated, an alert block is displayed above the options, warning about that. However, this alert does not really catch the attention and it does not prevent the user to still use the options. This commit improves this alert block by making it cover the whole outdated options section, to make it more visible. Moreover, it now contains two buttons: - one to replace the outdated snippet by its new version, and - one to still access the options, despite the fact that they may not work anymore. task-3203590 closes odoo/odoo#117560 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Soukéina Bojabza
@@ -237,6 +237,13 @@ msgstr ""
|
||||
msgid "<span>Customize</span>"
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/xml/snippets.xml:0
|
||||
#, python-format
|
||||
msgid "ACCESS OPTIONS ANYWAY"
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/js/wysiwyg/wysiwyg.js:0
|
||||
@@ -2460,6 +2467,13 @@ msgstr ""
|
||||
msgid "Qweb Field qweb"
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/xml/snippets.xml:0
|
||||
#, python-format
|
||||
msgid "REPLACE BY NEW VERSION"
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#: model_terms:ir.ui.view,arch_db:web_editor.colorpicker
|
||||
msgid "Radial"
|
||||
@@ -3175,7 +3189,7 @@ msgstr ""
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/xml/snippets.xml:0
|
||||
#, python-format
|
||||
msgid "This block is outdated"
|
||||
msgid "This block is outdated."
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
@@ -3565,6 +3579,13 @@ msgstr ""
|
||||
msgid "Yes"
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/xml/snippets.xml:0
|
||||
#, python-format
|
||||
msgid "You can still access the block options but it might be ineffective."
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/components/media_dialog/document_selector.xml:0
|
||||
@@ -3574,6 +3595,13 @@ msgid ""
|
||||
"screen."
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-javascript
|
||||
#: code:addons/web_editor/static/src/xml/snippets.xml:0
|
||||
#, python-format
|
||||
msgid "You might not be able to customize it anymore."
|
||||
msgstr ""
|
||||
|
||||
#. module: web_editor
|
||||
#. odoo-python
|
||||
#: code:addons/web_editor/controllers/main.py:0
|
||||
|
||||
@@ -2119,6 +2119,7 @@ var SnippetsMenu = Widget.extend({
|
||||
// Dispose BS tooltips.
|
||||
this.tooltips.dispose();
|
||||
options.clearServiceCache();
|
||||
options.clearControlledSnippets();
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
@@ -77,6 +77,9 @@ function serviceCached(service) {
|
||||
},
|
||||
});
|
||||
}
|
||||
// Outdated snippets whose alert has been discarded.
|
||||
const controlledSnippets = new Set();
|
||||
const clearControlledSnippets = () => controlledSnippets.clear();
|
||||
/**
|
||||
* @param {HTMLElement} el
|
||||
* @param {string} [title]
|
||||
@@ -8791,20 +8794,80 @@ registry.many2one = SnippetOptionWidget.extend({
|
||||
* Allows to display a warning message on outdated snippets.
|
||||
*/
|
||||
registry.VersionControl = SnippetOptionWidget.extend({
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Replaces an outdated snippet by its new version.
|
||||
*/
|
||||
async replaceSnippet() {
|
||||
// Getting the new block version.
|
||||
let newBlockEl;
|
||||
const snippet = this.$target[0].dataset.snippet;
|
||||
this.trigger_up("find_snippet_template", {
|
||||
snippet: this.$target[0],
|
||||
callback: (snippetTemplate) => {
|
||||
newBlockEl = snippetTemplate.querySelector(`[data-snippet=${snippet}]`).cloneNode(true);
|
||||
},
|
||||
});
|
||||
// Replacing the block.
|
||||
this.options.wysiwyg.odooEditor.historyPauseSteps();
|
||||
this.$target[0].classList.add("d-none"); // Hiding the block to replace it smoothly.
|
||||
this.$target[0].insertAdjacentElement("beforebegin", newBlockEl);
|
||||
// Initializing the new block as if it was dropped: the mutex needs to
|
||||
// be free for that so we wait for it first.
|
||||
this.options.wysiwyg.waitForEmptyMutexAction().then(async () => {
|
||||
await this.options.wysiwyg.snippetsMenu.callPostSnippetDrop($(newBlockEl));
|
||||
await new Promise(resolve => {
|
||||
this.trigger_up("remove_snippet",
|
||||
{$snippet: this.$target, onSuccess: resolve, shouldRecordUndo: false}
|
||||
);
|
||||
});
|
||||
this.options.wysiwyg.odooEditor.historyUnpauseSteps();
|
||||
newBlockEl.classList.remove("oe_snippet_body");
|
||||
this.options.wysiwyg.odooEditor.historyStep();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Allows to still access the options of an outdated block, despite the
|
||||
* warning.
|
||||
*/
|
||||
discardAlert() {
|
||||
const alertEl = this.$el[0].querySelector("we-alert");
|
||||
const optionsSectionEl = this.$overlay.data("$optionsSection")[0];
|
||||
alertEl.remove();
|
||||
optionsSectionEl.classList.remove("o_we_outdated_block_options");
|
||||
// Preventing the alert to reappear at each render.
|
||||
controlledSnippets.add(this.$target[0].dataset.snippet);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Private
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
this.trigger_up('get_snippet_versions', {
|
||||
snippetName: this.$target[0].dataset.snippet,
|
||||
_renderCustomXML(uiFragment) {
|
||||
const snippetName = this.$target[0].dataset.snippet;
|
||||
// Do not display the alert if it was previously discarded.
|
||||
if (controlledSnippets.has(snippetName)) {
|
||||
return;
|
||||
}
|
||||
this.trigger_up("get_snippet_versions", {
|
||||
snippetName: snippetName,
|
||||
onSuccess: snippetVersions => {
|
||||
const isUpToDate = snippetVersions && ['vjs', 'vcss', 'vxml'].every(key => this.$target[0].dataset[key] === snippetVersions[key]);
|
||||
const isUpToDate = snippetVersions && ["vjs", "vcss", "vxml"].every(key => this.$target[0].dataset[key] === snippetVersions[key]);
|
||||
if (!isUpToDate) {
|
||||
this.$el.prepend(renderToElement('web_editor.outdated_block_message'));
|
||||
uiFragment.prepend(renderToElement("web_editor.outdated_block_message"));
|
||||
// Hide the other options, to only have the alert displayed.
|
||||
const optionsSectionEl = this.$overlay.data("$optionsSection")[0];
|
||||
optionsSectionEl.classList.add("o_we_outdated_block_options");
|
||||
}
|
||||
},
|
||||
});
|
||||
return this._super(...arguments);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -9283,4 +9346,5 @@ export default {
|
||||
registry: registry,
|
||||
serviceCached,
|
||||
clearServiceCache,
|
||||
clearControlledSnippets,
|
||||
};
|
||||
|
||||
@@ -910,6 +910,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.o_we_outdated_block_options {
|
||||
// Outdated block options
|
||||
padding: 0 !important;
|
||||
|
||||
> we-customizeblock-option {
|
||||
&:not(.snippet-option-VersionControl) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.snippet-option-VersionControl {
|
||||
// Outdated snippet alert
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
we-customizeblock-option {
|
||||
|
||||
@@ -50,9 +50,12 @@
|
||||
</we-customizeblock-options>
|
||||
</t>
|
||||
<t t-name="web_editor.outdated_block_message">
|
||||
<we-alert class="mt-2">
|
||||
<we-title>This block is outdated</we-title>
|
||||
<span>To make changes, drop this block and use the new options in the last version.</span>
|
||||
<we-alert class="d-flex flex-column p-3 pt-4 align-items-center text-center text-white">
|
||||
<we-title>This block is outdated.</we-title>
|
||||
<span>You might not be able to customize it anymore.</span>
|
||||
<we-button class="o_we_bg_brand_primary py-2 my-4 border-0" data-no-preview="true" data-replace-snippet="">REPLACE BY NEW VERSION</we-button>
|
||||
<span>You can still access the block options but it might be ineffective.</span>
|
||||
<we-button class="o_we_bg_brand_primary py-2 my-4 border-0" data-no-preview="true" data-discard-alert="">ACCESS OPTIONS ANYWAY</we-button>
|
||||
</we-alert>
|
||||
</t>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user