Skip to content

Commit

Permalink
Upgraded Docs site to use Tabs instead of an App Bar, cleaned up code…
Browse files Browse the repository at this point in the history 
… and implemented new Inkbar color
  • Loading branch information
@Zadielerick
Zadielerick committed Jul 22, 2015
1 parent 19c1229 commit 6897070
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 58 deletions.
174 changes: 155 additions & 19 deletions docs/src/app/components/master.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,17 @@ 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,
Menu,
Mixins,
RaisedButton,
Styles,
Tab,
Tabs,
Paper} = require('material-ui');

let RouteHandler = Router.RouteHandler;
let { Colors, Typography } = Styles;
Expand All @@ -13,7 +23,6 @@ class Master extends React.Component {

constructor() {
super();
this._onLeftIconButtonTouchTap = this._onLeftIconButtonTouchTap.bind(this);
}

getChildContext() {
Expand All @@ -34,16 +43,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: 0,
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 =
Expand All @@ -56,34 +90,136 @@ 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: 48,
bottom: 0,
},
iconButton: {
color: 'white'
},
fontIcon: {
position: 'fixed',
left: 0,
top: 8,
zIndex: 5,
padding: 12,
},
tabs: {
width: 425,
bottom:0,
},
tab: {
height: 64
}

};

let logoButton = (
<IconButton iconClassName='material-icons'
style={styles.fontIcon}
linkButton={true}
href="/#/home"
iconStyle={styles.iconButton} >home
</IconButton>
);

return(
<div>
<Paper
zDepth={0}
rounded={false}
style={styles.root}>
{logoButton}
<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();
}
Expand Down
89 changes: 51 additions & 38 deletions docs/src/app/components/pages/home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
}
};

Expand Down Expand Up @@ -111,13 +109,6 @@ let HomePage = React.createClass({
linkButton={true}
style={styles.demoStyle}
labelStyle={styles.label}/>
<RaisedButton
className="github-button"
label="GitHub"
linkButton={true}
href="https://github.com/callemall/material-ui"
style={styles.githubStyle}
labelStyle={styles.label}/>
</div>
</FullWidthSection>
);
Expand All @@ -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 (
<FullWidthSection style={styles.root} useContent={true} contentStyle={styles.content} contentType="p" className="home-purpose">
<FullWidthSection
style={styles.root}
useContent={true}
contentStyle={styles.content}
contentType="p"
className="home-purpose">
Material-UI came about from our love of&nbsp;
<a href="http://facebook.github.io/react/">React</a> and&nbsp;
<a href="https://www.google.com/design/spec/material-design/introduction.html">
Google's Material Design
Google's Material Design
</a>. We're currently using it on a project at&nbsp;
<a href="https://www.call-em-all.com/">Call-Em-All</a> and plan on adding to it
and making it better in the coming months.
Expand All @@ -159,9 +155,20 @@ let HomePage = React.createClass({
let styles = {maxWidth: '906px'};
return (
<FullWidthSection useContent={true} contentStyle={styles}>
<HomeFeature heading="Get Started" route="get-started" img="images/get-started.svg" firstChild={true}/>
<HomeFeature heading="Customization" route="customization" img="images/css-framework.svg" />
<HomeFeature heading="Components" route="components" img="images/components.svg" lastChild={true}/>
<HomeFeature
heading="Get Started"
route="get-started"
img="images/get-started.svg"
firstChild={true}/>
<HomeFeature
heading="Customization"
route="customization"
img="images/css-framework.svg" />
<HomeFeature
heading="Components"
route="components"
img="images/components.svg"
lastChild={true}/>
</FullWidthSection>
);
},
Expand All @@ -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
Expand All @@ -186,9 +193,15 @@ let HomePage = React.createClass({
return (
<FullWidthSection useContent={true} style={styles.root}>
<h3 style={styles.h3}>
Want to help make this <span style={styles.nowrap}>project awesome?</span> <span style={styles.nowrap}>Check out our repo.</span>
Want to help make this <span style={styles.nowrap}>project awesome? </span>
<span style={styles.nowrap}>Check out our repo.</span>
</h3>
<RaisedButton label="GitHub" primary={true} linkButton={true} href="https://github.com/callemall/material-ui" style={styles.button}/>
<RaisedButton
label="GitHub"
primary={true}
linkButton={true}
href="https://github.com/callemall/material-ui"
style={styles.button}/>
</FullWidthSection>
);
},
Expand Down
Loading

0 comments on commit 6897070

Please sign in to comment.