Upgraded Docs site to use Tabs instead of Left Nav

mui · Jul 27, 2015 · 4c13c4d · 4c13c4d
1 parent 19c1229
commit 4c13c4d
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 62 deletions.
diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx
@@ -2,18 +2,28 @@ let React = require('react');
 let Router = require('react-router');
 let AppLeftNav = require('./app-left-nav');
 let FullWidthSection = require('./full-width-section');
-let { AppBar, AppCanvas, IconButton, Menu, Styles } = require('material-ui');
+let { AppBar,
+      AppCanvas,
+      FontIcon,
+      IconButton,
+      EnhancedButton,
+      Menu,
+      Mixins,
+      RaisedButton,
+      Styles,
+      Tab,
+      Tabs,
+      Paper} = require('material-ui');
 
 let RouteHandler = Router.RouteHandler;
-let { Colors, Typography } = Styles;
+let { Colors, Spacing, Typography } = Styles;
 let ThemeManager = new Styles.ThemeManager();
 
 
 class Master extends React.Component {
 
   constructor() {
     super();
-    this._onLeftIconButtonTouchTap = this._onLeftIconButtonTouchTap.bind(this);
   }
 
   getChildContext() {
@@ -34,16 +44,41 @@ class Master extends React.Component {
       },
       p: {
         margin: '0 auto',
-        padding: '0',
+        padding: 0,
         color: Colors.lightWhite,
-        maxWidth: '335px'
+        maxWidth: 335
       },
-      iconButton: {
+      github: {
+        position: 'fixed',
+        right: Spacing.desktopGutter/2,
+        top: 8,
+        zIndex: 5,
+        color: 'white'
+      },
+       iconButton: {
         color: darkWhite
-      }
+      },
     };
   }
 
+  componentWillMount(){
+    ThemeManager.setComponentThemes({
+      inkBar: {
+        backgroundColor: Colors.yellow200,
+      },
+    });
+    this.setState({tabIndex: this._getSelectedIndex()});
+    let setTabsState = function() {
+      this.setState({renderTabs: !(document.body.clientWidth <= 647)});
+    }.bind(this);
+    setTabsState();
+    window.onresize = setTabsState;
+  }
+
+  componentWillReceiveProps() {
+    this.setState({tabIndex: this._getSelectedIndex()});
+  }
+
   render() {
     let styles = this.getStyles();
     let title =
@@ -56,34 +91,159 @@ class Master extends React.Component {
         iconStyle={styles.iconButton}
         iconClassName="muidocs-icon-custom-github"
         href="https://github.com/callemall/material-ui"
-        linkButton={true} />
+        linkButton={true}
+        style={styles.github} />
+    );
+
+    let githubButton2 = (
+      <IconButton
+        iconStyle={styles.iconButton}
+        iconClassName="muidocs-icon-custom-github"
+        href="https://github.com/callemall/material-ui"
+        linkButton={true}/>
     );
 
     return (
       <AppCanvas>
-
-        <AppBar
-          onLeftIconButtonTouchTap={this._onLeftIconButtonTouchTap}
-          title={title}
-          zDepth={0}
-          iconElementRight={githubButton}/>
-
-        <AppLeftNav ref="leftNav" />
+        {githubButton}
+        {this.state.renderTabs ? this._getTabs(): this._getAppBar()}
 
         <RouteHandler />
-
+        <AppLeftNav ref="leftNav" />
         <FullWidthSection style={styles.footer}>
           <p style={styles.p}>
             Hand crafted with love by the engineers at <a style={styles.a} href="http://call-em-all.com">Call-Em-All</a> and our
             awesome <a style={styles.a} href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.
           </p>
-          {githubButton}
+          {githubButton2}
         </FullWidthSection>
-
       </AppCanvas>
     );
   }
 
+ _getTabs() {
+    let styles = {
+      root: {
+        backgroundColor: Colors.cyan500,
+        position: 'fixed',
+        height: 64,
+        top: 0,
+        right: 0,
+        zIndex: 4,
+        width: '100%',
+      },
+      container: {
+        position: 'absolute',
+        right: (Spacing.desktopGutter/2) + 48,
+        bottom: 0,
+      },
+      span: {
+        color: Colors.white,
+        fontWeight: Typography.fontWeightLight,
+        left: 45,
+        top: 22,
+        position: 'absolute',
+        fontSize: 26,
+      },
+      svgLogoContainer: {
+        position: 'fixed',
+        width: 300,
+        left: Spacing.desktopGutter,
+      },
+      svgLogo: {
+        width: 65,
+        backgroundColor: Colors.cyan500,
+        position: 'absolute',
+        top: 20,
+      },
+      tabs: {
+        width: 425,
+        bottom:0,
+      },
+      tab: {
+        height: 64
+      }
+
+    };
+
+    let materialIcon= this.state.tabIndex !== '0' ? (
+      <EnhancedButton
+        style={styles.svgLogoContainer}
+        linkButton={true}
+        href="/#/home">
+        <img style={styles.svgLogo} src="images/material-ui-logo.svg"/>
+        <span style={styles.span}>material ui</span>
+      </EnhancedButton>) : null;
+
+    return(
+      <div>
+        <Paper
+          zDepth={0}
+          rounded={false}
+          style={styles.root}>
+          {materialIcon}
+          <div style={styles.container}>
+            <Tabs
+              style={styles.tabs}
+              value={this.state.tabIndex}
+              onChange={this._handleTabChange.bind(this)}>
+              <Tab
+                value="1"
+                label="GETTING STARTED"
+                style={styles.tab}
+                route="get-started" />
+              <Tab
+                value="2"
+                label="CUSTOMIZATION"
+                style={styles.tab}
+                route="customization"/>
+              <Tab
+                value="3"
+                label="COMPONENTS"
+                style={styles.tab}
+                route="components"/>
+            </Tabs>
+          </div>
+        </Paper>
+      </div>
+    );
+  }
+
+  _getSelectedIndex() {
+    return this.context.router.isActive('get-started') ? '1' :
+      this.context.router.isActive('customization') ? '2' :
+      this.context.router.isActive('components') ? '3' : '0';
+  }
+
+  _handleTabChange(value, e, tab) {
+    this.context.router.transitionTo(tab.props.route);
+    this.setState({tabIndex: this._getSelectedIndex()});
+  }
+
+  _getAppBar() {
+    let title =
+      this.context.router.isActive('get-started') ? 'Get Started' :
+      this.context.router.isActive('customization') ? 'Customization' :
+      this.context.router.isActive('components') ? 'Components' : '';
+
+    let githubButton = (
+      <IconButton
+        iconClassName="muidocs-icon-custom-github"
+        href="https://github.com/callemall/material-ui"
+        linkButton={true}/>
+    );
+
+    return (
+      <div>
+        <AppBar
+          onLeftIconButtonTouchTap={this._onLeftIconButtonTouchTap.bind(this)}
+          title={title}
+          zDepth={0}
+          iconElementRight={githubButton}
+          style={{position: 'absolute', top: 0}}/>
+      </div>);
+  }
+
   _onLeftIconButtonTouchTap() {
     this.refs.leftNav.toggle();
   }