From dc8ffd4266d7aff9505d83f3c160666b08e3430c Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 5 Oct 2020 08:50:47 +0000
Subject: [PATCH] [FIX] website_sale: fix ribbon-editing UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the ribbon editing UI was missing some indentation symbols
that have been added recently in the rest of the web_editor (⌙), this
commit adds those where needed. This commit also fixes an issue where
both the ribbon editing UI and the ribbon select-menu were visible at
the same time, caused by changes to how the visibility of widgets is
computed.

task-2339986

closes odoo/odoo#59158

X-original-commit: c7e4533757982592be9b0c6dfc37b9b05042b5b9
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../website_sale/static/src/js/website_sale.editor.js | 11 +++++++++++
 addons/website_sale/views/snippets/snippets.xml       |  8 ++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.editor.js b/addons/website_sale/static/src/js/website_sale.editor.js
index 4b1a7946ec9..c70d069b60b 100644
--- a/addons/website_sale/static/src/js/website_sale.editor.js
+++ b/addons/website_sale/static/src/js/website_sale.editor.js
@@ -531,6 +531,17 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
             return this._rerenderXML();
         }
     },
+    /**
+     * @override
+     */
+    updateUIVisibility: async function () {
+        // Main updateUIVisibility will remove the d-none class because there are visible widgets
+        // inside of it. TODO: update this once updateUIVisibility can be used to compute visibility
+        // of arbitrary DOM elements and not just widgets.
+        const isEditing = this.$el.find('[data-name="ribbon_options"]').hasClass('d-none');
+        await this._super(...arguments);
+        this._toggleEditingUI(isEditing);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website_sale/views/snippets/snippets.xml b/addons/website_sale/views/snippets/snippets.xml
index b80ecbb5013..3bef71ef068 100644
--- a/addons/website_sale/views/snippets/snippets.xml
+++ b/addons/website_sale/views/snippets/snippets.xml
@@ -79,13 +79,13 @@
                     <we-button class="fa fa-check" data-save-ribbon="" title="Validate" data-no-preview="true"/>
                     <we-button class="fa fa-trash" data-delete-ribbon="" title="Delete" data-no-preview="true"/>
                 </we-row>
-                <we-colorpicker string="Background Color" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
-                <we-colorpicker string="Text Color" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
-                <we-select string="Mode">
+                <we-colorpicker string="⌙ Background" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="background-color" data-color-prefix="bg-" data-no-preview="true"/>
+                <we-colorpicker string="⌙ Text" title="" data-select-style="" data-apply-to=".o_wsale_ribbon_dummy" data-css-property="color" data-no-preview="true"/>
+                <we-select string="⌙ Mode">
                     <we-button data-set-ribbon-mode="ribbon">Slanted</we-button>
                     <we-button data-set-ribbon-mode="tag">Tag</we-button>
                 </we-select>
-                <we-select string="Position">
+                <we-select string="⌙ Position">
                     <we-button data-set-ribbon-position="left">Left</we-button>
                     <we-button data-set-ribbon-position="right">Right</we-button>
                 </we-select>