From a017f6b7e9cf271cf15f4e7d8f9bdeac84ee2806 Mon Sep 17 00:00:00 2001
From: "Robin Lejeune (role)" <role@odoo.com>
Date: Fri, 29 Sep 2023 15:53:09 +0200
Subject: [PATCH] [IMP] website: define one-sided or full borders on header
 templates

When we set a border on a header, its 4 sides are affected. For most
templates, it doesn't make sense to have borders on the top, left and
right sides.
This commit applies a border-bottom-only style by default to headers,
and adds two classes `.o_full_border` and `.o_border_right_only` to
override the default behavior. As their names imply, they respectively
apply borders on the 4 sides or on the right side only.

task-3474743

Part-of: odoo/odoo#119650
---
 .../static/src/js/editor/snippets.options.js   | 18 ++++++++++++++++++
 addons/website/static/src/scss/website.scss    | 10 +++++++++-
 addons/website/views/website_templates.xml     |  6 +++---
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 3d9183a6344..f6727542b73 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2810,6 +2810,24 @@ options.registry.HeaderBox = options.registry.Box.extend({
         }
         return this._super(...arguments);
     },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        const value = await this._super(...arguments);
+        if (methodName === "selectStyle" && params.cssProperty === "border-width") {
+            // One-sided borders return "0px 0px 3px 0px", which prevents the
+            // option from being displayed properly. We only keep the affected
+            // border.
+            return value.replace(/(^|\s)0px/gi, "").trim() || value;
+        }
+        return value;
+    },
 });
 
 options.registry.CookiesBar = options.registry.SnippetPopup.extend({
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 772495500b6..2d942c05b19 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1104,7 +1104,15 @@ header {
 
     nav.navbar {
         @if o-website-value('menu-border-width') {
-            border: o-website-value('menu-border-width') o-website-value('menu-border-style') o-color('menu-border-color') !important;
+            border: o-website-value('menu-border-style') o-color('menu-border-color') !important;
+            border-width: 0 0 o-website-value('menu-border-width') 0 !important;
+
+            &.o_border_right_only {
+                border-width: 0 o-website-value('menu-border-width') 0 0 !important;
+            }
+            &.o_full_border {
+                border-width: o-website-value('menu-border-width') !important;
+            }
         }
         border-radius: o-website-value('menu-border-radius') !important;
         box-shadow: o-website-value('menu-box-shadow') !important;
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index cd49d63806b..64bd7b24998 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1285,7 +1285,7 @@
     </xpath>
     <xpath expr="//header//nav" position="replace">
         <t t-call="website.navbar">
-            <t t-set="_navbar_classes" t-valuef="d-none d-lg-block shadow"/>
+            <t t-set="_navbar_classes" t-valuef="o_border_right_only d-none d-lg-block shadow"/>
 
             <div id="o_main_nav" class="navbar-nav d-flex flex-column justify-content-between h-100 w-100">
                <div class="d-flex flex-column w-100 h-100">
@@ -1407,7 +1407,7 @@
     <xpath expr="//header//nav" position="replace">
         <div class="container py-3 px-0">
             <t t-call="website.navbar">
-                <t t-set="_navbar_classes" t-valuef="d-none d-lg-block rounded-pill py-2 px-3 shadow-sm"/>
+                <t t-set="_navbar_classes" t-valuef="o_full_border d-none d-lg-block rounded-pill py-2 px-3 shadow-sm"/>
 
                 <div id="o_main_nav" class="container">
                     <!-- Brand -->
@@ -1464,7 +1464,7 @@
                 </div>
             </t>
             <t t-call="website.template_header_mobile">
-                <t t-set="_extra_navbar_classes" t-valuef="mx-1 rounded-pill"/>
+                <t t-set="_extra_navbar_classes" t-valuef="o_full_border mx-1 rounded-pill"/>
             </t>
         </div>
     </xpath>