[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

@@ -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',

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 }))

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};
+    }
+}

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>

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;
+        }
+    }
 }

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>

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>

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>

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 = {

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;
+        }
+    }
 }

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>

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">

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",

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",