[IMP] web_editor, *: review 'background' options' UI

* website

Part of https://github.com/odoo/odoo/pull/38959
task-2066614

2 files changed, 53 insertions, 11 deletions

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 2ccc66dc6b6..b81e3b78b37 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -931,9 +931,32 @@ registry.background = SnippetOption.extend({
      * @override
      */
     start: function () {
+        // Build option UI controls
+        const editBgEl = document.createElement('we-button');
+        editBgEl.dataset.chooseImage = 'true';
+        editBgEl.dataset.noPreview = 'true';
+        const iconEl = document.createElement('i');
+        iconEl.classList.add('fa', 'fa-fw', 'fa-pencil-square-o');
+        this.editBgTextEl = document.createElement('span');
+        editBgEl.appendChild(this.editBgTextEl);
+        editBgEl.appendChild(iconEl);
+
+        this.removeBgEl = document.createElement('we-button');
+        this.removeBgEl.classList.add('fa', 'fa-fw', 'fa-times');
+        this.removeBgEl.title = _t("Remove the background");
+        this.removeBgEl.dataset.background = '';
+        this.removeBgEl.dataset.noPreview = 'true';
+
+        this.$el.append(this.buildRowElement(this.data.string, {
+            childNodes: [editBgEl, this.removeBgEl],
+        }));
+
         var res = this._super.apply(this, arguments);
+
+        // Initialize background and events
         this.bindBackgroundEvents();
         this.__customImageSrc = this._getSrcFromCssValue();
+
         return res;
     },
 
@@ -1020,6 +1043,13 @@ registry.background = SnippetOption.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * @private
+     * @returns {string}
+     */
+    _getDefaultTextContent: function () {
+        return _t("Choose a picture");
+    },
+    /**
      * Returns a media element the media dialog will be able to edit to use
      * the result as the snippet's background somehow.
      *
@@ -1068,19 +1098,16 @@ registry.background = SnippetOption.extend({
     /**
      * @override
      */
-    _setActive: function () {
+    _updateUI: function () {
         this._super.apply(this, arguments);
-
         var src = this._getSrcFromCssValue();
-        this.$el.find('[data-background]')
-            .removeClass('active')
-            .filter(function () {
-                var bgOption = $(this).data('background');
-                return (bgOption === '' && src === '' || bgOption !== '' && src.indexOf(bgOption) >= 0);
-            })
-            .addClass('active');
-
-        this.$el.find('[data-choose-image]').toggleClass('active', this.$target.hasClass('oe_custom_bg'));
+        this.removeBgEl.classList.toggle('d-none', !src);
+        if (src) {
+            var split = src.split('/');
+            this.editBgTextEl.textContent = split[split.length - 1];
+        } else {
+            this.editBgTextEl.textContent = this._getDefaultTextContent();
+        }
     },
     /**
      * Sets the given value as custom background image.
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b9d1af61f43..93aeef409b1 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -374,6 +374,21 @@ body.editor_enable.editor_has_snippets {
                 position: static !important;
             }
         }
+
+        // Specific options
+        .snippet-option-background {
+            [data-background=""] {
+                color: $o-we-color-danger;
+            }
+            [data-choose-image="true"] {
+                display: flex;
+                align-items: center;
+
+                > .fa {
+                    margin-left: auto;
+                }
+            }
+        }
     }
 }