WIP #1597 @2

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 35e5e07db09d52631f0967ab986c10ef16131dbb..7f7d90b704c63ec41dc229e537727b5c99a4ed4e 100644 (file)
--- 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 56689d7f10f5783fdd6b5da22a9c6d5baac8c1ff..a363a0212331b19da94c1614b901bdfebcf2b5d7 100644 (file)
--- 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 {