[IMP] web_editor, *: review background color/image options UI

*: website, mass_mailing, website_blog, doc

Part of https://github.com/odoo/odoo/pull/53930
task-2157252

1 files changed, 31 insertions, 14 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 0626c0fba11..e698c503ace 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -511,19 +511,7 @@ options.Class.include({
     },
 });
 
-options.registry.BackgroundOptimize.include({
-    /**
-     * @override
-     */
-    _computeVisibility() {
-        if (this.$target.hasClass('o_background_video')) {
-            return false;
-        }
-        return this._super(...arguments);
-    },
-});
-
-options.registry.background.include({
+options.registry.BackgroundImage.include({
     background: async function (previewMode, widgetValue, params) {
         if (previewMode === 'reset' && this.videoSrc) {
             return this._setBgVideo(false, this.videoSrc);
@@ -591,6 +579,18 @@ options.registry.background.include({
     },
 });
 
+options.registry.BackgroundOptimize.include({
+    /**
+     * @override
+     */
+    _computeVisibility() {
+        if (this.$target.hasClass('o_background_video')) {
+            return false;
+        }
+        return this._super(...arguments);
+    },
+});
+
 options.registry.SwitchTheme = options.Class.extend({
     isTopOption: true,
 
@@ -679,6 +679,14 @@ options.registry.Theme = options.Class.extend({
 
         await this._reloadBundles();
     },
+    async enableImagepicker(previewMode, widgetValue, params) {
+        if (widgetValue) {
+            // TODO improve: here we make a hack so that a hidden imagepicker
+            // widget opens...
+            const widget = this._requestUserValueWidgets(widgetValue)[0];
+            widget.$el.click();
+        }
+    },
     /**
      * @see this.selectClass for parameters
      */
@@ -790,6 +798,15 @@ options.registry.Theme = options.Class.extend({
         return this._super(...arguments);
     },
     /**
+     * @override
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'body_bg_image_opt') {
+            return false;
+        }
+        return this._super(...arguments);
+    },
+    /**
      * @private
      * @param {DOMElement} node
      * @param {String} content text of the editor
@@ -1367,7 +1384,7 @@ options.registry.parallax = options.Class.extend({
      */
     onFocus: function () {
         this.trigger_up('option_update', {
-            optionNames: ['background', 'BackgroundPosition'],
+            optionNames: ['BackgroundImage', 'BackgroundPosition'],
             name: 'target',
             data: this.$target.find('> .s_parallax_bg'),
         });