From e8e47eaafc31bca26a6d8a578162b8a42d355f81 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 31 Mar 2023 13:43:28 +0200
Subject: [PATCH] [IMP] website, *: add `stretch` header

*: website_sale, website_sale_wishlist

task-3060986

Part-of: odoo/odoo#119650
---
 addons/website/models/theme_models.py         |  1 +
 .../header_template_stretch.svg               |  1 +
 addons/website/static/src/scss/website.scss   | 14 +++
 addons/website/views/snippets/snippets.xml    | 13 ++-
 addons/website/views/website_templates.xml    | 86 +++++++++++++++++++
 addons/website_sale/views/templates.xml       | 11 +++
 .../views/website_sale_wishlist_template.xml  | 11 +++
 7 files changed, 133 insertions(+), 4 deletions(-)
 create mode 100644 addons/website/static/src/img/snippets_options/header_template_stretch.svg

diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 0049075e171..0e018bf46d4 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -229,6 +229,7 @@ class Theme(models.AbstractModel):
         'website.template_header_image',
         'website.template_header_hamburger_full',
         'website.template_header_magazine',
+        'website.template_header_stretch',
         # Default one, keep it last
         'website.template_header_default',
     ]
diff --git a/addons/website/static/src/img/snippets_options/header_template_stretch.svg b/addons/website/static/src/img/snippets_options/header_template_stretch.svg
new file mode 100644
index 00000000000..db2fd0055df
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/header_template_stretch.svg
@@ -0,0 +1 @@
+<svg width="234" height="60" viewBox="0 0 234 60" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".5" d="M0 5h234v50H0z"/><path transform="translate(0 5)" fill="url(#header_preview_stretch__a)" d="M0 0h234v15H0z"/><path d="M18.082 16.289v-1.865h-3.708V8.71H12v7.58l6.082-.001Zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491Zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964v-3.232h-3.67v1.577h1.589v.714c-.26.16-.539.29-.828.388a2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.475 2.475 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367-.64.293-1.173.78-1.52 1.393-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46Zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491Z" fill="#fff"/><path fill-opacity=".12" d="M165 5h39v15h-39z"/><g clip-path="url(#header_preview_stretch__b)"><path d="M186.286 12.143c0-.688-.245-1.277-.734-1.766a2.407 2.407 0 0 0-1.766-.734c-.688 0-1.277.244-1.766.734a2.405 2.405 0 0 0-.734 1.766c0 .688.244 1.277.734 1.766.489.49 1.078.734 1.766.734s1.277-.245 1.766-.734a2.41 2.41 0 0 0 .734-1.766Zm2.857 4.643a.69.69 0 0 1-.212.502.688.688 0 0 1-.502.212.665.665 0 0 1-.503-.212l-1.914-1.909a3.82 3.82 0 0 1-2.226.692 3.857 3.857 0 0 1-1.526-.31 3.93 3.93 0 0 1-1.256-.836 3.913 3.913 0 0 1-.837-1.256 3.851 3.851 0 0 1-.31-1.526c0-.532.103-1.04.31-1.526.206-.486.485-.904.837-1.256a3.93 3.93 0 0 1 1.256-.837c.485-.206.994-.31 1.526-.31s1.04.104 1.526.31a3.94 3.94 0 0 1 1.256.837c.351.352.63.77.837 1.256.206.485.309.994.309 1.526 0 .818-.23 1.56-.692 2.226l1.914 1.915a.683.683 0 0 1 .207.502Z" fill="#fff"/></g><path fill="#fff" d="M204 5h30v15h-30z"/><defs><linearGradient id="header_preview_stretch__a" x1="0" y1="0" x2="223.173" y2="57.224" gradientUnits="userSpaceOnUse"><stop stop-color="#357C83"/><stop offset="1" stop-color="#01A09D"/></linearGradient><clipPath id="header_preview_stretch__b"><path fill="#fff" transform="translate(179.5 7.5)" d="M0 0h10v10H0z"/></clipPath></defs></svg>
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index cf6ee9002bc..00159da5342 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1232,6 +1232,20 @@ header {
             align-items: center !important;
         }
     }
