diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index c37c7d780bcdd9..ba307a532d6d2e 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -2,10 +2,21 @@ 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(); @@ -13,7 +24,6 @@ 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 = ( + ); return ( - - - - + {githubButton} + {this.state.renderTabs ? this._getTabs(): this._getAppBar()} - +

Hand crafted with love by the engineers at Call-Em-All and our awesome contributors.

- {githubButton} + {githubButton2} - ); } + _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' ? ( + + + material ui + ) : null; + + return( +
+ + {materialIcon} +
+ + + + + +
+ +
+ ); + } + + _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 = ( + + ); + + return ( +
+ +
); + } + _onLeftIconButtonTouchTap() { this.refs.leftNav.toggle(); } diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index 8f2b0f066bd7d7..33e712cc66bf10 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/docs/src/app/components/pages/home.jsx @@ -36,16 +36,16 @@ let HomePage = React.createClass({ let styles = { root: { backgroundColor: Colors.cyan500, - overflow: 'hidden' + overflow: 'hidden', }, svgLogo: { marginLeft: (window.innerWidth * 0.5) - 130 + 'px', - width: '420px' + width: 420, }, tagline: { margin: '16px auto 0 auto', textAlign: 'center', - maxWidth: '575px' + maxWidth: 575, }, label: { color: ThemeManager.palette.primary1Color, @@ -61,28 +61,26 @@ let HomePage = React.createClass({ fontWeight: Typography.fontWeightLight, }, h2: { - //.mui-font-style-title - fontSize: '20px', + fontSize: 20, lineHeight: '28px', - paddingTop: '19px', - marginBottom: '13px', - letterSpacing: '0', + paddingTop: 19, + marginBottom: 13, + letterSpacing: 0, }, nowrap: { whiteSpace: 'nowrap' }, taglineWhenLarge: { - marginTop: '32px' + marginTop: 32 }, h1WhenLarge: { - fontSize: '56px' + fontSize: 56 }, h2WhenLarge: { - //.mui-font-style-headline; - fontSize: '24px', + fontSize: 24, lineHeight: '32px', - paddingTop: '16px', - marginBottom: '12px' + paddingTop: 16, + marginBottom: 12, } }; @@ -111,13 +109,6 @@ let HomePage = React.createClass({ linkButton={true} style={styles.demoStyle} labelStyle={styles.label}/> - ); @@ -129,25 +120,30 @@ let HomePage = React.createClass({ backgroundColor: Colors.grey200 }, content: { - maxWidth: '700px', + maxWidth: 700, padding: 0, margin: '0 auto', fontWeight: Typography.fontWeightLight, - fontSize: '20px', + fontSize: 20, lineHeight: '28px', - paddingTop: '19px', - marginBottom: '13px', - letterSpacing: '0', - color: Typography.textDarkBlack + paddingTop: 19, + marginBottom: 13, + letterSpacing: 0, + color: Typography.textDarkBlack, } }; return ( - + Material-UI came about from our love of  React and  - Google's Material Design + Google's Material Design . We're currently using it on a project at  Call-Em-All and plan on adding to it and making it better in the coming months. @@ -159,9 +155,20 @@ let HomePage = React.createClass({ let styles = {maxWidth: '906px'}; return ( - - - + + + ); }, @@ -170,13 +177,13 @@ let HomePage = React.createClass({ let styles = { root: { backgroundColor: Colors.grey200, - textAlign: 'center' + textAlign: 'center', }, h3: { - margin: '0', - padding: '0', + margin: 0, + padding: 0, fontWeight: Typography.fontWeightLight, - fontSize: '22' + fontSize: 22, }, button: { marginTop: 32 @@ -186,9 +193,15 @@ let HomePage = React.createClass({ return (

- Want to help make this project awesome? Check out our repo. + Want to help make this project awesome? + Check out our repo.

- + ); }, diff --git a/docs/src/css/main.css b/docs/src/css/main.css index 1fdb4aa11edbb0..861f8940c9695c 100644 --- a/docs/src/css/main.css +++ b/docs/src/css/main.css @@ -5,7 +5,7 @@ @import "github.css"; a { - color: #ff4081; /*pinkA200*/ + color: #ff4081; text-decoration: none; } diff --git a/src/styles/themes/light-theme.js b/src/styles/themes/light-theme.js index 21de0d9444335c..8a5bcde5822615 100644 --- a/src/styles/themes/light-theme.js +++ b/src/styles/themes/light-theme.js @@ -72,7 +72,7 @@ let LightTheme = { secondaryIconColor: Colors.white, }, inkBar: { - backgroundColor: palette.accent1Color, + backgroundColor: Colors.yellow200, }, leftNav: { width: spacing.desktopKeylineIncrement * 4, diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx index beedb1c64a1839..807667592c7deb 100644 --- a/src/tabs/tab.jsx +++ b/src/tabs/tab.jsx @@ -1,6 +1,5 @@ let React = require('react'); let StylePropable = require('../mixins/style-propable'); -let Colors = require('../styles/colors.js'); let Tab = React.createClass({ @@ -44,8 +43,7 @@ let Tab = React.createClass({ textAlign: 'center', verticalAlign: 'middle', height: 48, - color: Colors.white, - opacity: selected ? 1 : 0.6, + color: selected ? 'rgba(255,255,255,1)' : 'rgba(255,255,255,0.6)', outline: 'none', fontSize: 14, fontWeight: 500,