From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 17 Jul 2017 09:18:35 +0000 (+0200)
Subject: Fix #1567 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4d94619327903d991822be1412380b10562081bf;p=fluidbook-html5.git

Fix #1567 @1.5
---

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index c750de27..be606d85 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -130,6 +130,11 @@ FluidbookNav.prototype = {
 
         if (showIcon) {
             res += getSpriteIcon(name);
+
+            // Special case for icons that have an additional state
+            if (name == 'interface-fullscreen') {
+                res += getSpriteIcon('interface-fullscreen-exit');
+            }
         }
 
         // Only the Menu should have titles
@@ -432,7 +437,9 @@ FluidbookNav.prototype = {
 
         // Full screen toggle
         $(document).on('click', '.icon-fullscreen', function () {
-            // ToDo: toggle menu icon according to state
+
+            // Need to toggle all instances of the icon so can't use $(this)
+            $('.icon-fullscreen').toggleClass('active');
 
             $this.menuAPI.close();
             screenfull.toggle();
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 8f57ddcb..47bf1f0a 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2032,6 +2032,26 @@ body > input {
 	fill: currentColor;
 }
 
+/* Icon states */
+.icon-fullscreen {
+
+	// Full screen exit icon hidden by default
+	.interface-fullscreen-exit {
+		display: none;
+	}
+
+	// Switch icons
+	&.active {
+		.interface-fullscreen-exit {
+			display: inline-block;
+		}
+		.interface-fullscreen {
+			display: none;
+		}
+	}
+}
+
+
 /* Webfonts*/
 
 @font-face {