From 92c8645d62a4fb73fc0af1ce832e88e293b2a6d7 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 25 Sep 2018 17:44:48 +0200
Subject: [PATCH] [IMP] website: allow selecting navbar's font

Same as it was done before for buttons, this commit adds an option in
the theme customize dialog to allow selecting the font for the navbar
elements.

Needed for themes migration.
---
 .../option_font_navbar_02_variables.scss      |  1 +
 .../option_font_navbar_03_variables.scss      |  1 +
 .../option_font_navbar_04_variables.scss      |  1 +
 .../option_font_navbar_05_variables.scss      |  1 +
 .../option_font_navbar_06_variables.scss      |  1 +
 .../static/src/scss/primary_variables.scss    |  1 +
 addons/website/static/src/scss/website.scss   | 51 +++++++++++--------
 addons/website/views/website_templates.xml    | 35 +++++++++++++
 8 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
 create mode 100644 addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss

diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
new file mode 100644
index 00000000000..45d8014b8eb
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 2;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
new file mode 100644
index 00000000000..c46c2de1180
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 3;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
new file mode 100644
index 00000000000..69662acc773
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 4;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
new file mode 100644
index 00000000000..c96837086b5
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 5;
diff --git a/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
new file mode 100644
index 00000000000..49ef9f8167c
--- /dev/null
+++ b/addons/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss
@@ -0,0 +1 @@
+$o-theme-navbar-font-number: 6;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 86c42c2bab1..fb8059b6382 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -61,3 +61,4 @@ $o-theme-font-names: (
 $o-theme-font-number: 1 !default;
 $o-theme-headings-font-number: 1 !default;
 $o-theme-buttons-font-number: 1 !default;
+$o-theme-navbar-font-number: 1 !default;
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index fba54ae9a91..4322adabcad 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -2,20 +2,20 @@
 /// This file regroups the website design rules.
 ///
 
-$-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
-@if $-theme-font {
-    @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
-}
-@if $o-theme-headings-font-number != $o-theme-font-number {
-    $-theme-font: nth($o-theme-font-urls, $o-theme-headings-font-number);
-    @if $-theme-font {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
-    }
-}
-@if $o-theme-buttons-font-number != $o-theme-font-number and $o-theme-buttons-font-number != $o-theme-headings-font-number {
-    $-theme-font: nth($o-theme-font-urls, $o-theme-buttons-font-number);
-    @if $-theme-font {
-        @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+$-seen: ();
+$-font-numbers: (
+    $o-theme-font-number,
+    $o-theme-headings-font-number,
+    $o-theme-buttons-font-number,
+    $o-theme-navbar-font-number
+);
+@each $-number in $-font-numbers {
+    @if index($-seen, $-number) == null {
+        $-seen: append($-seen, $-number);
+        $-theme-font: nth($o-theme-font-urls, $-number);
+        @if $-theme-font {
+            @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}");
+        }
     }
 }
 
@@ -32,14 +32,9 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
     }
 }
 
-.navbar-light {
-    // Style only navbar-light which Odoo is only supposed to use in standard
-    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
-    // Note: this only works because navbar-light is defined before navbar-dark,
-    // we may want to use a safest way when possible.
-    background-color: color('menu') !important;
-    @if (color-yiq(color('menu')) != $yiq-text-dark) {
-        @extend .navbar-dark;
+.navbar {
+    @if ($o-theme-navbar-font-number != $o-theme-font-number) {
+        font-family: nth($o-theme-fonts, $o-theme-navbar-font-number);
     }
 
     .nav-item {
@@ -51,6 +46,18 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
         opacity: 0 !important;
     }
 }
+
+.navbar-light {
+    // Style only navbar-light which Odoo is only supposed to use in standard
+    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
+    // Note: this only works because navbar-light is defined before navbar-dark,
+    // we may want to use a safest way when possible.
+    background-color: color('menu') !important;
+    @if (color-yiq(color('menu')) != $yiq-text-dark) {
+        @extend .navbar-dark;
+    }
+}
+
 .o_footer {
     @include o-bg-color(color('footer'));
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index d0c203e1117..07263647023 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -508,6 +508,14 @@
                 <opt data-xmlid="website.option_font_button_05_variables" data-font="5"/>
                 <opt data-xmlid="website.option_font_button_06_variables" data-font="6"/>
             </list>
+            <list id="theme_customize_content_fonts_navbar" string="Navbar">
+                <opt data-xmlid="" data-font="1"/>
+                <opt data-xmlid="website.option_font_navbar_02_variables" data-font="2"/>
+                <opt data-xmlid="website.option_font_navbar_03_variables" data-font="3"/>
+                <opt data-xmlid="website.option_font_navbar_04_variables" data-font="4"/>
+                <opt data-xmlid="website.option_font_navbar_05_variables" data-font="5"/>
+                <opt data-xmlid="website.option_font_navbar_06_variables" data-font="6"/>
+            </list>
         </content>
     </div>
 </template>
@@ -616,6 +624,33 @@
     </xpath>
 </template>
 
+<!-- Navbar font options -->
+<template id="option_font_navbar_02_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_02_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_03_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_03_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_04_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_04_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_05_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_05_variables.scss"/>
+    </xpath>
+</template>
+<template id="option_font_navbar_06_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/fonts/option_font_navbar_06_variables.scss"/>
+    </xpath>
+</template>
+
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>