From c213afab86d6d8bd0331a549f7fab4590c7569be Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 21 Oct 2019 14:32:54 +0000
Subject: [PATCH] [IMP] web_editor, *: review 'background' options' UI

* website

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
---
 .../static/src/js/editor/snippets.options.js  | 49 ++++++++++++++-----
 .../static/src/scss/wysiwyg_snippets.scss     | 15 ++++++
 .../static/src/js/editor/snippets.options.js  |  9 ++++
 addons/website/views/snippets.xml             |  4 +-
 4 files changed, 63 insertions(+), 14 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;
     },
 
@@ -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.
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;
+                }
+            }
+        }
     }
 }
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index fd6b9cb7ff2..ea8e048b9fe 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/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
      */
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index dc6a08d0d8d..7e9fffa0ad9 100644
--- a/addons/website/views/snippets.xml
+++ b/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"