pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: define one-sided or full borders on header templates

Browse Source 
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
This commit is contained in:
Robin Lejeune (role)
2023-10-25 11:37:12 +00:00
committed by qsm-odoo
parent e7dcfc1929
commit a017f6b7e9
3 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+18
View File
@@ -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({
addons/website/static/src/scss/website.scss
+9 -1
View File
@@ -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;
addons/website/views/website_templates.xml
+3 -3
View File
@@ -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>