[IMP] website, *: add templates for header

*: portal

Part of https://github.com/odoo/odoo/pull/38950
task-2087641

Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2020-03-31 18:16:08 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent 38444561a1
commit cb20435069
6 changed files with 133 additions and 3 deletions
+1 -1
View File
@@ -12,7 +12,7 @@
<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>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top_menu_collapse">
<span class="navbar-toggler-icon"/>
<span class="navbar-toggler-icon o_not_editable"/>
</button>
<div class="collapse navbar-collapse" id="top_menu_collapse">
<!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
+7 -1
View File
@@ -153,7 +153,7 @@ class Theme(models.AbstractModel):
_auto = False
def _post_copy(self, mod):
# Reinitialize font customizations
# Reinitialize some css customizations
self.env['web_editor.assets'].make_scss_customization(
'/website/static/src/scss/options/user_values.scss',
{
@@ -161,9 +161,15 @@ class Theme(models.AbstractModel):
'headings-font-number': 'null',
'navbar-font-number': 'null',
'buttons-font-number': 'null',
'header-template': 'null',
}
)
# 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')
# Call specific theme post copy
theme_post_copy = '_%s_post_copy' % mod.name
if hasattr(self, theme_post_copy):
@@ -52,6 +52,7 @@ $o-base-website-values-palette: (
'navbar-font-number': 1,
'buttons-font-number': 1,
'google-fonts': null,
'header-template': 'logo_menu',
);
$o-website-values-palettes: (
(),
+68 -1
View File
@@ -654,7 +654,9 @@ table.table_desc tr td {
transition: margin-top 500ms ease 0s;
@include media-breakpoint-down(sm) {
.navbar-collapse {
max-height: 70vh;
@if o-website-value('header-template') != 'logo_hamburger' {
max-height: 70vh;
}
overflow-y: auto;
}
}
@@ -690,6 +692,71 @@ table.table_desc tr td {
}
}
// Header templates
header {
@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;
}
}
@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;
}
.container {
padding-top: $spacer;
padding-bottom: $spacer;
#top_menu.navbar-nav {
height: 90vh;
padding-top : 10vh;
}
}
}
} @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%;
}
}
.navbar-brand, #top_menu.navbar-nav, .logo img {
margin: auto;
}
.navbar-brand {
@if o-website-value('header-template') == 'menu_logo_below' {
margin-top: $navbar-padding-y;
} @else {
margin-bottom: $navbar-padding-y;
}
}
@if o-website-value('header-template') == 'menu_logo_below' {
.navbar-collapse {
@include media-breakpoint-up(md) {
order: -1;
}
}
}
}
}
// Mega menu
.o_mega_menu {
width: 100%;
@@ -400,6 +400,33 @@
<we-fontfamilypicker data-variable="navbar-font-number"/>
<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="Header Template" data-reload="/">
<we-button id="option_template_header_logo_menu"
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)"/>
</we-select>
</div>
<div data-js="topMenuTransparency"
@@ -207,6 +207,35 @@
</xpath>
</template>
<!-- Navbar templates -->
<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Logo 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>
</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>
</xpath>
<xpath expr="//div[hasclass('o_navbar_toggler_container')]" position="inside">
<xpath expr="//header//button[hasclass('navbar-toggler')]" position="move"/>
</xpath>
<xpath expr="//header//ul[hasclass('nav')]" position="attributes">
<attribute name="class" remove="text-right" add="text-left" separator=" "/>
</xpath>
</template>
<!-- Navbar options -->
<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">