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

* website

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

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;
     },
 
@@ -1019,6 +1042,13 @@ registry.background = SnippetOption.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @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.

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;
+                }
+            }
+        }
     }
 }
 

addons/website/static/src/js/editor/snippets.options.js

@@ -35,6 +35,15 @@ options.registry.background.include({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _getDefaultTextContent: function () {
+        if (this._getMediaDialogOptions().noVideos) {
+            return this._super(...arguments);
+        }
+        return _t("Choose a picture or a video");
+    },
     /**
      * @override
      */

addons/website/views/snippets.xml

@@ -1234,9 +1234,7 @@
     <!-- Background Image -->
     <div data-js="background" string="Background"
         data-selector="section, .parallax, .carousel-item"
-        data-exclude=".s_hr, .s_image_gallery, .o_gallery .carousel-item">
-        <we-button data-choose-image="true" data-no-preview="true">Background</we-button>
-    </div>
+        data-exclude=".s_hr, .s_image_gallery, .o_gallery .carousel-item"/>
 
     <!-- Background Image -->
     <div data-js="background_position"