From 682ab7b1ecee8fd1d59405a891f70a29a149f79b Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 22 Aug 2017 18:09:32 +0200
Subject: [PATCH] WIP #1597 @2

---
 js/libs/fluidbook/fluidbook.nav.js | 30 ++++++++++++++++++++++++------
 style/fluidbook.less               | 11 ++++++++---
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 35e5e07d..7f7d90b7 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -326,7 +326,7 @@ FluidbookNav.prototype = {
                 link = this.addLink(navType, 'interface-print', '#', 'print', 'print', 'print');
 
             } else if (icon == 'lang' && this.fluidbook.l10n.multilangEnabled) {
-                link = this.addMultilangLink();
+                link = this.addMultilangLink(navType);
 
             } else if (icon == 'archives') {
                 if (this.fluidbook.datas.archivesLink != '') {
@@ -495,17 +495,35 @@ FluidbookNav.prototype = {
 
     },
 
-    addMultilangLink: function (langs) {
-        var l = '<a id="localesContainer" help="!Select language" href="#/locales"><span id="locales"></span></a>';
+    addMultilangLink: function (navType) {
+        var $nav = this.getNavFromType(navType),
+            id = 'locales',
+            elementID = navType + '_' + id;
+
+        if ($nav.find('#' + elementID).length > 0) {
+            return;
+        }
+
+        var label = this.fluidbook.l10n.__('Select language');
+        var url = '#/locales';
+        var flagHolder = '<span class="locale-flag"></span>';
+        var link;
+        if (navType == 'horizontalNav') {
+            link = '<a id="'+ elementID +'" data-tooltip="' + label + '" href="'+ url +'">'+ flagHolder +'</a>';
+        } else {
+            link = '<a id="'+ elementID +'" href="'+ url +'">'+ flagHolder +' '+ label +'</a>';
+        }
+
         var flag = this.fluidbook.l10n.getActiveFlag();
         if (flag === false) {
             return;
         }
 
-        this.menu.append(l);
-        this.menu.find("#locales").css('background-image', 'url("images/flags/' + flag + '.png")');
+        // Add to menu and set flag
+        $nav.find('ul').append('<li>' + link + '</li>');
+        $nav.find(".locale-flag").css('background-image', 'url("images/flags/' + flag + '.png")');
 
-        return l;
+        return link;
     },
 
     getMenuCloseButton: function () {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 56689d7f..a363a021 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -346,15 +346,20 @@ body, html {
 	display: none;
 }
 
-/* Nav */  // #nav ?
-#menu #locales {
+/* Locale Flag icon */
+.locale-flag {
 	display: inline-block;
 	width: 22px;
 	height: 17px;
 	border-radius: 1px;
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
-	margin: 11px 3px 0;
+	margin: 0 18px 4px;
+
+	#menu & {
+		padding: 0;
+		margin: 0 10px 0 0;
+	}
 }
 
 .localesList li a {
-- 
2.39.5