vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add NavDrawer to spec

old
Javi Velasco 2017-01-20 19:27:50 +01:00
parent 0c2a2964cb
commit b7c50ea748
4 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spec/index.html
View File

@ -17,6 +17,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head> </head>
<body> <body>
<div id="spec"></div>
<script src="/build/spec.js"></script> <script src="/build/spec.js"></script>
</body> </body>
</html> </html>

2
spec/index.js
View File

@ -2,4 +2,4 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Root from './root'; import Root from './root';
ReactDOM.render(<Root />, document.body); ReactDOM.render(<Root />, document.getElementById('spec'));

49
spec/root.js
View File

@ -1,13 +1,16 @@
/* global VERSION */ /* global VERSION */
import 'normalize.css'; import 'normalize.css';
import React from 'react'; import React, { Component } from 'react';
import { Layout, Panel, NavDrawer } from '../components/layout';
import AppBar from '../components/app_bar'; import AppBar from '../components/app_bar';
import ButtonToolbox from '../components/button';
import Autocomplete from './components/autocomplete'; import Autocomplete from './components/autocomplete';
import AppBarTest from './components/app_bar'; import AppBarTest from './components/app_bar';
import Avatar from './components/avatar'; import Avatar from './components/avatar';
import FontIcon from './components/font_icon'; import FontIcon from './components/font_icon';
import Button from './components/button'; import Button from './components/button';
import ButtonToolbox from '../components/button';
import Card from './components/card'; import Card from './components/card';
import Checkbox from './components/checkbox'; import Checkbox from './components/checkbox';
import Chip from './components/chip'; import Chip from './components/chip';
@ -15,8 +18,7 @@ import Dialog from './components/dialog';
import Drawer from './components/drawer'; import Drawer from './components/drawer';
import Dropdown from './components/dropdown'; import Dropdown from './components/dropdown';
import IconMenu from './components/icon_menu'; import IconMenu from './components/icon_menu';
import Input from './components/input'; import InputTest from './components/input';
import { Layout, Panel } from '../components/layout';
import List from './components/list'; import List from './components/list';
import Menu from './components/menu'; import Menu from './components/menu';
import Pickers from './components/pickers'; import Pickers from './components/pickers';
@ -30,18 +32,43 @@ import Tabs from './components/tabs';
import Tooltip from './components/tooltip'; import Tooltip from './components/tooltip';
import style from './style.css'; import style from './style.css';
const Root = () => ( class Root extends Component {
state = { pinned: false };
handleSideBarToggle = () => {
this.setState({ pinned: !this.state.pinned });
};
render () {
return (
<Layout> <Layout>
<AppBar className={style.appbar} title={`React Toolbox Spec ${VERSION}`} fixed flat> <AppBar
title={`React Toolbox Spec ${VERSION}`}
onLeftIconClick={this.handleSideBarToggle}
className={style.appbar}
leftIcon="menu"
fixed
flat
>
<ButtonToolbox <ButtonToolbox
accent
className={style.github} className={style.github}
href="http://react-toolbox"
target="_blank"
icon='web' icon='web'
floating floating
onClick={() => {window.href = 'http://react-toolbox';}} accent
/> />
</AppBar> </AppBar>
<NavDrawer
active={this.state.pinned}
onEscKeyDown={this.handleSideBarToggle}
onOverlayClick={this.handleSideBarToggle}
permanentAt="lg"
>
This will content filter and indexes for examples
</NavDrawer>
<Panel className={style.app}> <Panel className={style.app}>
<Autocomplete /> <Autocomplete />
<AppBarTest /> <AppBarTest />
@ -55,7 +82,7 @@ const Root = () => (
<Drawer /> <Drawer />
<Dropdown /> <Dropdown />
<IconMenu /> <IconMenu />
<Input /> <InputTest />
<List /> <List />
<Menu /> <Menu />
<Pickers /> <Pickers />
@ -69,6 +96,8 @@ const Root = () => (
<Tooltip /> <Tooltip />
</Panel> </Panel>
</Layout> </Layout>
); );
}
}
export default Root; export default Root;

5
spec/style.css
View File

@ -8,8 +8,11 @@
--appbar-height: calc(6.4 * var(--unit)); --appbar-height: calc(6.4 * var(--unit));
} }
.app { body {
background-color: #f5f5f5; background-color: #f5f5f5;
}
.app {
padding: var(--offset); padding: var(--offset);
& > section, & > section,