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

[IMP] website, *: add 'hamburger full' header template

Browse Source 
*: website_sale, website_sale_wishlist

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

X-original-commit: 0b265a6564133b40e1b3090f736a0af24900188a
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Cocographique
2020-08-28 08:19:42 +00:00
committed by Xavier-Do
co-authored by qsm-odoo
parent 0ca58f6e92
commit b607744d8e
7 changed files with 193 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/models/theme_models.py
+1
View File
@@ -193,6 +193,7 @@ class Theme(models.AbstractModel):
self.disable_view('website.template_header_boxed')
self.disable_view('website.template_header_centered_logo')
self.disable_view('website.template_header_image')
self.disable_view('website.template_header_hamburger_full')
# Reinitialize footer templates
self.enable_view('website.footer_custom')
addons/website/static/src/js/content/snippets.animation.js
+19
View File
@@ -978,6 +978,25 @@ registry.FooterSlideout = publicWidget.Widget.extend({
},
});
registry.HeaderHamburgerFull = publicWidget.Widget.extend({
selector: 'header:has(.o_header_hamburger_full_toggler):not(:has(.o_offcanvas_menu_toggler))',
events: {
'click .o_header_hamburger_full_toggler': '_onToggleClick',
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
*/
_onToggleClick() {
document.body.classList.add('overflow-hidden');
setTimeout(() => $(window).trigger('scroll'), 100);
},
});
return {
Widget: publicWidget.Widget,
Animation: Animation,
addons/website/static/src/scss/website.scss
+71 -5
View File
@@ -823,17 +823,28 @@ header {
@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_header_collapsed_content_wrapper {
// TODO improve: ugly code to reset a potential wrapper
display: flex !important;
flex-flow: if($-hamburger-left, row, row-reverse) nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
> .o_header_collapsed_content_wrapper {
// TODO improve: ugly code to reset a potential wrapper
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.o_offcanvas_menu_backdrop {
@include o-position-absolute(0, 0, 0, 0);
opacity: .2;
@@ -843,12 +854,13 @@ header {
#top_menu {
flex: 0 0 auto !important;
overflow: auto;
flex-wrap: nowrap;
flex-flow: column nowrap !important;
@if $-hamburger-center {
width: 100%;
max-width: none;
} @else {
max-width: 560px;
text-align: left !important;
}
min-width: 250px;
margin: 0 !important;
@@ -871,6 +883,13 @@ header {
.nav-item, .dropdown-menu {
text-align: inherit;
}
.nav-item, .nav-link {
margin: 0 !important;
}
.navbar-toggler {
display: block !important;
}
// Open all dropdowns
.dropdown-toggle {
@@ -895,7 +914,7 @@ header {
.o_connected_user header:not(.o_header_is_scrolled) &,
.o_connected_user header.o_header_affixed & {
padding-top: $o-navbar-height;
padding-top: $o-navbar-height !important;
}
}
&.collapsing #top_menu {
@@ -997,6 +1016,53 @@ header {
width: 50%;
}
}
} @else if o-website-value('header-template') == 'hamburger-full' {
@if not $-off-canvas-hamburger {
@include media-breakpoint-up(md) {
#wrapwrap {
$o-hamburger-full-navbar-height: $o-theme-navbar-logo-height + ($navbar-padding-y * 2);
> header {
.navbar-collapse {
> .container {
height: calc(100vh - #{$o-navbar-height} - #{$o-hamburger-full-navbar-height});
transition: height .3s ease;
}
.nav-link {
padding-right: $nav-link-padding-x;
padding-left: $nav-link-padding-x;
}
.dropdown-menu {
position: absolute;
}
}
&:not(.o_header_affixed) {
position: sticky;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: $zindex-fixed;
}
&.o_header_affixed {
transform: none !important;
}
}
> main {
> :first-child:not(#wrap), #wrap > :first-child {
&::before {
content: "";
display: block;
width: 100%;
margin-top: $o-hamburger-full-navbar-height;
}
}
}
}
#oe_main_menu_navbar ~ #wrapwrap > header {
top: $o-navbar-height;
}
}
}
}
// Mega menu
addons/website/views/snippets/snippets.xml
+4 -1
View File
@@ -602,6 +602,9 @@
<we-button data-name="header_image_opt"
data-customize-website-views="website.template_header_image"
data-customize-website-variable="'image'">Image</we-button>
<we-button data-name="header_hamburger_full_opt"
data-customize-website-views="website.template_header_hamburger_full"
data-customize-website-variable="'hamburger-full'">Hamburger Full</we-button>
</we-select>
<!-- Header Sidebar Template - Options -->
@@ -633,7 +636,7 @@
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, website.option_header_off_canvas_template_header_hamburger, website.option_header_off_canvas_template_header_sidebar">Off-Canvas</we-button>
data-customize-website-views="website.option_header_off_canvas, website.option_header_off_canvas_template_header_hamburger, website.option_header_off_canvas_template_header_sidebar, website.option_header_off_canvas_template_header_hamburger_full">Off-Canvas</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>
addons/website/views/website_templates.xml
+78 -1
View File
@@ -1004,6 +1004,80 @@
</xpath>
</template>
<template id="template_header_hamburger_full" inherit_id="website.layout" name="Template Header Hambuger Full" active="False">
<xpath expr="//header//nav" position="replace">
<nav class="navbar navbar-light o_colored_level o_cc">
<div id="top_menu_container" class="container">
<!-- Brand -->
<t t-call="website.placeholder_header_brand"/>
<!-- Navbar Toggler -->
<t t-call="website.navbar_toggler">
<t t-set="_toggler_class" t-value="'o_header_hamburger_full_toggler ml-auto'"/>
</t>
</div>
<!-- Navbar Collapse -->
<div id="top_menu_collapse" class="collapse navbar-collapse">
<div class="o_header_collapsed_content_wrapper container d-flex flex-column align-items-lg-center justify-content-lg-center">
<!-- Menu -->
<t t-call="website.navbar_nav">
<t t-set="_nav_class" t-value="'navbar-expand flex-column flex-lg-row text-center'"/>
<t t-foreach="website.menu_id.child_id" t-as="submenu">
<t t-call="website.submenu">
<t t-set="item_class" t-value="'nav-item'"/>
<t t-set="link_class" t-value="'nav-link'"/>
</t>
</t>
<!-- Sign In -->
<t t-call="portal.placeholder_user_sign_in">
<t t-set="_item_class" t-value="'nav-item'"/>
<t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
</t>
<!-- User Dropdown -->
<t t-call="portal.user_dropdown">
<t t-set="_user_name" t-value="true"/>
<t t-set="_item_class" t-value="'nav-item dropdown'"/>
<t t-set="_link_class" t-value="'nav-link font-weight-bold ml-lg-3'"/>
</t>
</t>
<!-- Social Icons -->
<div class="oe_structure w-100" id="oe_structure_header_hamburger_full_1"/>
</div>
</div>
</nav>
</xpath>
</template>
<template id="template_header_hamburger_full_oe_structure_header_hamburger_full_1" inherit_id="website.template_header_hamburger_full" name="Template Header Hamburger Full (oe_structure_header_hamburger_full_1)">
<xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_full_1']" position="replace">
<div class="oe_structure w-100" id="oe_structure_header_hamburger_full_1">
<div class="s_hr pt32 pb32" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--400);"/>
</div>
<div class="s_share text-center" data-name="Social Media">
<h4 class="s_share_title d-none">Follow us</h4>
<a href="/website/social/facebook" class="s_share_facebook" target="_blank">
<i class="fa fa-1x fa-fw fa-facebook rounded-circle shadow-sm"/>
</a>
<a href="/website/social/twitter" class="s_share_twitter" target="_blank">
<i class="fa fa-1x fa-fw fa-twitter rounded-circle shadow-sm"/>
</a>
<a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
<i class="fa fa-1x fa-fw fa-linkedin rounded-circle shadow-sm"/>
</a>
<a href="/website/social/github" class="s_share_github" target="_blank">
<i class="fa fa-1x fa-fw fa-github rounded-circle shadow-sm"/>
</a>
<a href="/website/social/youtube" class="s_share_youtube" target="_blank">
<i class="fa fa-1x fa-fw fa-youtube rounded-circle shadow-sm"/>
</a>
<a href="/website/social/instagram" class="s_share_instagram" target="_blank">
<i class="fa fa-1x fa-fw fa-instagram rounded-circle shadow-sm"/>
</a>
</div>
</div>
</xpath>
</template>
<!-- Navbar Hamburger Options -->
<template id="option_header_off_canvas" inherit_id="website.navbar_nav" name="Off-Canvas Header" active="False">
<xpath expr="//ul[@id='top_menu']" position="attributes">
@@ -1039,13 +1113,16 @@
<xpath expr="//div[@id='oe_structure_header_hamburger_3']" position="replace"/>
</template>
<template id="option_header_off_canvas_template_header_sidebar" inherit_id="website.template_header_sidebar" active="False" priority="32">
<xpath expr="//div[@id='oe_structure_header_sidebar_1']" position="attributes">
<attribute name="class" add="d-none d-lg-block" separator=" "/>
</xpath>
</template>
<template id="option_header_off_canvas_template_header_hamburger_full" inherit_id="website.template_header_hamburger_full" active="False" priority="32">
<xpath expr="//div[@id='oe_structure_header_hamburger_full_1']" position="replace"/>
</template>
<!-- Header options -->
<template id="option_layout_hide_header" inherit_id="website.layout" active="False">
<xpath expr="//header" position="before">
addons/website_sale/views/templates.xml
+10
View File
@@ -193,6 +193,16 @@
</xpath>
</template>
<template id="template_header_hamburger_full" inherit_id="website.template_header_hamburger_full">
<xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
<t t-call="website_sale.header_cart_link">
<t t-set="_icon" t-value="True"/>
<t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
<t t-set="_link_class" t-value="'nav-link'"/>
</t>
</xpath>
</template>
<!-- Products Search Bar input-group template -->
<template id="website_sale_products_search_box" inherit_id="website.website_search_box" primary="True">
<xpath expr="//input[@name='search']" position="attributes">
addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+10
View File
@@ -152,6 +152,16 @@
</xpath>
</template>
<template id="template_header_hamburger_full" inherit_id="website_sale.template_header_hamburger_full">
<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="'nav-item ml-lg-2'"/>
<t t-set="_link_class" t-value="'nav-link'"/>
</t>
</xpath>
</template>
<template id="product_wishlist" name="Wishlist Page">
<t t-call="website.layout">
<t t-set="additional_title">Shop Wishlist</t>