[FIX] website: reorder/reword header's options

task-2335267
part-of: #57942

3 files changed, 96 insertions, 125 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 3b53a594bd7..53c90a7b241 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1769,7 +1769,7 @@ options.registry.collapse = options.Class.extend({
     },
 });
 
-options.registry.HeaderLogo = options.Class.extend({
+options.registry.HeaderNavbar = options.Class.extend({
 
     //--------------------------------------------------------------------------
     // Private
@@ -1790,36 +1790,6 @@ options.registry.HeaderLogo = options.Class.extend({
     },
 });
 
-options.registry.HeaderTemplate = options.Class.extend({
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    async _renderOriginalXML($xml) {
-        const uiFragment = await this._super(...arguments);
-
-        const widgets = this._requestUserValueWidgets('header_alignment_opt', 'header_hamburger_type_opt');
-        for (const widget of widgets) {
-            const titleEl = widget.el.querySelector('we-title');
-            const spanEl1 = document.createElement('span');
-            spanEl1.textContent = " (+ ";
-            titleEl.appendChild(spanEl1);
-            const iconEl = document.createElement('i');
-            iconEl.classList.add('fa', 'fa-mobile');
-            titleEl.appendChild(iconEl);
-            const spanEl2 = document.createElement('span');
-            spanEl2.textContent = ")";
-            titleEl.appendChild(spanEl2);
-        }
-
-        return uiFragment;
-    },
-});
-
 const VisibilityPageOptionUpdate = options.Class.extend({
     pageOptionName: undefined,
     showOptionWidgetName: undefined,
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 9a6d03f0ed9..2b514d7e478 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -527,8 +527,7 @@
          data-selector="[data-oe-expression='res_company.partner_id']"
          data-no-check="true"/>
 
-    <div data-js="HeaderTemplate"
-         data-selector="#wrapwrap > header"
+    <div data-selector="#wrapwrap > header"
          data-no-check="true"
          groups="website.group_website_designer">
         <we-select string="Template" data-variable="header-template" data-reload="/">
@@ -602,39 +601,6 @@
                   data-unit="px"
                   data-save-unit="rem"/>
 
-        <!-- Generic alignment option controling all the template at once. -->
-        <!-- Currently needed to be this way as the SCSS variable controls -->
-        <!-- the mobile alignement which is the same for all templates. -->
-        <we-select string="⌙ Alignment"
-                   data-name="header_alignment_opt"
-                   data-variable="hamburger-position"
-                   data-reload="/">
-            <we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
-            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center" data-customize-website-variable="'center'">Center</we-button>
-            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right" data-customize-website-variable="'right'">Right</we-button>
-        </we-select>
-
-        <!-- Generic Hamburger Options (mobile or not) -->
-        <we-select string="⌙ Hamburger Type"
-                   data-name="header_hamburger_type_opt"
-                   data-variable="hamburger-type"
-                   data-reload="/">
-            <we-button data-customize-website-variable="'default'"
-                       data-customize-website-views="">Default</we-button>
-            <we-button data-name="off_canvas_menu_opt"
-                       data-customize-website-variable="'off-canvas'"
-                       data-customize-website-views="website.option_header_off_canvas, website.option_header_off_canvas_template_header_hamburger, website.option_header_off_canvas_template_header_sidebar, website.option_header_off_canvas_template_header_hamburger_full">Off-Canvas</we-button>
-        </we-select>
-        <we-select string=" ⌙ Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
-            <we-button data-customize-website-views="">Text</we-button>
-            <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
-        </we-select>
-
-        <we-row string="Font">
-            <we-fontfamilypicker data-variable="navbar-font"/>
-            <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
-        </we-row>
-
         <we-row string="Colors">
             <we-colorpicker data-customize-website-color="" data-color="menu"
                             data-with-combinations="true"/>
@@ -663,30 +629,10 @@
         </t>
     </div>
 
-    <div data-js="HeaderLogo"
-         data-selector="#wrapwrap > header"
+    <div data-selector="#wrapwrap > header"
          data-no-check="true"
          groups="website.group_website_designer">
 
-        <we-select string="Logo" data-reload="/">
-            <we-button data-customize-website-views="" data-name="option_header_brand_none">None</we-button>
-            <we-button data-customize-website-views="website.option_header_brand_name">Text</we-button>
-            <we-button data-customize-website-views="website.option_header_brand_logo">Image</we-button>
-        </we-select>
-        <we-input string="⌙ Height"
-                  data-dependencies="!option_header_brand_none"
-                  data-customize-website-variable="null"
-                  data-variable="logo-height"
-                  data-unit="px"
-                  data-save-unit="rem"/>
-        <we-input string="⌙ Height (Scrolled)"
-                  data-name="option_logo_height_scrolled"
-                  data-customize-website-variable="null"
-                  data-variable="fixed-logo-height"
-                  data-unit="px"
-                  data-save-unit="rem"
-                  data-dependencies="!header_effect_scroll_opt"/>
-
         <we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt">
             <t t-set="header_effect_standard_label">Standard</t>
             <t t-set="header_effect_scroll_label">Scroll</t>
@@ -739,8 +685,70 @@
                <small t-esc='header_effect_fadeout_label'/>
             </we-button>
         </we-select>
+    </div>
+
+    <div data-js="TopMenuVisibility"
+         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+         data-no-check="true">
+        <we-select string="Header Position" id="option_header_visibility" data-no-preview="true">
+            <we-button data-visibility="transparent">Over The Content</we-button>
+            <we-button data-name="regular_header_visibility_opt"
+                       data-visibility="regular">Regular</we-button>
+            <we-button data-visibility="hidden">Hidden</we-button>
+        </we-select>
+    </div>
+
+    <div data-js="topMenuColor"
+         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+         data-no-check="true">
+        <we-colorpicker string="⌙ Background"
+            id="option_header_transparent_color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"
+            data-excluded="theme, common, custom"/>
+    </div>
+
+    <!-- Header > Navbar Options -->
+    <div data-js="HeaderNavbar"
+         data-selector="#wrapwrap > header > nav"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <!-- Generic alignment option controling all the template at once. -->
+        <!-- Currently needed to be this way as the SCSS variable controls -->
+        <!-- the mobile alignement which is the same for all templates. -->
+        <we-select string="Alignment"
+                   data-name="header_alignment_opt"
+                   data-variable="hamburger-position"
+                   data-reload="/">
+            <we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center" data-customize-website-variable="'center'">Center</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right" data-customize-website-variable="'right'">Right</we-button>
+        </we-select>
+
+        <!-- Generic Hamburger Options (mobile or not) -->
+        <we-select string="Hamburger Type"
+                   data-name="header_hamburger_type_opt"
+                   data-variable="hamburger-type"
+                   data-reload="/">
+            <we-button data-customize-website-variable="'default'"
+                       data-customize-website-views="">Default</we-button>
+            <we-button data-name="off_canvas_menu_opt"
+                       data-customize-website-variable="'off-canvas'"
+                       data-customize-website-views="website.option_header_off_canvas, website.option_header_off_canvas_template_header_hamburger, website.option_header_off_canvas_template_header_sidebar, website.option_header_off_canvas_template_header_hamburger_full">Off-Canvas</we-button>
+        </we-select>
+
+        <we-select string="⌙ Off-Canvas Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
+        </we-select>
+
+        <we-row string="Font">
+            <we-fontfamilypicker data-variable="navbar-font"/>
+            <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
+        </we-row>
 
-        <we-select string="Menu Style" data-variable="header-links-style" data-reload="/">
+        <we-select string="Links Style" data-variable="header-links-style" data-reload="/">
             <we-button data-name="option_header_navbar_links_default"
                        data-customize-website-views=""
                        data-customize-website-variable="'default'">Default</we-button>
@@ -766,34 +774,27 @@
                        data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
             <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
         </we-select>
-    </div>
 
-    <div data-js="TopMenuVisibility"
-        data-selector="[data-main-object^='website.page('] #wrapwrap > header"
-        data-no-check="true">
-        <we-select string="Page Visibility" id="option_header_visibility" data-no-preview="true">
-            <we-button data-name="regular_header_visibility_opt"
-                       data-visibility="regular">Regular</we-button>
-            <we-button data-visibility="transparent">Transparent</we-button>
-            <we-button data-visibility="hidden">Hidden</we-button>
+        <we-select string="Logo type" data-reload="/">
+            <we-button data-customize-website-views="" data-name="option_header_brand_none">None</we-button>
+            <we-button data-customize-website-views="website.option_header_brand_name">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_brand_logo">Image</we-button>
         </we-select>
-    </div>
-
-    <div data-js="topMenuColor"
-         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
-         data-no-check="true">
-        <we-colorpicker string="Transparent color"
-            id="option_header_transparent_color"
-            data-select-style="true"
-            data-css-property="background-color"
-            data-color-prefix="bg-"
-            data-excluded="theme, common, custom"/>
-    </div>
+        <we-input string="⌙ Height"
+                  data-dependencies="!option_header_brand_none"
+                  data-customize-website-variable="null"
+                  data-variable="logo-height"
+                  data-unit="px"
+                  data-save-unit="rem"/>
+        <we-input string="⌙ Height (Scrolled)"
+                  data-name="option_logo_height_scrolled"
+                  data-customize-website-variable="null"
+                  data-variable="fixed-logo-height"
+                  data-unit="px"
+                  data-save-unit="rem"
+                  data-dependencies="!header_effect_scroll_opt"/>
 
-    <div data-selector="#wrapwrap > header"
-         data-no-check="true"
-         groups="website.group_website_designer">
-        <we-checkbox string="Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
+        <we-checkbox string="Show Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
         <we-select string="Language Selector" data-reload="/">
             <we-button data-name="header_language_selector_none_opt"
                        data-customize-website-views="">None</we-button>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 97348929ec2..3f717fc5d05 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -223,7 +223,7 @@
 <!-- "Default" template -->
 <template id="template_header_default" inherit_id="website.layout" name="Template Header Default" active="True">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
             <div id="top_menu_container" class="container justify-content-start justify-content-lg-between">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
@@ -295,7 +295,7 @@
 <!-- "Hamburger" template -->
 <template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-light o_colored_level o_cc">
+        <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
@@ -429,7 +429,7 @@
 <!-- "Vertical" template -->
 <template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-expand-lg navbar-light flex-lg-column o_colored_level o_cc shadow-sm py-0">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light flex-lg-column o_colored_level o_cc shadow-sm py-0">
             <div id="top_menu_container" class="container align-items-center flex-row flex-wrap">
                 <!-- Left -->
                 <div class="o_header_centered_logo">
@@ -536,7 +536,7 @@
 
 <template id="template_header_sidebar" inherit_id="website.layout" name="Template Header Sidebar" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow pb-3">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow pb-3">
             <div id="top_menu_container" class="container h-100">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
@@ -620,7 +620,7 @@
 
 <template id="template_header_slogan" inherit_id="website.layout" name="Template Header Slogan" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
             <div id="top_menu_container" class="container flex-row flex-wrap">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand">
@@ -718,7 +718,7 @@
 <template id="template_header_contact" inherit_id="website.layout" name="Template Header Contact" active="False">
     <xpath expr="//header//nav" position="replace">
         <div class="oe_structure" id="oe_structure_header_contact_1"/>
-        <nav class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
@@ -803,7 +803,7 @@
 
 <template id="template_header_minimalist" inherit_id="website.layout" name="Template Header Minimalist" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-light navbar-expand-md o_colored_level o_cc">
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-md o_colored_level o_cc">
             <div id="top_menu_container" class="container flex-wrap">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
@@ -871,7 +871,7 @@
             </div>
         </div>
         <div id="top_menu_container" class="container mt-n4">
-            <nav class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm rounded pr-2">
+            <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm rounded pr-2">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
                 <!-- Navbar Toggler -->
@@ -932,7 +932,7 @@
 
 <template id="template_header_centered_logo" inherit_id="website.layout" name="Template Header Centered Logo" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-light navbar-expand-lg o_colored_level o_cc">
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc">
             <div id="top_menu_container" class="container">
                 <!-- Navbar Toggler -->
                 <t t-call="website.navbar_toggler"/>
@@ -978,7 +978,7 @@
 <template id="template_header_image" inherit_id="website.layout" name="Template Header Image" active="False">
     <xpath expr="//header//nav" position="replace">
         <div class="oe_structure" id="oe_structure_header_image_1"/>
-        <nav class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
@@ -1049,7 +1049,7 @@
 
 <template id="template_header_hamburger_full" inherit_id="website.layout" name="Template Header Hambuger Full" active="False">
     <xpath expr="//header//nav" position="replace">
-        <nav class="navbar navbar-light o_colored_level o_cc">
+        <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>
@@ -1129,7 +1129,7 @@
     <xpath expr="//header//nav" position="replace">
         <!-- Topbar -->
         <div class="oe_structure" id="oe_structure_header_magazine_1"/>
-        <nav class="navbar navbar-light o_colored_level o_cc">
+        <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
             <div id="top_menu_container" class="container">
                 <!-- Brand -->
                 <t t-call="website.placeholder_header_brand"/>