From cb20435069717ec11a515d9ea64d280a2ac6d564 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 17 Oct 2019 12:20:39 +0000
Subject: [PATCH] [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>
---
 addons/portal/views/portal_templates.xml      |  2 +-
 addons/website/models/theme_models.py         |  8 ++-
 .../static/src/scss/primary_variables.scss    |  1 +
 addons/website/static/src/scss/website.scss   | 69 ++++++++++++++++++-
 addons/website/views/snippets/snippets.xml    | 27 ++++++++
 addons/website/views/website_templates.xml    | 29 ++++++++
 6 files changed, 133 insertions(+), 3 deletions(-)

diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index a784e1def09..dfef009723f 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -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) -->
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 7a6191e926d..72e21222e16 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -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):
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index e7e6bb7d081..7bf12649c90 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -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: (
     (),
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index f9001d56c6c..788958e51ff 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -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%;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 0b44c55c297..1f84556e1f1 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -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"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index fea1e95334a..d7b2063ebd0 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -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">