Updating fork

apps/fabric-website/CHANGELOG.json

@@ -1,6 +1,25 @@
 {
   "name": "@uifabric/fabric-website",
   "entries": [
+    {
+      "version": "5.3.0",
+      "tag": "@uifabric/fabric-website_v5.3.0",
+      "date": "Mon, 22 Jan 2018 11:14:27 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "a9d0f70495f315998a5dad78699ffd2349436420",
+            "comment": "Adding left nav scroll functionality, including fixing the left nav with the header. Other layout refactoring to accommodate."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.40.1 <6.0.0` to `>=5.41.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.2.1",
       "tag": "@uifabric/fabric-website_v5.2.1",

apps/fabric-website/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @uifabric/fabric-website
 
-This log was last generated on Fri, 22 Dec 2017 11:10:56 GMT and should not be manually modified.
+This log was last generated on Mon, 22 Jan 2018 11:14:27 GMT and should not be manually modified.
+
+## 5.3.0
+Mon, 22 Jan 2018 11:14:27 GMT
+
+### Minor changes
+
+- Adding left nav scroll functionality, including fixing the left nav with the header. Other layout refactoring to accommodate.
 
 ## 5.2.1
 Fri, 22 Dec 2017 11:10:56 GMT

apps/fabric-website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/fabric-website",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -39,7 +39,7 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "color-functions": "1.1.0",
     "json-loader": "^0.5.7",
-    "office-ui-fabric-react": ">=5.40.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
     "tslib": "^1.7.1"
   }
 }

apps/fabric-website/src/components/App/App.scss

@@ -13,14 +13,12 @@
   // Nav is hidden off screen by default
   .App-nav {
     -webkit-overflow-scrolling: touch; // Improves scrolling performance
-    bottom: 0;
-    @include ms-left(-$Nav-width);
     overflow-y: auto;
     position: fixed;
     top: $Header-height;
-    transition: $ms-animation-duration-2 $ms-animation-ease-1;
-    @include ms-transition-property(left);
     width: $Nav-width;
+    @include ms-float(left);
+    z-index: $ms-zIndex-1;
   }
 
   .App-content {
@@ -39,31 +37,6 @@
     }
   }
 
