Fix #1567 @1.5

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index c750de27d9508cad2b0836fbd3062a951698bee6..be606d853b00f5197b2a933ce157d534f556b9e0 100644 (file)
--- 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 8f57ddcbb9787e031c68e8d61a343f6e5cdaff09..47bf1f0a64499c4f05d4aadb3fa11c077ff06896 100644 (file)
--- 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 {