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

[IMP] website, *: add off-canvas and other hamburger menu options

Browse Source 
*: web, portal

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

X-original-commit: 89bf0d4170f42b40cd46915c7d0160c4818f3b8f
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
stefanorigano (SRI)
2020-08-28 08:19:35 +00:00
committed by Xavier-Do
co-authored by qsm-odoo
parent d20e29f905
commit a65407b9c3
14 changed files with 274 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/portal/static/src/scss/bootstrap_overridden.scss
Vendored
+5
View File
@@ -23,6 +23,11 @@ $font-size-sm: (12 / 16) * 1rem !default;
$btn-padding-y-sm: (1 / 16) * 1rem !default;
$btn-padding-x-sm: (5 / 16) * 1rem !default;
// Navbar
$navbar-dark-toggler-border-color: transparent;
$navbar-light-toggler-border-color: transparent;
// Modals
$modal-lg: $o-modal-lg;
addons/portal/views/portal_templates.xml
+1 -1
View File
@@ -7,7 +7,7 @@
</xpath>
<xpath expr="//div[@id='wrapwrap']/header/img" position="replace">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<div id="top_menu_container" class="container">
<a href="/" class="navbar-brand logo">
<img t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
</a>
addons/web/static/src/scss/bootstrap_review.scss
Vendored
+14
View File
@@ -157,3 +157,17 @@ $o-btn-outline-defaults: () !default;
}
}
}
// Compensate navbar brand padding if no visible border
@if alpha($navbar-dark-toggler-border-color) < 0.001 {
.navbar-dark .navbar-toggler {
padding-left: 0;
padding-right: 0;
}
}
@if alpha($navbar-light-toggler-border-color) < 0.001 {
.navbar-light .navbar-toggler {
padding-left: 0;
padding-right: 0;
}
}
addons/website/models/theme_models.py
+2 -2
View File
@@ -184,8 +184,8 @@ class Theme(models.AbstractModel):
# Reinitialize header templates
self.disable_view('website.template_header_hamburger')
self.disable_view('website.template_header_hamburger_left')
self.disable_view('website.template_header_navbar_text_center')
self.disable_view('website.template_header_vertical')
self.disable_view('website.option_header_hamburger_center_logo')
# Reinitialize footer templates
self.enable_view('website.footer_custom')
addons/website/static/src/img/snippets_options/header_template_default.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

addons/website/static/src/img/snippets_options/header_template_hamburger.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

addons/website/static/src/img/snippets_options/header_template_vertical.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