-  // When the nav is open (smaller screens only) push the content over and prevent app from scrolling
-  @media screen and (max-width: $uhf-screen-min-mobile) {
-    .App {
-      padding: 0;
-    }
-
-    .App.is-navOpen {
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
-      position: fixed;
-      right: 0;
-      top: 0;
-
-      .App-nav {
-        @include ms-left(0);
-      }
-
-      .App-content {
-        @include ms-left($Nav-width);
-        opacity: 0.5; // Dim the content
-      }
-    }
-  }
-
   // Show the nav at all times, to the left of the content
   @media screen and (min-width: $uhf-screen-min-mobile) {
     .App {
@@ -78,27 +51,17 @@
     }
 
     .App-nav {
-      @include ms-left(auto);
-      top: auto; // Mobile nav bar is no longer there
-      position: relative;
-      overflow-y: visible
+      top: $Header-height*2;
+      bottom: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
 
     .App-content {
-      margin-top: 0;
       flex-grow: unset;
+      max-width: calc(100% - #{$Nav-width}); // IE needs max-width, it was ignoring width
       width: calc(100% - #{$Nav-width});
-    }
-
-    // Reset values for the nav and content if opened on larger screens
-    .App.is-navOpen {
-      .App-nav {
-        @include ms-left(auto);
-      }
-
-      .App-content {
-        @include ms-left(auto);
-      }
+      @include ms-left($Nav-width);
     }
   }
 
@@ -111,11 +74,16 @@
     .App-nav {
       @include ms-margin-left(18px);
     }
+
+    .App-content {
+      width: calc(100% - #{$Nav-width});
+      @include ms-left($Nav-width + 18px);
+    }
   }
 }
 
 @media only screen and (max-width: $uhf-screen-min-mobile) {
   .App {
     padding: 0;
   }
-}
+}

apps/fabric-website/src/components/App/App.tsx

@@ -1,55 +1,117 @@
 import * as React from 'react';
 import './App.scss';
 import { AppState } from './AppState';
-import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import AttachedScrollUtility from '../../utilities/AttachedScrollUtility';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { Nav } from '../Nav/Nav';
 
 export interface IAppProps extends React.Props<App> {
 }
 
 export interface IAppState {
-  isNavOpen: boolean;
+  isAttached: boolean;
+  navHeight: number;
 }
 
 export class App extends React.Component<IAppProps, any> {
 
+  private _attachedScrollThreshold: number;
+  private _appContent: HTMLDivElement;
+  private _appContentRect: ClientRect;
+
   constructor(props: IAppProps) {
     super(props);
 
     this.state = {
-      isNavOpen: false
+      isAttached: false
     };
   }
 
+  public componentDidMount() {
+    window.addEventListener('scroll', this._handleNavPositioning);
+    window.addEventListener('resize', this._handleNavPositioning);
+
+    this._attachedScrollThreshold = AttachedScrollUtility.calculateAttachedScrollThreshold();
+    this._handleNavPositioning();
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('scroll', this._handleNavPositioning);
+    window.removeEventListener('resize', this._handleNavPositioning);
+  }
+
   public render() {
-    let { isNavOpen } = this.state;
+    let { navHeight } = this.state;
+    let appContentTop = this._appContentRect ? this._appContentRect.top : 100;
+    // Using appContentTop as a reference to match instead of 'unset' because it does not work in IE.
+    let navTop: string = this.state.isAttached ? '0' : appContentTop.toString();
+    let navStyle = {
+      top: navTop,
+      height: navHeight
+    };
 
     return (
       <Fabric
-        className={ css(
-          'App',
-          isNavOpen && 'is-navOpen'
-        ) }
+        className='App'
       >
         <div className='App-wrapper'>
-          <div className='App-nav'>
+          <div
+            className='App-nav'
+            style={ navStyle }
+          >
             <Nav
               pages={ AppState.pages }
-              onLinkClick={ this._onNavItemClicked.bind(this) }
             />
           </div>
-          <div className='App-content' data-is-scrollable='true'>
+          <div
+            className='App-content'
+            data-is-scrollable='true'
+            ref={ (el) => this._appContent = el }
+            data-app-content-div='true'
+          >
             { this.props.children }
           </div>
         </div>
       </Fabric>
     );
   }
 
-  private _onNavItemClicked(ev: MouseEvent) {
+  @autobind
+  private _handleNavPositioning() {
+    let { isAttached, navHeight } = this.state;
+    this._appContentRect = this._appContent.getBoundingClientRect();
+    const viewPortHeight = window.innerHeight;
+    isAttached = AttachedScrollUtility.shouldComponentAttach(isAttached, this._attachedScrollThreshold);
+    navHeight = this._calculateNavHeight(viewPortHeight, this._appContentRect, navHeight);
     this.setState({
-      isNavOpen: false
+      isAttached: isAttached,
+      navHeight: navHeight
     });
   }
+
+  private _calculateNavHeight(viewPortHeight: number, appContentRect: ClientRect, height: number): number {
+    if (!appContentRect) {
+      return height;
+    }
+    if (appContentRect.top >= 0) {
+      // This case accounts for space taken up by the UHF header in the viewport.
+      height = viewPortHeight - appContentRect.top;
+      if (appContentRect.height < appContentRect.bottom && viewPortHeight > appContentRect.bottom) {
+        // This case might only exist in the UHF testing environment, when content isn't rendering properly and its height is weird.
+        height = appContentRect.height;
+      }
+    } else if (viewPortHeight < appContentRect.bottom && appContentRect.top < 0) {
+      // For pages with content that's longer than the viewport, the viewport is the height.
+      // Takes effect when you scroll past the header.
+      height = viewPortHeight;
+    } else if (appContentRect.bottom < 0) {
+      // In smaller screens when you scroll till the footer takes the whole page, collapse the nav.
+      height = 0;
+    } else {
+      // Once the footer is in view, match nav bottom to content bottom.
+      height = appContentRect.bottom;
+    }
+    return height;
+  }
 }

apps/fabric-website/src/components/Nav/Nav.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import * as stylesImport from './Nav.module.scss';
 const styles: any = stylesImport;
 import {
@@ -24,9 +25,11 @@ export class Nav extends React.Component<INavProps, INavState> {
       : null;
 
     return (
-      <nav className={ styles.nav } role='navigation'>
-        { links }
-      </nav>
+      <FocusZone>
+        <nav className={ styles.nav } role='navigation'>
+          { links }
+        </nav>
+      </FocusZone>
     );
   }
 

apps/fabric-website/src/components/PageHeader/PageHeader.module.scss

@@ -47,7 +47,6 @@
         box-shadow: 0 10px 30px -10px rgba(0,0,0,.2);
         max-width: $App-maximumWidth - $Nav-width;
         position: fixed;
-        top: 0;
         width: calc(100% - #{$Nav-width} - #{$App-padding-left-lg} - #{$App-padding-right-lg});
         z-index: $ms-zIndex-1;
         height: $PageHeader-attachedTitleHeight + $PageHeader-navHeight;
@@ -131,7 +130,7 @@
   .pageHeader {
     &.isAttached {
       .content {
-        width: calc(100% - #{$Nav-width} - #{$App-padding-right-sm} - #{$App-padding-left-sm} - 13px);
+        width: calc(100% - #{$Nav-width} - #{$App-padding-right-sm} - #{$App-padding-left-sm});
       }
     }
   }