From d0885afa626bce23cac445c626d3ea32c05331e0 Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Tue, 8 Aug 2023 12:08:21 +0000
Subject: [PATCH] [IMP] website: better vertical align and horizontal spacing
 in systray

---- Horizontal spacing issue ----

The horizontal spacing between systray items in the patched website
systray is too small. It was using the regular margin of the default
Odoo systray which is composed of almost only icons for which a small
spacing is what we need.
But the website patched systray contains a lot of text, where we want a
bigger spacing, exactly how we do for the app menus.

---- New class on systray ----

To target the website systray in scss, a new class was added on it.
There is no clean way in JS to add that class, as the website systray
patch is only altering the method in charge of returning the systray
items. The rest is left up to the base NavBar class component, including
rendering.
That NavBar component does not come with a built in way to add a class.

We could have targeted the DOM directly in the patch through
`this.root.el` and added the class in JS directly but that seems like an
owl anti pattern.

---- Vertical align issue ----

Before this commit, the btn in the systray didn't have the same line
height as other elements: both the "Edit" (in main lang) and "Translate"
(in alternate lang) buttons had a (1-2px) vertical alignment issue.

This was because, despite having the same font style and font size, they
had a different line-height making it glitch 1-2px vertically.

It's a bit less visible for the Edit button as there is a pencil icon
between this text and the text next to it.
For the translate button, it's quite visible directly.

For testing purpose, you can simply remove the icons and the left-right
margins of those systray items so the text are glued to each other and
you clearly see the misindentation.

---- Misc ----

For tracking purpose, there is multiple cases to be tested regarding
those buttons:
- Community vs Enterprise (where those are colored)
- Regular mode vs translate mode

closes odoo/odoo#135956

X-original-commit: 066e4a1ddd9faf7ba866c5428c943b5af8115191
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: "stefanorigano (SRI)" <sri@odoo.com>
---
 addons/website/__manifest__.py                    |  2 ++
 .../static/src/components/navbar/navbar.js        |  9 ++++++++-
 .../static/src/components/navbar/navbar.scss      |  9 +++++++++
 .../static/src/components/navbar/navbar.xml       | 10 ++++++++++
 .../static/src/systray_items/edit_website.scss    |  7 +++++++
 .../static/src/systray_items/edit_website.xml     | 12 +++++++-----
 .../static/src/systray_items/mobile_preview.xml   |  4 ++--
 .../static/src/systray_items/new_content.xml      |  2 +-
 .../website/static/src/systray_items/publish.js   |  2 +-
 .../src/systray_items/translate_website.scss      |  7 +++++++
 .../src/systray_items/translate_website.xml       | 15 +++++++++------
 .../static/src/systray_items/website_switcher.xml |  2 +-
 .../tests/tours/snippet_table_of_content.js       |  2 +-
 .../static/src/js/tours/website_blog.js           |  4 ++--
 14 files changed, 67 insertions(+), 20 deletions(-)
 create mode 100644 addons/website/static/src/components/navbar/navbar.scss
 create mode 100644 addons/website/static/src/components/navbar/navbar.xml

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 6c911e67330..2288e6296d7 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -273,6 +273,8 @@
             'website/static/src/components/editor/editor.scss',
             'website/static/src/components/editor/editor.xml',
             'website/static/src/components/navbar/navbar.js',
+            'website/static/src/components/navbar/navbar.scss',
+            'website/static/src/components/navbar/navbar.xml',
             'website/static/src/components/burger_menu/burger_menu.js',
             'website/static/src/components/switch/switch.js',
             'website/static/src/components/switch/switch.scss',