+} @else if o-website-value('header-template') == 'stretch' {
+    #wrapwrap > header input::placeholder {
+        color: #{var(--NavStretch-placeholder-color, $input-placeholder-color)};
+    }
+    #wrapwrap > header .o_extra_menu_items {
+        height: 100%;
+        border-left: $border-width solid var(--NavLinkWithBackground-bg-color--hover, rgba($navbar-light-active-color, .1));
+
+        > .nav-link {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+    }
 }
 
 .o_grid_header_3_cols {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index bdcd648f569..fb6efb3c42f 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -751,6 +751,11 @@
                        data-customize-website-views="website.template_header_boxed"
                        data-customize-website-variable="'boxed'"
                        data-img="/website/static/src/img/snippets_options/header_template_boxed.svg"/>
+            <we-button title="Stretch menu"
+                       data-name="header_stretch_opt"
+                       data-customize-website-views="website.template_header_stretch"
+                       data-customize-website-variable="'stretch'"
+                       data-img="/website/static/src/img/snippets_options/header_template_stretch.svg"/>
             <we-button title="Vertical"
                        data-name="header_vertical_opt"
                        data-customize-website-views="website.template_header_vertical"
@@ -952,21 +957,21 @@
             <!-- 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 class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment" data-dependencies="header_default_opt, header_hamburger_opt, header_slogan_opt, header_boxed_opt">
+            <we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment" data-dependencies="header_default_opt, header_hamburger_opt, header_slogan_opt, header_boxed_opt, header_stretch_opt">
                 <we-button data-customize-website-views=""
                            data-customize-website-variable="'left'"
                            data-icon="fa-align-left"/>
-                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_slogan_align_center, website.template_header_boxed_align_center"
+                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_slogan_align_center, website.template_header_boxed_align_center, website.template_header_stretch_align_center"
                            data-customize-website-variable="'center'"
                            data-icon="fa-align-center"
                            data-dependencies="!header_hamburger_opt"/>
-                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_boxed_align_right, website.template_header_slogan_align_right"
+                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_boxed_align_right, website.template_header_slogan_align_right, website.template_header_stretch_align_right"
                            data-customize-website-variable="'right'"
                            data-icon="fa-align-right"/>
             </we-select>
         </we-row>
 
-        <we-select string="Links Style" data-variable="header-links-style" data-reload="/">
+        <we-select string="Links Style" data-variable="header-links-style" data-reload="/" data-dependencies="!header_stretch_opt">
             <we-button data-name="option_header_navbar_links_default"
                        data-customize-website-views=""
                        data-customize-website-variable="'default'">Default</we-button>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 658f4af2e1e..efcc0669237 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -617,6 +617,92 @@
     </xpath>
 </template>
 
+<!-- "Stretch" template -->
+<template id="template_header_stretch" inherit_id="website.layout" name="Template Header Stretch" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <t t-call="website.navbar">
+            <t t-set="_navbar_classes" t-valuef="d-none d-lg-block py-0 shadow-sm"/>
+
+            <div id="top_menu_container" class="container align-items-stretch">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-valuef="d-flex align-items-center me-4 p-2"/>
+                </t>
+                <!-- Navbar -->
+                <t t-call="website.navbar_nav">
+                    <t t-set="_nav_class" t-valuef="d-flex align-items-center me-auto border-end o_border_contrast"/>
+
+                    <!-- Menu -->
+                    <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                        <t t-call="website.submenu">
+                            <t t-set="item_class" t-valuef="nav-item h-100 border-start o_border_contrast"/>
+                            <t t-set="link_class" t-valuef="nav-link d-flex align-items-center h-100"/>
+                        </t>
+                    </t>
+                </t>
+                <!-- Extra elements -->
+                <ul class="o_header_stretch_elts navbar-nav flex-shrink-0 ps-2">
+                    <!-- Text element -->
+                        <t t-call="website.placeholder_header_text_element">
+                            <t t-set="_div_class" t-valuef="h-100 border-start o_border_contrast"/>
+                            <t t-set="_link_class" t-valuef="o_navlink_background_hover d-flex align-items-center h-100 text-reset"/>
+                        </t>
+                    <!-- Search bar -->
+                    <t t-call="website.placeholder_header_search_box">
+                        <t t-set="_input_classes" t-valuef="o_header_stretch_search_input border-0 rounded-0 bg-transparent text-reset"/>
+                        <t t-set="_submit_classes" t-valuef="o_navlink_background_hover rounded-0 text-reset"/>
+                        <t t-set="_form_classes" t-valuef="h-100 z-index-0"/>
+                        <t t-set="_classes" t-valuef="h-100 border-start o_border_contrast"/>
+                    </t>
+                    <!-- Social -->
+                    <t t-call="website.header_social_links_no_color">
+                        <t t-set="_div_class" t-valuef="d-flex align-items-center h-100 border-start px-2 o_border_contrast"/>
+                    </t>
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector">
+                        <t t-set="_div_classes" t-valuef="h-100 border-start o_border_contrast"/>
+                        <t t-set="_btn_class" t-valuef="o_navlink_background_hover h-100 rounded-0 text-reset"/>
+                        <t t-set="_txt_class" t-valuef="small"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
+                    </t>
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-valuef="border-start o_border_contrast"/>
+                        <t t-set="_link_class" t-valuef="o_navlink_background_hover btn d-flex align-items-center h-100 rounded-0 fw-bold text-reset"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_icon" t-value="true"/>
+                        <t t-set="_item_class" t-valuef="dropdown border-start o_border_contrast"/>
+                        <t t-set="_link_class" t-valuef="o_navlink_background_hover d-flex align-items-center h-100 rounded-0 text-reset"/>
+                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end"/>
+                    </t>
+                    <!-- Call To Action -->
+                    <t t-call="website.header_call_to_action_stretched">
+                        <t t-set="_div_class" t-valuef="d-flex h-100 border-start o_border_contrast"/>
+                    </t>
+                </ul>
+            </div>
+        </t>
+        <t t-call="website.template_header_mobile"/>
+    </xpath>
+</template>
+
+<template id="template_header_stretch_align_center" inherit_id="website.template_header_stretch" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-valuef="d-flex align-items-center mx-auto border-end px-2 o_border_contrast"/>
+    </xpath>
+</template>
+
+<template id="template_header_stretch_align_right" inherit_id="website.template_header_stretch" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-valuef="d-flex align-items-center ms-auto o_border_contrast"/>
+    </xpath>
+    <xpath expr="//ul[hasclass('o_header_stretch_elts')]" position="attributes">
+        <attribute name="class" remove="ps-2" separator=" "/>
+    </xpath>
+</template>
+
 <!-- "Vertical" template -->
 <template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
     <xpath expr="//header//nav" position="replace">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index cd0e66b5551..87878056f05 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -61,6 +61,17 @@
         </xpath>
     </template>
 
+    <template id="template_header_stretch" inherit_id="website.template_header_stretch">
+        <xpath expr="//t[@t-call='website.header_social_links_no_color']" position="before">
+            <t t-call="website_sale.header_cart_link">
+                <t t-set="_icon" t-value="True"/>
+                <t t-set="_item_class" t-value="'border-start o_border_contrast'"/>
+                <t t-set="_link_class" t-value="'o_navlink_background_hover btn position-relative d-flex align-items-center h-100 rounded-0 p-2 text-reset'"/>
+                <t t-set="_badge_class" t-value="'rounded'"/>
+            </t>
+        </xpath>
+    </template>
+
     <template id="template_header_vertical" inherit_id="website.template_header_vertical">
         <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
             <t t-call="website_sale.header_cart_link">
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index a10714d68a7..34e66553b59 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -85,6 +85,17 @@
         </xpath>
     </template>
 
+    <template id="template_header_stretch" inherit_id="website_sale.template_header_stretch">
+        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
+            <t t-call="website_sale_wishlist.header_wishlist_link">
+                <t t-set="_icon" t-value="True"/>
+                <t t-set="_item_class" t-value="'border-start o_border_contrast'"/>
+                <t t-set="_link_class" t-value="'o_navlink_background_hover btn position-relative d-flex align-items-center h-100 rounded-0 p-2 text-reset'"/>
+                <t t-set="_badge_class" t-value="'rounded'"/>
+            </t>
+        </xpath>
+    </template>
+
     <template id="template_header_vertical" inherit_id="website_sale.template_header_vertical">
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">