[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:
committed by
qsm-odoo
co-authored by
qsm-odoo
parent
38444561a1
commit
cb20435069
@@ -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) -->
|
||||
|
||||
@@ -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: (
|
||||
(),
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user