From 9b06f097b890e9cfd9244acff314009b3b5436af Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 27 Oct 2023 10:25:40 +0200
Subject: [PATCH] [IMP] web_editor, website: reorganize non-floating toolbar
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This rearranges the non-floating toolbar buttons so that the AI, animate
and highlight buttons are grouped together at the bottom and take up the
full width of the toolbar, and so that the options appear below them.

task-3572337

closes odoo/odoo#139857

Signed-off-by: Geelen Sébastien (sge) <sge@odoo.com>
---
 .../static/src/js/wysiwyg/wysiwyg.js          |  2 +-
 .../static/src/scss/wysiwyg_snippets.scss     | 38 +++++++++++++++++--
 addons/web_editor/static/src/xml/editor.xml   |  4 +-
 .../static/src/js/editor/snippets.editor.js   |  4 +-
 addons/website/static/src/xml/web_editor.xml  | 29 +++++++++-----
 5 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 0f6ab42d5ee..3f47a6128f9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1758,7 +1758,7 @@ export class Wysiwyg extends Component {
             e.preventDefault();
             e.stopImmediatePropagation();
             e.stopPropagation();
-            switch (e.target.id) {
+            switch (e.currentTarget.id) {
                 case 'create-link':
                     this.toggleLinkTools();
                     break;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index d4c99720b48..b96d3fc4717 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -499,9 +499,21 @@
             background: transparent;
             margin-top: $o-we-sidebar-content-field-spacing;
             padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
-            grid-template-areas: "typo typo style colors" "size align list link" "options options options options" "options2 options2 options2 options2";
-            grid-template-columns: 1fr 1fr 1fr 1fr;
-            grid-template-rows: minmax($o-we-sidebar-content-field-height, auto) minmax($o-we-sidebar-content-field-height, auto) auto auto ;
+            grid-template-areas:
+                "typo typo style style colors"
+                "size align list list link"
+                "ai animate animate hilight hilight"
+                "options options options options options"
+                "options2 options2 options2 options2 options2"
+                "options3 options3 options3 options3 options3";
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-rows:
+                minmax($o-we-sidebar-content-field-height, auto)
+                minmax($o-we-sidebar-content-field-height, auto)
+                minmax($o-we-sidebar-content-field-height, auto)
+                auto
+                auto
+                auto;
             row-gap: $o-we-sidebar-content-field-spacing;
             column-gap: $o-we-sidebar-content-field-multi-spacing;
             width: 100%;
@@ -626,8 +638,12 @@
                     }
                 }
 
-                & + we-customizeblock-option {
+                & ~ we-customizeblock-option {
                     grid-area: options2;
+
+                    & ~ we-customizeblock-option {
+                        grid-area: options3;
+                    }
                 }
             }
 
@@ -723,6 +739,20 @@
                 }
             }
 
+            #chatgpt {
+                grid-area: ai;
+
+                span {
+                    margin-left: 5px;
+                }
+            }
+            #animate {
+                grid-area: animate;
+            }
+            #highlight {
+                grid-area: hilight;
+            }
+
             .dropdown-menu.colorpicker-menu {
                 min-width: 0;
                 max-height: none;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 659dde98eed..61f712959da 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -176,7 +176,9 @@
             </div>
 
             <div id="chatgpt" class="btn-group">
-                <div id="open-chatgpt" title="Generate or transform content with AI" class="fa fa-magic fa-fw btn editor-ignore"></div>
+                <div id="open-chatgpt" title="Generate or transform content with AI" class="btn editor-ignore">
+                    <span class="fa fa-magic fa-fw"></span>
+                </div>
             </div>
 
             <div  t-if="props.showImageShape" id="image-shape" class="btn-group">
diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js
index 7694bfc3aa1..38e083f6d69 100644
--- a/addons/website/static/src/js/editor/snippets.editor.js
+++ b/addons/website/static/src/js/editor/snippets.editor.js
@@ -616,7 +616,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
      * @param {Event} ev
      */
     _onAnimateTextClick(ev) {
-        const target = ev.target;
+        const target = ev.currentTarget;
         this._handleTextOptions(target, [
             this._getOptionTextClass(target),
             "o_animate",
@@ -636,7 +636,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
      * @param {Event} ev
      */
     _onTextHighlightClick(ev) {
-        const target = ev.target;
+        const target = ev.currentTarget;
         this._handleTextOptions(target, [
             this._getOptionTextClass(target),
             "o_text_highlight_underline",
diff --git a/addons/website/static/src/xml/web_editor.xml b/addons/website/static/src/xml/web_editor.xml
index ce66fc0df69..1eb5b78f11d 100644
--- a/addons/website/static/src/xml/web_editor.xml
+++ b/addons/website/static/src/xml/web_editor.xml
@@ -40,20 +40,31 @@
         <xpath expr="//t[@t-if='this.isMobile()']//div[@id='list']" position="inside">
             <div t-if="props.showAnimateText" title="Animate text" class="btn fa fa-play fa-fw o_we_animate_text" data-text-selector=".o_animated_text"/>
         </xpath>
-        <xpath expr="//t[@t-else]//div[@id='list']" position="inside">
-            <div t-if="props.showAnimateText" title="Animate text" class="btn fa fa-play fa-fw o_we_animate_text" data-text-selector=".o_animated_text"/>
+        <xpath expr="//t[@t-else]//div[last()]" position="after">
+            <div t-if="props.showAnimateText" id="animate" class="btn-group">
+                <div title="Animate text" class="btn o_we_animate_text" data-text-selector=".o_animated_text">
+                    <span class="fa fa-play fa-fw"></span>
+                    <span>Animate</span>
+                </div>
+            </div>
+        </xpath>
+
+        <xpath expr="//div[@id='open-chatgpt']" position="inside">
+            <span>AI</span>
         </xpath>
 
         <xpath expr="//div[@id='strikethrough']" position="attributes">
             <attribute name="t-if">!props.showTextHighlights</attribute>
         </xpath>
-        <xpath expr="//div[@id='underline']" position="attributes">
-            <attribute name="t-if">!props.showTextHighlights</attribute>
-        </xpath>
-        <xpath expr="//div[@id='underline']" position="after">
-            <div t-if="props.showTextHighlights" title="Add Text Highlight Effects"
-                class="btn oi oi-text-effect oi-fw o_we_text_highlight"
-                data-text-selector=".o_text_highlight"/>
+        <xpath expr="//div[1]" position="inside">
+            <div t-if="props.showTextHighlights" id="highlight" class="btn-group">
+                <div title="Add Text Highlight Effects"
+                    class="btn o_we_text_highlight"
+                    data-text-selector=".o_text_highlight">
+                    <span class="oi oi-text-effect oi-fw"></span>
+                    <span>Highlight</span>
+                </div>
+            </div>
         </xpath>
     </t>
 </templates>