WIP #1762 @4

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 489268ae4454bc4f6f198d32406fcdf7b1546f63..107c1d607bdee796de82d28f8dc5ee5fa26d3399 100644 (file)
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -44,7 +44,7 @@ FluidbookHelp.prototype = {
                // Icons\r
                help += '<div id="icons">';\r
 \r
-        var tooltipSelector = '#horizontalNav a[data-tooltip]';\r
+        var tooltipSelector = '#horizontalNav li > a[data-tooltip]:visible';\r
 \r
         // When the menu position is inverted, the icon help lines need\r
         // to be drawn in the reverse order to avoid text/line overlaps\r

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index a6daf994970dba6867679577e673103569a66a0a..a461bff9391c6ac847ed6e08739a10eeb9b7036a 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -304,16 +304,16 @@ FluidbookNav.prototype = {
         }
 
 
-        // Backwards compatibility for old "afterSearch" setting to work with new "extra" link
-        if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.afterSearchLink != '' && this.fluidbook.datas.themeEnableAfterSearch) {
-
-            // Only override "extra" link values if they're not already set
-            if (this.fluidbook.datas.navExtraImage == '' && this.fluidbook.datas.navExtraLink == '') {
-                this.fluidbook.datas.navExtraImage = this.fluidbook.datas.afterSearch;
-                this.fluidbook.datas.navExtraLink = this.fluidbook.datas.afterSearchLink;
-                this.fluidbook.datas.navExtraTooltip = this.fluidbook.datas.afterSearchTooltip;
-            }
-        }
+        // // Backwards compatibility for old "afterSearch" setting to work with new "extra" link
+        // if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.afterSearchLink != '' && this.fluidbook.datas.themeEnableAfterSearch) {
+        //
+        //     // Only override "extra" link values if they're not already set
+        //     if (this.fluidbook.datas.navExtraImage == '' && this.fluidbook.datas.navExtraLink == '') {
+        //         this.fluidbook.datas.navExtraImage = this.fluidbook.datas.afterSearch;
+        //         this.fluidbook.datas.navExtraLink = this.fluidbook.datas.afterSearchLink;
+        //         this.fluidbook.datas.navExtraTooltip = this.fluidbook.datas.afterSearchTooltip;
+        //     }
+        // }
 
 
         for (var i in navOrder) {
@@ -435,34 +435,36 @@ FluidbookNav.prototype = {
 
             } else if (icon == 'extra') {
 
-                if (this.fluidbook.datas.navExtraImage == '' || this.fluidbook.datas.navExtraLink == '') {
-                    continue;
-                }
-
-                var id = 'extra',
-                    $nav = this.getNavFromType(navType),
-                    elementID = navType + '_' + id,
-                    navExtraImage;
+                // If the "extra" image has been set, it will be used in preference to the "afterSearch" links
+                if (this.fluidbook.datas.navExtraImage != '' || this.fluidbook.datas.navExtraLink != '') {
 
-                if ($nav.find('#' + elementID).length > 0) {
-                    continue;
-                }
+                    var id = 'extra',
+                        $nav = this.getNavFromType(navType),
+                        elementID = navType + '_' + id,
+                        navExtraImage;
 
-                if (navType == 'horizontalNav') {
-                    navExtraImage = this.fluidbook.datas.navExtraImage;
-                    link = '<a id="' + elementID + '" data-tooltip="' + this.fluidbook.datas.navExtraTooltip + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
+                    if ($nav.find('#' + elementID).length > 0) {
+                        continue;
+                    }
 
-                } else if (navType == 'menu') {
-                    navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
-                    link = '<a id="' + elementID + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"> <span class="menu-item-title">' + this.fluidbook.datas.navExtraTooltip + '</span></a>';
-                }
+                    if (navType == 'horizontalNav') {
+                        navExtraImage = this.fluidbook.datas.navExtraImage;
+                        link = '<a id="' + elementID + '" data-tooltip="' + this.fluidbook.datas.navExtraTooltip + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
 
-                $nav.find('ul').append('<li>' + link + '</li>');
-                if (link2 !== null) {
-                    $nav.find('ul').append('<li>' + link2 + '</li>');
-                }
+                    } else if (navType == 'menu') {
+                        navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
+                        link = '<a id="' + elementID + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"> <span class="menu-item-title">' + this.fluidbook.datas.navExtraTooltip + '</span></a>';
+                    }
 
+                    $nav.find('ul').append('<li>' + link + '</li>');
+                    if (link2 !== null) {
+                        $nav.find('ul').append('<li>' + link2 + '</li>');
+                    }
 
+                // Use the "afterSearch" image and links set in the theme and link editor
+                } else if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.themeEnableAfterSearch && navType == 'horizontalNav') {
+                    $nav.find('ul').append('<li><div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div></li>');
+                }
             }
 
             // if (!visible) {

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 66163aa95854eac1c0351011163adb6587f2c30b..b608e8fe968216065b64f7110f231d04f9ccaddd 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -755,13 +755,8 @@ header {
 }
 
 #afterSearch {
-       display: inline-block;
        position: relative;
-       vertical-align: top;
-       left: 30px;
-       .rtl & {
-               left: -30px;
-       }
+       margin: 0 17px;
 
        .c {
                position: relative;
@@ -781,6 +776,10 @@ header {
                        position: absolute;
                }
        }
+
+       img {
+               display: block;
+       }
 }
 
 input[type="search"]::-webkit-search-decoration,
@@ -2360,4 +2359,4 @@ body > input {
        src: url("fonts/OpenSans-Semibold.woff2") format("woff2"), url("fonts/OpenSans-Semibold.woff") format("woff");
        font-weight: 600;
        font-style: normal;
-}
\ No newline at end of file
+}

diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 9dfda2c0de42e2469ecab2ceccd2b9519f7d60a7..62329b02aee5717dcfc98f06468a361bb2351571 100644 (file)
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -53,9 +53,11 @@
        list-style-type: none;
        margin: 0;
        padding: 0;
+       white-space: nowrap;
 
        li {
                display: inline-block;
+               vertical-align: middle;
        }
 
        a {
@@ -104,4 +106,4 @@
        .rtl & {
                margin-right: 10px;
        }
-}
\ No newline at end of file
+}