From a2c877ef1839a509adbc135bcf1d5a8a249bbb52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Tue, 4 Apr 2023 08:56:44 +0200 Subject: [PATCH] [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) --- addons/web_editor/i18n/web_editor.pot | 30 +++++++- .../static/src/js/editor/snippets.editor.js | 1 + .../static/src/js/editor/snippets.options.js | 76 +++++++++++++++++-- .../static/src/scss/wysiwyg_snippets.scss | 16 ++++ addons/web_editor/static/src/xml/snippets.xml | 9 ++- 5 files changed, 122 insertions(+), 10 deletions(-) diff --git a/addons/web_editor/i18n/web_editor.pot b/addons/web_editor/i18n/web_editor.pot index 93f81f23238..d64876d6517 100644 --- a/addons/web_editor/i18n/web_editor.pot +++ b/addons/web_editor/i18n/web_editor.pot @@ -237,6 +237,13 @@ msgstr "" msgid "Customize" 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 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 cfde6e60f24..cbf53477829 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -2119,6 +2119,7 @@ var SnippetsMenu = Widget.extend({ // Dispose BS tooltips. this.tooltips.dispose(); options.clearServiceCache(); + options.clearControlledSnippets(); }, //-------------------------------------------------------------------------- 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 829c44cfb8f..64a9fd49c71 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -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, }; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index fb823d250fa..3c0dd6afff1 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -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 { diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index 88daaaa0067..e6a08a9e1ac 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -50,9 +50,12 @@ - - This block is outdated - To make changes, drop this block and use the new options in the last version. + + This block is outdated. + You might not be able to customize it anymore. + REPLACE BY NEW VERSION + You can still access the block options but it might be ineffective. + ACCESS OPTIONS ANYWAY