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

[IMP] website, *: add style options for navbar links

Browse Source 
*: web

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

X-original-commit: 3f7e2949aef56d66b46417206b539f5ca74a1aae
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Cocographique
2020-08-28 08:19:35 +00:00
committed by Xavier-Do
co-authored by qsm-odoo
parent a65407b9c3
commit 9ee35cf23e
6 changed files with 109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_review.scss
Vendored
+14
View File
@@ -171,3 +171,17 @@ $o-btn-outline-defaults: () !default;
padding-right: 0;
}
}
// Review bootstrap navbar to work with different nav styles
$o-navbar-nav-pills-link-padding-x: $nav-link-padding-x !default;
$o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
.navbar-nav.nav-pills .nav-link {
// The rules is needed so that the padding is not reset to 0 in mobile.
// Also use default nav-link paddings instead of navbar ones.
padding-right: $o-navbar-nav-pills-link-padding-x;
padding-left: $o-navbar-nav-pills-link-padding-x;
@if $o-navbar-nav-pills-link-border-radius != $nav-pills-border-radius {
@include border-radius($o-navbar-nav-pills-link-border-radius);
}
}
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+19
View File
@@ -10,6 +10,14 @@ $yiq-contrasted-threshold: false !default;
$yiq-text-dark: o-color('900') !default;
$yiq-text-light: o-color('white') !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default; // Need to predefine as used below
// Body
//
// Settings for the `<body>` element.
@@ -54,6 +62,13 @@ $headings-color: o-color('o-cc1-headings') !default;
$text-muted: mute-color($body-color) !default;
// Navbar
// Increase default navbar padding for some navbar styles
$navbar-padding-y: if(index(('fill', 'pills', 'outline'), o-website-value('header-links-style')), ($spacer / 2) * 1.25, null) !default;
$navbar-nav-link-padding-x: if(index(('outline', 'block'), o-website-value('header-links-style')), .5rem * 3, null) !default;
$navbar-nav-link-padding-x: if(o-website-value('header-links-style') == 'border-bottom', .5rem * 2, null) !default;
// Jumbotron
$jumbotron-bg: transparent !default;
@@ -66,3 +81,7 @@ $o-btn-outline-defaults: () !default;
$o-btn-outline-defaults: append($o-btn-outline-defaults, $color);
}
}
// Increase default navbar pills padding for 'pills' mode and add big radius
$o-navbar-nav-pills-link-padding-x: if(o-website-value('header-links-style') == 'pills', 1rem * 1.5, null) !default;
$o-navbar-nav-pills-link-border-radius: if(o-website-value('header-links-style') == 'pills', 10rem, null) !default;
addons/website/static/src/scss/primary_variables.scss
+1
View File
@@ -262,6 +262,7 @@ $o-base-website-values-palette: (
'header-template': 'default', // 'default' / 'hamburger' / 'vertical'
'header-font-size': null, // Default to BS (normal font-size)
'header-links-style': 'default', // 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom'
'logo-height': null, // Default to navbar height (see portal)
'hamburger-type': 'default', // 'default' / 'off-canvas'
'hamburger-position': 'right', // 'right' / 'left' / 'center'
addons/website/static/src/scss/website.scss
+48
View File
@@ -979,6 +979,54 @@ header {
}
}
// Navbar Links Styles
@if index(('block', 'border-bottom'), o-website-value('header-links-style')) {
@include media-breakpoint-up(md) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
}
}
.navbar-nav {
.nav-link {
@if o-website-value('header-links-style') == 'outline' {
// Need to force the padding in this case so that it stays in mobile
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
border: $border-width solid transparent;
@include border-radius($nav-pills-border-radius);
} @else if o-website-value('header-links-style') == 'block' {
// There is no way to control navbar links vertical padding in BS4
// independently from nav ones, just double them here instead
padding-top: $nav-link-padding-y * 2;
padding-bottom: $nav-link-padding-y * 2;
@include border-radius(0);
} @else if o-website-value('header-links-style') == 'border-bottom' {
// There is no way to control navbar links vertical padding in BS4
// independently from nav ones, just double them here instead
padding-top: ($nav-link-padding-y * 2);
padding-bottom: ($nav-link-padding-y * 2);
border-bottom: $nav-link-padding-y solid transparent;
// Replace horizontal paddings by margins (do this with an extra
// class to override .navbar-expand-* paddings priority).
.navbar & {
padding-left: 0;
padding-right: 0;
margin: 0 $navbar-nav-link-padding-x;
}
}
}
@if index(('outline', 'border-bottom'), o-website-value('header-links-style')) {
.nav-link.active,
.show > .nav-link {
border-color: currentColor;
}
}
}
// Footer Templates
#footer {
@if o-website-value('footer-template') != 'products_contacts_about_us' {
addons/website/views/snippets/snippets.xml
+21
View File
@@ -629,6 +629,27 @@
string="Fade Out"/>
</we-select>
<we-select string="Navbar 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>
<we-button data-name="option_header_navbar_links_fill"
data-customize-website-views="website.header_navbar_pills_style"
data-customize-website-variable="'fill'">Fill</we-button>
<we-button data-name="option_header_navbar_links_outline"
data-customize-website-views=""
data-customize-website-variable="'outline'">Outline</we-button>
<we-button data-name="option_header_navbar_links_pills"
data-customize-website-views="website.header_navbar_pills_style"
data-customize-website-variable="'pills'">Pills</we-button>
<we-button data-name="option_header_navbar_block"
data-customize-website-views="website.header_navbar_pills_style"
data-customize-website-variable="'block'">Block</we-button>
<we-button data-name="option_header_navbar_border_bottom"
data-customize-website-views=""
data-customize-website-variable="'border-bottom'">Border Bottom</we-button>
</we-select>
<we-select id="option_header_dropdown" string="Sub Menus" data-dependencies="!header_hamburger_opt" data-no-preview="true">
<we-button data-select-class="o_hoverable_dropdown"
data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
addons/website/views/website_templates.xml
+6
View File
@@ -330,6 +330,12 @@
</xpath>
</template>
<template id="header_navbar_pills_style" inherit_id="website.layout" name="Navbar Links Style" active="False">
<xpath expr="//ul[hasclass('navbar-nav')]" position="attributes">
<attribute name="class" add="nav-pills" separator=" "/>
</xpath>
</template>
<template id="header_shadow" inherit_id="website.layout" name="Header Shadow" active="False">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="shadow" separator=" "/>