From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 31 Oct 2017 12:24:13 +0000 (+0100)
Subject: WIP #1762 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=6f12ee9bac0c211dacc79ce023cd9e0839df8e69;p=fluidbook-html5.git

WIP #1762 @4
---

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index 489268ae..107c1d60 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -44,7 +44,7 @@ FluidbookHelp.prototype = {
 		// Icons
 		help += '<div id="icons">';
 
-        var tooltipSelector = '#horizontalNav a[data-tooltip]';
+        var tooltipSelector = '#horizontalNav li > a[data-tooltip]:visible';
 
         // When the menu position is inverted, the icon help lines need
         // to be drawn in the reverse order to avoid text/line overlaps
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index a6daf994..a461bff9 100644
--- 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 66163aa9..b608e8fe 100644
--- 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 9dfda2c0..62329b02 100644
--- 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
+}