addons/website/static/src/js/content/menu.js
+1 -1
View File
@@ -403,7 +403,7 @@ publicWidget.registry.autohideMenu = publicWidget.Widget.extend({
this.$topMenu = this.$('#top_menu');
this.noAutohide = this.$el.is('.o_no_autohide_menu');
if (!this.noAutohide) {
await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu'));
await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu, .o_offcanvas_logo_container'));
// The previous code will make sure we wait for images to be fully
// loaded before initializing the auto more menu. But in some cases,
addons/website/static/src/js/editor/snippets.options.js
+8
View File
@@ -1767,6 +1767,14 @@ options.registry.collapse = options.Class.extend({
});
options.registry.Header = options.Class.extend({
/**
* @override
*/
async updateUI() {
await this._super(...arguments);
const isHamburger = this.$('.navbar-toggler').is(':visible');
this.$el.find('#hamburger_opt_label').toggleClass('d-none', isHamburger);
},
//--------------------------------------------------------------------------
// Private
addons/website/static/src/scss/primary_variables.scss
+3 -1
View File
@@ -260,9 +260,11 @@ $o-base-website-values-palette: (
'navbar-font': null,
'buttons-font': null,
'header-template': 'logo_menu',
'header-template': 'default', // 'default' / 'hamburger' / 'vertical'
'header-font-size': null, // Default to BS (normal font-size)
'logo-height': null, // Default to navbar height (see portal)
'hamburger-type': 'default', // 'default' / 'off-canvas'
'hamburger-position': 'right', // 'right' / 'left' / 'center'
'footer-template': 'products_contacts_about_us',
'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
addons/website/static/src/scss/website.edit_mode.scss
+10
View File
@@ -171,3 +171,13 @@ body.editor_enable.editor_has_snippets {
top: var(--o-we-toolbar-height) !important;
}
}
.editor_enable {
@if o-website-value('hamburger-type') == 'off-canvas' {
#top_menu_collapse {
&.collapsing, &.show {
left: $o-we-sidebar-width;
}
}
}
}
addons/website/static/src/scss/website.scss
+139 -62
View File
@@ -691,14 +691,6 @@ $-transition-duration: 200ms;
transition: transform $-transition-duration;
}
.navbar-collapse {
@if o-website-value('header-template') != 'logo_hamburger' {
max-height: 70vh;
}
&.show {
overflow-y: auto;
}
}
&.o_header_is_scrolled {
.navbar-brand {
font-size: $o-theme-navbar-fixed-logo-height / $line-height-base;
@@ -707,11 +699,12 @@ $-transition-duration: 200ms;
height: $o-theme-navbar-fixed-logo-height;
}
}
@include media-breakpoint-up(md) {
@if (index(('menu_logo_below', 'logo_menu_below'), o-website-value('header-template'))) != null {
@if o-website-value('header-template') == 'vertical' {
@include media-breakpoint-up(md) {
.navbar-brand {
font-size: 0px;
opacity: 0;
img {
height: 0px;
}
@@ -761,15 +754,22 @@ $-transition-duration: 200ms;
}
}
// Header templates
$-off-canvas-hamburger: o-website-value('hamburger-type') == 'off-canvas';
$-hamburger-left: o-website-value('hamburger-position') == 'left';
$-hamburger-center: o-website-value('hamburger-position') == 'center';
$-hamburger-right: o-website-value('hamburger-position') == 'right';
header {
&#top {
// We need this z-index for the shadow option of the header
z-index: $zindex-modal - 20;
}
&:not(.o_header_no_transition) {
#top_menu_container {
transition: all $-transition-duration;
}
.navbar-brand {
transition: font-size $-transition-duration, opacity $-transition-duration ease-out;
transition: margin $-transition-duration, font-size $-transition-duration, opacity $-transition-duration ease-out;
img {
transition: height $-transition-duration;
@@ -777,72 +777,149 @@ header {
}
}
&:not(.o_header_is_scrolled) {
$-is-hamburger: o-website-value('header-template') == 'hamburger';
$-is-vertical: o-website-value('header-template') == 'vertical';
@include media-breakpoint-up(md) {
@if $-is-hamburger or $-is-vertical {
#top_menu_container {
padding-top: $spacer * 0.5;
padding-bottom: $spacer * 0.5;
}
}
@if $-is-vertical {
.navbar-brand {
margin-bottom: $spacer;
}
}
}
}
.navbar {
flex-direction: if($-hamburger-left, row-reverse, row);
}
#top_menu_container {
flex-direction: inherit;
}
@if $-hamburger-right {
.navbar-brand {
margin-right: 0;
margin-left: $navbar-padding-x;
}
} @else if $-hamburger-center {
.collapsing, .show {
#top_menu {
@if not $-off-canvas-hamburger {
padding-top: 15vh;
padding-bottom: 15vh;
}
text-align: center;
}
}
}
@include media-breakpoint-up(md) {
// Allow to center the logo, ignoring the toggler space
.o_navbar_toggler_container {
flex: 0 0 0;
min-width: 0;
direction: if($-hamburger-left, ltr, rtl);
}
}
@if index(('hamburger_logo', 'logo_hamburger'), o-website-value('header-template')) {
.navbar-brand {
text-align: center;
}
.navbar-brand, .logo img {
margin: auto;
}
.navbar-nav {
margin-top: $spacer / 2;
}
@if o-website-value('header-template') == 'logo_hamburger' {
.o_navbar_toggler_container {
direction: rtl;
}
&:not(.o_header_is_scrolled) .container {
padding-top: $spacer;
padding-bottom: $spacer;
}
.container {
transition: padding 200ms;
}
#top_menu.navbar-nav {
height: 90vh;
padding-top : 10vh;
@if $-off-canvas-hamburger {
#top_menu_collapse {
flex-direction: if($-hamburger-left, row, row-reverse);
&.collapsing, &.show {
@include o-position-absolute(0, 0, 0, 0);
position: fixed;
display: flex;
align-items: stretch;
z-index: $zindex-sticky;
transition: none;
transform: none;
.o_offcanvas_menu_backdrop {
@include o-position-absolute(0, 0, 0, 0);
opacity: .2;
cursor: pointer;
}
#top_menu {
overflow: auto;
flex-wrap: nowrap;
@if $-hamburger-center {
width: 100%;
max-width: none;
} @else {
max-width: 560px;
}
background-color: o-color('menu');
transition: transform $-transition-duration cubic-bezier(.694, .0482, .335, 1);
@if $-hamburger-center {
.o_offcanvas_menu_backdrop {
display: none;
}
.o_offcanvas_menu_toggler {
max-width: 90%;
}
}
.nav-item, .o_offcanvas_logo {
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
}
.nav-item, .dropdown-menu {
text-align: inherit;
}
// Open all dropdowns
.dropdown-toggle {
padding-bottom: $nav-link-padding-y*0.5;
&:after {
content: none;
}
}
.dropdown-menu {
text-align: center;
display: block;
padding-top:0;
border: 0;
background: inherit;
color: inherit;
}
.dropdown-item {
padding-left: .5em;
padding-right: .5em;
}
}
}
} @else if index(('logo_menu_below', 'menu_logo_below'), o-website-value('header-template')) {
.navbar-brand {
text-align: center;
}
.navbar-expand-md {
> .container {
flex-wrap: wrap;
}
.navbar-collapse {
flex-basis: 100%;
.o_connected_user header:not(.o_header_is_scrolled) &,
.o_connected_user header.o_header_affixed & {
padding-top: $o-navbar-height;
}
}
.navbar-brand, #top_menu.navbar-nav, .logo img {
margin: auto;
}
.navbar-brand {
@include media-breakpoint-up(md) {
@if o-website-value('header-template') == 'menu_logo_below' {
margin-top: $navbar-padding-y;
} @else {
margin-bottom: $navbar-padding-y;
}
&.collapsing #top_menu {
@if o-website-value('hamburger-position') == 'center' {
transform: translateY(-100%);
} @else if o-website-value('hamburger-position') == 'left' {
transform: translateX(-100%);
} @else if o-website-value('hamburger-position') == 'right' {
transform: translateX(100%);
}
}
@if o-website-value('header-template') == 'menu_logo_below' {
.navbar-collapse {
@include media-breakpoint-up(md) {
order: -1;
}
&.show #top_menu {
transform: translate(0);
}
.o_offcanvas_menu_backdrop {
@if $-hamburger-left {
background-image: linear-gradient(90deg, currentColor 20%, transparent);
} @else {
background-image: linear-gradient(-90deg, currentColor 20%, transparent);
}
}
}
addons/website/views/snippets/snippets.xml
+46 -29
View File
@@ -516,7 +516,7 @@
<div data-js="menu_data"
data-selector="#top_menu li > a"
data-exclude=".dropdown-toggle, li.o_header_menu_button a"
data-exclude=".dropdown-toggle, li.o_header_menu_button a, [data-toggle], .o_offcanvas_logo"
data-no-check="true"/>
<div data-js="company_data"
@@ -558,36 +558,52 @@
<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 id="header_templates_select" data-variable="header-template" string="Template" data-reload="/">
<we-button id="option_template_header_logo_menu"
<we-select string="Template" data-variable="header-template" data-reload="/">
<we-button title="Default"
data-name="header_logo_menu_opt"
data-customize-website-views=""
data-customize-website-variable="'logo_menu'"
string="Logo - Menu"/>
<we-button id="option_template_header_hamburger_logo_centered"
data-name="header_hamburger_logo_centered_opt"
data-customize-website-views="website.template_header_hamburger, website.template_header_hamburger_left"
data-customize-website-variable="'hamburger_logo'"
string="Hamburger - Logo"/>
<we-button id="option_template_header_logo_menu_below"
data-name="header_logo_menu_below_opt"
data-customize-website-views=""
data-customize-website-variable="'logo_menu_below'"
string="Logo (Top) - Menu"/>
<we-button id="option_template_header_menu_logo_below"
data-name="header_menu_logo_below_opt"
data-customize-website-views=""
data-customize-website-variable="'menu_logo_below'"
string="Menu - Logo (Bottom)"/>
<we-button id="option_template_header_logo_hamburger"
data-name="header_logo_hamburger_opt"
data-customize-website-views="website.template_header_hamburger, website.template_header_navbar_text_center"
data-customize-website-variable="'logo_hamburger'"
string="Logo - Hamburger (cover)"/>
data-customize-website-variable="'default'"
data-img="/website/static/src/img/snippets_options/header_template_default.png"/>
<we-button title="Hamburger menu"
data-name="header_hamburger_opt"
data-customize-website-views="website.template_header_hamburger"
data-customize-website-variable="'hamburger'"
data-img="/website/static/src/img/snippets_options/header_template_hamburger.png"/>
<we-button title="Vertical"
data-name="header_vertical_opt"
data-customize-website-views="website.template_header_vertical"
data-customize-website-variable="'vertical'"
data-img="/website/static/src/img/snippets_options/header_template_vertical.png"/>
</we-select>
<we-select id="header_effect_list" string="Effect">
<we-button id="option_header_effect_standard"
data-name="header_effect_standard_opt"
<we-title id="hamburger_opt_label">Hamburger (Mobile)</we-title>
<we-select string="⌙ Type" 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">Off-Canvas</we-button>
</we-select>
<we-select string="⌙ Position" data-variable="hamburger-position" data-reload="/">
<we-button data-customize-website-variable="'right'">Right</we-button>
<we-button data-customize-website-variable="'left'">Left</we-button>
<we-button data-customize-website-variable="'center'">Center / Full</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-checkbox string="Center Main Logo"
data-dependencies="header_hamburger_opt"
data-apply-to=".navbar-brand"
data-customize-website-views="website.option_header_hamburger_center_logo"
data-select-class="mx-md-auto"
data-no-preview="true"/>
<we-select id="header_visibilities_list" string="Header Visibility">
<we-button id="option_header_visibility_standard"
data-name="header_visibility_standard_opt"
data-select-class="o_header_standard"
data-customize-website-views="website.header_visibility_standard"
string="Standard"/>
@@ -612,7 +628,8 @@
data-customize-website-views="website.header_visibility_fade_out"
string="Fade Out"/>
</we-select>
<we-select id="option_header_dropdown" string="Sub Menus" data-no-preview="true">
<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>
<we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
addons/website/views/website_templates.xml
+45 -15
View File
@@ -128,8 +128,11 @@
<!-- Background now controlled by css configuration, using color combinations -->
<attribute name="class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
</xpath>
<xpath expr="//header//div[@id='top_menu_collapse']" position="attributes">
<attribute name="class" separator=" " add="flex-grow-0"/>
</xpath>
<xpath expr="//header//ul[@id='top_menu']" position="attributes">
<attribute name="class" separator=" " add="o_menu_loading"/>
<attribute name="class" separator=" " add="o_menu_loading" remove="text-right ml-auto"/>
</xpath>
<xpath expr="//header//ul[@id='top_menu']/li[hasclass('divider')]" position="attributes">
<attribute name="t-if">website.user_id != user_id</attribute>
@@ -222,30 +225,51 @@
</template>
<!-- Header templates -->
<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Logo Hamburger" active="False">
<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
<xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
<attribute name="class" remove="navbar-expand-md" separator=" "/>
</xpath>
<xpath expr="//header//button[hasclass('navbar-toggler')]" position="replace">
<div class="o_navbar_toggler_container">$0</div>
</xpath>
</template>
<template id="template_header_navbar_text_center" inherit_id="website.layout" name="Template Header Navbar Text Center" active="False">
<xpath expr="//header//ul[hasclass('nav')]" position="attributes">
<attribute name="class" remove="text-right" add="text-center" separator=" "/>
<xpath expr="//header//ul[@id='top_menu']" position="attributes">
<attribute name="class" separator=" " remove="text-right"/>
</xpath>
</template>
<template id="template_header_hamburger_left" inherit_id="website.layout" name="Template Header Hamburger" active="False">
<xpath expr="//header//a[hasclass('navbar-brand')]" position="before">
<div class="o_navbar_toggler_container o_not_editable"></div>
<template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
<xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
<attribute name="class" add="flex-md-column" separator=" "/>
</xpath>
<xpath expr="//div[hasclass('o_navbar_toggler_container')]" position="inside">
<xpath expr="//header//button[hasclass('navbar-toggler')]" position="move"/>
</template>
<!-- Navbar Hamburger Options -->
<template id="option_header_off_canvas" inherit_id="website.layout" name="Off-Canvas Header" active="False">
<xpath expr="//header//ul[@id='top_menu']" position="attributes">
<attribute name="class" separator=" " add="position-relative"/>
</xpath>
<xpath expr="//header//ul[hasclass('nav')]" position="attributes">
<attribute name="class" remove="text-right" add="text-left" separator=" "/>
<xpath expr="//header//ul[@id='top_menu']" position="before">
<div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
</xpath>
<xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="before">
<li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0">
<a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
<span class="fa-2x">&#215;</span>
</a>
</li>
</xpath>
<xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="after">
<li class="o_offcanvas_logo_container order-last navbar-toggler py-4 order-1 mt-auto text-center border-0">
<a href="/" class="o_offcanvas_logo text-center">My Website</a>
</li>
</xpath>
</template>
<template id="option_header_off_canvas_logo_show" inherit_id="website.option_header_off_canvas" name="Show Logo (Off-Canvas)">
<xpath expr="//header//a[hasclass('o_offcanvas_logo')]" position="replace">
<a href="/" class="o_offcanvas_logo logo">
<span t-field="website.logo" t-options="{'widget': 'image', 'style': 'max-width: 200px'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name" />
</a>
</xpath>
</template>
@@ -256,6 +280,12 @@
</xpath>
</template>
<template id="option_header_hamburger_center_logo" inherit_id="website.template_header_hamburger" name="Template Header Hamburger Center Logo" active="False">
<xpath expr="//header//a[hasclass('navbar-brand')]" position="attributes">
<attribute name="class" separator=" " add="mx-md-auto"/>
</xpath>
</template>
<template id="layout_logo_show" inherit_id="website.layout" name="Show Logo">
<xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
<a href="/" class="navbar-brand logo">
@@ -270,7 +300,7 @@
</xpath>
</template>
<template id="header_visibility_standard" inherit_id="website.layout" name="Header Effect Standard">
<template id="header_visibility_standard" inherit_id="website.layout" name="Header Visibility Standard">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="o_header_standard" separator=" "/>
</xpath>