From 42b630bd1cbd2e27a049d782acf5f95417230fc7 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Tue, 23 Feb 2021 13:05:35 +0000
Subject: [PATCH] [IMP] web_editor: enable click on style tab

The goal of this commit is to enable the click on Style tab
in "Edit mode".
The click on this tab with no block selected will display a
message to inform the user that he has to select a block
before editing.

task-2443297

closes odoo/odoo#65573

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js   | 25 ++++++++++++++-----
 addons/web_editor/views/snippets.xml          |  5 +---
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 12097cb3089..6886b466348 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -903,6 +903,7 @@ var SnippetsMenu = Widget.extend({
         'click .oe_snippet': '_onSnippetClick',
         'click .o_install_btn': '_onInstallBtnClick',
         'click .o_we_add_snippet_btn': '_onBlocksTabClick',
+        'click .o_we_customize_snippet_btn': '_onOptionsTabClick',
         'click .o_we_invisible_entry': '_onInvisibleEntryClick',
         'click #snippet_custom .o_rename_btn': '_onRenameBtnClick',
         'click #snippet_custom .o_delete_btn': '_onDeleteBtnClick',
@@ -1023,6 +1024,9 @@ var SnippetsMenu = Widget.extend({
             })[0]
         );
 
+        this.emptyOptionsTabContent = document.createElement('div');
+        this.emptyOptionsTabContent.classList.add('text-center', 'pt-5');
+        this.emptyOptionsTabContent.append(_t("Select a block on your page to style it."));
         this.options.getScrollOptions = this._getScrollOptions.bind(this);
 
         // Fetch snippet templates and compute it
@@ -2148,7 +2152,7 @@ var SnippetsMenu = Widget.extend({
      * the new content of the customizePanel
      * @param {this.tabs.VALUE} [tab='blocks'] - the tab to select
      */
-    _updateLeftPanelContent: function ({content, tab}) {
+    _updateLeftPanelContent: function ({content, tab, ...options}) {
         clearTimeout(this._textToolsSwitchingTimeout);
         this._closeWidgets();
 
@@ -2164,12 +2168,9 @@ var SnippetsMenu = Widget.extend({
         this.$('.o_snippet_search_filter').toggleClass('d-none', tab !== this.tabs.BLOCKS);
         this.$('#o_scroll').toggleClass('d-none', tab !== this.tabs.BLOCKS);
         this.customizePanel.classList.toggle('d-none', tab === this.tabs.BLOCKS);
-        this.textEditorPanelEl.classList.toggle('d-none', tab !== this.tabs.OPTIONS);
-
+        this.textEditorPanelEl.classList.toggle('d-none', tab !== this.tabs.OPTIONS || !!options.forceEmptyTab);
         this.$('.o_we_add_snippet_btn').toggleClass('active', tab === this.tabs.BLOCKS);
-        this.$('.o_we_customize_snippet_btn').toggleClass('active', tab === this.tabs.OPTIONS)
-                                             .prop('disabled', tab !== this.tabs.OPTIONS);
-
+        this.$('.o_we_customize_snippet_btn').toggleClass('active', tab === this.tabs.OPTIONS);
     },
     /**
      * Scrolls to given snippet.
@@ -2432,6 +2433,18 @@ var SnippetsMenu = Widget.extend({
             });
         });
     },
+    /**
+     * @private
+     */
+    _onOptionsTabClick: function (ev) {
+        if (!ev.currentTarget.classList.contains('active')) {
+            this._updateLeftPanelContent({
+                content: this.emptyOptionsTabContent,
+                tab: this.tabs.OPTIONS,
+                forceEmptyTab: true,
+            });
+        }
+    },
     /**
      * @private
      */
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 78b9a1a5ab2..f3d6b40e453 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -5,10 +5,7 @@
         <button type="button" tabindex="1" class="o_we_add_snippet_btn active text-uppercase" accesskey="1">
             <span>Blocks</span>
         </button>
-        <t t-set="customize_title">Click in the page to customize</t>
-        <button type="button" tabindex="2" class="o_we_customize_snippet_btn text-uppercase"
-                t-att-data-title="customize_title"
-                disabled="disabled">
+        <button type="button" tabindex="2" class="o_we_customize_snippet_btn text-uppercase">
             <span>Style</span>
         </button>
     </div>