diff --git a/addons/website/static/src/components/navbar/navbar.js b/addons/website/static/src/components/navbar/navbar.js
index d4f198c8c64..8d373a0c010 100644
--- a/addons/website/static/src/components/navbar/navbar.js
+++ b/addons/website/static/src/components/navbar/navbar.js
@@ -44,11 +44,18 @@ patch(NavBar.prototype, {
         useBus(websiteSystrayRegistry, 'CONTENT-UPDATED', renderAndAdapt);
     },
 
+    get shouldDisplayWebsiteSystray() {
+        return this.websiteService.currentWebsite && this.websiteService.isRestrictedEditor;
+    },
+
+    // Somehow a setter is needed in `patch()` to avoid an owl error.
+    set shouldDisplayWebsiteSystray(_) {},
+
     /**
      * @override
      */
     get systrayItems() {
-        if (this.websiteService.currentWebsite && this.websiteService.isRestrictedEditor) {
+        if (this.shouldDisplayWebsiteSystray) {
             return websiteSystrayRegistry
                 .getEntries()
                 .map(([key, value], index) => ({ key, ...value, index }))
diff --git a/addons/website/static/src/components/navbar/navbar.scss b/addons/website/static/src/components/navbar/navbar.scss
new file mode 100644
index 00000000000..e5a99466791
--- /dev/null
+++ b/addons/website/static/src/components/navbar/navbar.scss
@@ -0,0 +1,9 @@
+.o_menu_systray.o_website_systray {
+    @if $o-navbar-use-pills {
+        --NavBar-entry-margin-left: #{$o-navbar-entry-padding-h * 0.5};
+        --NavBar-entry-margin-right: #{$o-navbar-entry-padding-h * 0.5};
+    } @else {
+        --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h};
+        --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h};
+    }
+}
diff --git a/addons/website/static/src/components/navbar/navbar.xml b/addons/website/static/src/components/navbar/navbar.xml
new file mode 100644
index 00000000000..9a6292a0dbc
--- /dev/null
+++ b/addons/website/static/src/components/navbar/navbar.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
+    <xpath expr="//div[hasclass('o_menu_systray')]" position="attributes">
+        <attribute name="t-attf-class" add="{{shouldDisplayWebsiteSystray ? 'o_website_systray': ''}}" separator=" "/>
+    </xpath>
+</t>
+
+</templates>
diff --git a/addons/website/static/src/systray_items/edit_website.scss b/addons/website/static/src/systray_items/edit_website.scss
index d82eeabc07f..acc5452260a 100644
--- a/addons/website/static/src/systray_items/edit_website.scss
+++ b/addons/website/static/src/systray_items/edit_website.scss
@@ -1,3 +1,10 @@
 .o_edit_website_container {
     margin: -$o-navbar-padding-v 0;
+
+    &.o_not_translatable .o_nav_entry {
+        &, &:hover {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
 }
diff --git a/addons/website/static/src/systray_items/edit_website.xml b/addons/website/static/src/systray_items/edit_website.xml
index 21417080edf..081f7fb7ebb 100644
--- a/addons/website/static/src/systray_items/edit_website.xml
+++ b/addons/website/static/src/systray_items/edit_website.xml
@@ -1,11 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 <t t-name="website.EditWebsiteSystray">
-    <div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
-        <a href="#" class="h-100" accesskey="a" t-on-click="startEdit" t-att-class="{'btn btn-primary d-flex align-items-center rounded-0 border-0 fw-normal': !translatable, 'o_nav_entry': translatable}">
-            <span t-if="translatable" class="fa fa-pencil me-2"/>
-            <span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
-            <t t-esc="label"/>
+    <div class="o_menu_systray_item o_edit_website_container d-none d-md-block" t-att-class="{ o_not_translatable: !translatable }">
+        <a href="#" class="h-100" accesskey="a" t-on-click="startEdit" t-att-class="{'btn btn-primary d-flex align-items-center ps-0 pe-2 rounded-0 border-0 fw-normal': !translatable, 'o_nav_entry': translatable}">
+            <span t-att-class="{'o_nav_entry' : !translatable}">
+                <span t-if="translatable" class="fa fa-pencil me-1"/>
+                <span t-else="" class="fa" t-att-class="{ 'fa-refresh fa-spin me-2': this.state.isLoading, 'fa-pencil me-1': !this.state.isLoading }"/>
+                <t t-esc="label"/>
+            </span>
         </a>
     </div>
 </t>
diff --git a/addons/website/static/src/systray_items/mobile_preview.xml b/addons/website/static/src/systray_items/mobile_preview.xml
index ada0138cde1..4a41a70ba5f 100644
--- a/addons/website/static/src/systray_items/mobile_preview.xml
+++ b/addons/website/static/src/systray_items/mobile_preview.xml
@@ -2,9 +2,9 @@
 <templates xml:space="preserve">
 <t t-name="website.MobilePreviewSystray">
     <div class="o_mobile_preview o_menu_systray_item d-none d-md-block"
-         t-on-click="() => this.websiteService.context.isMobile = !this.websiteService.context.isMobile"
          t-att-class="{ 'o_mobile_preview_active': this.state.isMobile }">
-        <a href="#" accesskey="v" class="o_nav_entry">
+        <a href="#" accesskey="v" class="o_nav_entry"
+           t-on-click="() => this.websiteService.context.isMobile = !this.websiteService.context.isMobile">
             <span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/>
         </a>
     </div>
diff --git a/addons/website/static/src/systray_items/new_content.xml b/addons/website/static/src/systray_items/new_content.xml
index b03f2883c06..7bc26b9bf06 100644
--- a/addons/website/static/src/systray_items/new_content.xml
+++ b/addons/website/static/src/systray_items/new_content.xml
@@ -41,7 +41,7 @@
 
 <t t-name="website.NewContentSystray">
     <div class="o_menu_systray_item o_new_content_container d-none d-md-block" t-on-click="onClick">
-        <a href="#" accesskey="c" class="o_nav_entry"><span class="fa fa-plus me-2"/>New</a>
+        <a href="#" accesskey="c" class="o_nav_entry"><span class="fa fa-plus me-1"/>New</a>
         <NewContentModal t-if="websiteContext.showNewContentModal"/>
     </div>
 </t>
diff --git a/addons/website/static/src/systray_items/publish.js b/addons/website/static/src/systray_items/publish.js
index 01038609012..8d1f05f5fe0 100644
--- a/addons/website/static/src/systray_items/publish.js
+++ b/addons/website/static/src/systray_items/publish.js
@@ -58,7 +58,7 @@ PublishSystray.template = xml`
 <div t-on-click="publishContent" class="o_menu_systray_item d-md-flex ms-auto" data-hotkey="p" t-att-data-processing="state.processing and 1">
     <a href="#" class="o_nav_entry">
         <Switch value="state.published" disabled="true" extraClasses="'mb-0 o_switch_danger_success'"/>
-        <span class="d-none d-md-block ms-2" t-esc="this.label"/>
+        <span class="d-none d-md-block ms-1" t-esc="this.label"/>
     </a>
 </div>`;
 PublishSystray.components = {
diff --git a/addons/website/static/src/systray_items/translate_website.scss b/addons/website/static/src/systray_items/translate_website.scss
index 4397f19ce20..8f7f53168e3 100644
--- a/addons/website/static/src/systray_items/translate_website.scss
+++ b/addons/website/static/src/systray_items/translate_website.scss
@@ -1,3 +1,10 @@
 .o_translate_website_container {
     margin: -$o-navbar-padding-v 0;
+
+    .btn .o_nav_entry {
+        &, &:hover {
+            background-color: inherit;
+            color: inherit;
+        }
+    }
 }
diff --git a/addons/website/static/src/systray_items/translate_website.xml b/addons/website/static/src/systray_items/translate_website.xml
index 41499849783..f46dd9522ea 100644
--- a/addons/website/static/src/systray_items/translate_website.xml
+++ b/addons/website/static/src/systray_items/translate_website.xml
@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-    <t t-name="website.TranslateWebsiteSystray">
-        <div class="o_translate_website_container d-none d-md-block">
-            <a href="#" accesskey="t" t-on-click="startTranslate" class="btn btn-primary d-flex align-items-center h-100 rounded-0 border-0 fw-normal">
+<t t-name="website.TranslateWebsiteSystray">
+    <div class="o_menu_systray_item o_translate_website_container d-none d-md-block">
+        <a href="#" accesskey="t" t-on-click="startTranslate" class="btn btn-primary d-flex align-items-center h-100 px-0 rounded-0 border-0 fw-normal">
+            <span class="o_nav_entry">
                 <span t-if="websiteContext.translation" class="fa fa-refresh fa-spin me-2"/>
                 Translate
-            </a>
-        </div>
-    </t>
+            </span>
+        </a>
+    </div>
+</t>
+
 </templates>
diff --git a/addons/website/static/src/systray_items/website_switcher.xml b/addons/website/static/src/systray_items/website_switcher.xml
index d5cc7c9022a..229deed7ec3 100644
--- a/addons/website/static/src/systray_items/website_switcher.xml
+++ b/addons/website/static/src/systray_items/website_switcher.xml
@@ -4,7 +4,7 @@
     <Dropdown class="'o_menu_systray_item o_website_switcher_container'" hotkey="'w'">
         <t t-set-slot="toggler">
             <div class="d-none d-md-block">
-                <span t-esc="websiteService.currentWebsite.name" class="me-2"/>
+                <span t-esc="websiteService.currentWebsite.name" class="me-1"/>
                 <i class="fa fa-caret-down"/>
             </div>
             <div class="d-md-none">
diff --git a/addons/website/static/tests/tours/snippet_table_of_content.js b/addons/website/static/tests/tours/snippet_table_of_content.js
index 9587a153ade..0c5c0a2dd03 100644
--- a/addons/website/static/tests/tours/snippet_table_of_content.js
+++ b/addons/website/static/tests/tours/snippet_table_of_content.js
@@ -68,7 +68,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_table_of_content', {
     },
     {
         content: "Toggle the mobile view",
-        trigger: '.o_mobile_preview',
+        trigger: '.o_mobile_preview > a',
     },
     {
         content: "Check that we have the good TOC on mobile",
diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js
index 9c6e109ed34..6619175d1cc 100644
--- a/addons/website_blog/static/src/js/tours/website_blog.js
+++ b/addons/website_blog/static/src/js/tours/website_blog.js
@@ -75,11 +75,11 @@
     },
     ...wTourUtils.clickOnSave(),
     {
-        trigger: ".o_menu_systray_item.o_mobile_preview",
+        trigger: ".o_menu_systray_item.o_mobile_preview > a",
         content: markup(_t("Use this icon to preview your blog post on <b>mobile devices</b>.")),
         position: "bottom",
     }, {
-        trigger: ".o_menu_systray_item.o_mobile_preview",
+        trigger: ".o_menu_systray_item.o_mobile_preview > a",
         extra_trigger: '.o_website_preview.o_is_mobile',
         content: _t("Once you have reviewed the content on mobile, you can switch back to the normal view by clicking here again"),
         position: "right",