Merge branch 'master' into dev
ustccjw
commit
0e272f36df
|
|
@ -6,3 +6,8 @@ $color-primary-light: #3f51b5;
|
|||
$color-primary-contrast: #fff;
|
||||
$color-divider: $color-divider;
|
||||
$color-content: #fafafa;
|
||||
$animation-duration: 250ms;
|
||||
$animation-ease: ease-in-out;
|
||||
|
||||
$code-font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
$code-font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
@import "../globals";
|
||||
@import "../mixins";
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
|
||||
:global {
|
||||
@import "~codemirror/lib/codemirror";
|
||||
@import "solarized";
|
||||
@import "custom";
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #c2c0bc;
|
||||
content: "Try Component";
|
||||
background: #f1ede4;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import React from 'react';
|
||||
import { AppBar, Button } from 'react-toolbox';
|
||||
import { Link } from 'react-router';
|
||||
import Logo from '../../logo';
|
||||
import Navigation from '../../navigation';
|
||||
import PlaygroundArea from './playground_area';
|
||||
import style from './appbar.scss';
|
||||
|
||||
class MainAppBar extends React.Component {
|
||||
handlerPlayGroundClick = () => {
|
||||
this.refs.playground.show();
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AppBar className={style.appbar} flat fixed>
|
||||
<Link to='/' className={style.brand}>
|
||||
<Logo className={style.logo} /> React Toolbox
|
||||
</Link>
|
||||
<Navigation className={style.navigation}/>
|
||||
<Button
|
||||
accent
|
||||
className={style['playground-button']}
|
||||
icon='code'
|
||||
kind='floating'
|
||||
onClick={this.handlerPlayGroundClick}
|
||||
/>
|
||||
<PlaygroundArea ref='playground' />
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainAppBar;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
@import "../../globals";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
@import "~react-toolbox/button/config";
|
||||
|
||||
$appbar-brand-height: 2 * $unit;
|
||||
$appbar-brand-v-padding: ($appbar-height - $appbar-brand-height) / 2;
|
||||
$appbar-brand-logo-size: $appbar-height - 2.6 * $unit;
|
||||
$appbar-shadow: 0 1px rgba(255,255,255,0.75);
|
||||
|
||||
.appbar {
|
||||
composes: root from "sass!react-toolbox/app_bar/style";
|
||||
background: $color-primary-dark;
|
||||
box-shadow: $appbar-shadow;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@include typo-title;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-top: $appbar-brand-v-padding;
|
||||
padding-bottom: $appbar-brand-v-padding;
|
||||
padding-left: $appbar-title-distance;
|
||||
font-weight: 400;
|
||||
color: $color-primary-contrast;
|
||||
> .logo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: $appbar-brand-logo-size;
|
||||
height: $appbar-brand-logo-size;
|
||||
margin-top: - $appbar-brand-logo-size / 2;
|
||||
fill: $color-primary-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-grow: 1;
|
||||
padding-right: $button-floating-height;
|
||||
text-align: right;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
display: inline-block;
|
||||
> a {
|
||||
@include typo-menu;
|
||||
display: inline-block;
|
||||
padding: 2.5 * $unit $appbar-h-padding;
|
||||
color: $color-primary-contrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playground-button {
|
||||
position: absolute;
|
||||
right: $button-floating-height / 2;
|
||||
bottom: -($button-floating-height / 2);
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { AppBar } from 'react-toolbox';
|
||||
import { Link } from 'react-router';
|
||||
import Logo from '../../../logo';
|
||||
import Navigation from '../../../navigation';
|
||||
import style from './appbar.scss';
|
||||
|
||||
class MainAppBar extends React.Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AppBar className={style.appbar} flat fixed>
|
||||
<Link to='/'>
|
||||
<Logo className={style.logo} />
|
||||
</Link>
|
||||
<Navigation className={style.navigation}/>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainAppBar;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
@import "../../../globals";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
$appbar-height: 11.2 * $unit;
|
||||
$appbar-logo-size: 3.6 * $unit;
|
||||
$appbar-shadow: 0 1px rgba(255,255,255,.75);
|
||||
|
||||
.appbar {
|
||||
display: flex;
|
||||
min-height: $appbar-height;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
background: $color-primary-dark;
|
||||
box-shadow: $appbar-shadow;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: $appbar-logo-size;
|
||||
height: $appbar-logo-size;
|
||||
fill: $color-primary-contrast;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
display: inline-block;
|
||||
> a {
|
||||
@include typo-menu;
|
||||
display: inline-block;
|
||||
margin-right: $appbar-h-padding;
|
||||
line-height: $appbar-height / 2;
|
||||
color: $color-primary-contrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react';
|
||||
import ToolboxComponents from './components';
|
||||
import style from './component.scss';
|
||||
import components from '../modules/components';
|
||||
import style from './documentation.scss';
|
||||
|
||||
const Component = (props) => {
|
||||
const html = { __html: ToolboxComponents[props.params.component].docs };
|
||||
const html = { __html: components[props.params.component].docs };
|
||||
return (
|
||||
<div
|
||||
className={style.documentation}
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
@import "../../globals";
|
||||
@import "../../../globals";
|
||||
|
||||
$documentation-h1-size: 3.4 * $unit;
|
||||
$documentation-h2-size: 2.4 * $unit;
|
||||
$documentation-h-offset: 4 * $unit;
|
||||
$documentation-v-offset: ($documentation-h-offset / 2);
|
||||
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
||||
$documentation-code-font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
$documentation-code-font-size: 13px;
|
||||
|
||||
.documentation {
|
||||
max-height: 100%;
|
||||
|
|
@ -44,8 +42,8 @@ $documentation-code-font-size: 13px;
|
|||
}
|
||||
pre {
|
||||
padding: $documentation-v-offset $documentation-h-offset;
|
||||
font-family: $documentation-code-font-family;
|
||||
font-size: $documentation-code-font-size;
|
||||
font-family: $code-font-family;
|
||||
font-size: $code-font-size;
|
||||
background-color: $documentation-code-background;
|
||||
}
|
||||
table {
|
||||
|
|
@ -1,15 +1,19 @@
|
|||
import React from 'react';
|
||||
import ToolboxComponents from './components';
|
||||
import { History } from 'react-router';
|
||||
import { List, ListItem } from 'react-toolbox';
|
||||
import style from './drawer.scss';
|
||||
import style from './drawer_components.scss';
|
||||
import components from '../modules/components';
|
||||
|
||||
const MainDrawer = React.createClass({
|
||||
mixins: [History],
|
||||
|
||||
propTypes: {
|
||||
active: React.PropTypes.bool
|
||||
},
|
||||
|
||||
renderDrawerItems () {
|
||||
return Object.keys(ToolboxComponents).map((key) => {
|
||||
const ToolboxComponent = ToolboxComponents[key];
|
||||
return Object.keys(components).map((key) => {
|
||||
const ToolboxComponent = components[key];
|
||||
const to = this.context.history.createHref(ToolboxComponent.path);
|
||||
let className = style.item;
|
||||
if (this.context.history.isActive(ToolboxComponent.path)) {
|
||||
|
|
@ -29,8 +33,11 @@ const MainDrawer = React.createClass({
|
|||
},
|
||||
|
||||
render () {
|
||||
let className = style.root;
|
||||
if (this.props.active) className += ` ${style.active_drawer}`;
|
||||
|
||||
return (
|
||||
<aside className={style.root}>
|
||||
<aside className={className}>
|
||||
<List className={style.list} selectable>
|
||||
{ this.renderDrawerItems() }
|
||||
</List>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@import "../../globals";
|
||||
|
||||
@import "../../../globals";
|
||||
$drawer-h-offset: 2.4 * $unit;
|
||||
$drawer-v-offset: 1.2 * $unit;
|
||||
$drawer-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
|
||||
|
|
@ -7,13 +6,20 @@ $drawer-footer-border: solid 1px rgb(224, 224, 224);
|
|||
$drawer-width: 22 * $unit;
|
||||
|
||||
.root {
|
||||
z-index: $z-index-normal;
|
||||
z-index: $z-index-high;
|
||||
display: flex;
|
||||
min-width: $drawer-width;
|
||||
max-width: $drawer-width;
|
||||
flex-direction: column;
|
||||
background-color: $color-background;
|
||||
box-shadow: $drawer-shadow;
|
||||
transition: all $animation-duration $animation-ease;
|
||||
&:not(.active_drawer) {
|
||||
min-width: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
&.active_drawer {
|
||||
min-width: $drawer-width;
|
||||
max-width: $drawer-width;
|
||||
box-shadow: $drawer-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
|
|
@ -39,6 +45,7 @@ $drawer-width: 22 * $unit;
|
|||
font-size: $font-size-tiny;
|
||||
color: $color-text-secondary;
|
||||
border-top: $drawer-footer-border;
|
||||
overflow: hidden;
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: ($drawer-h-offset / 2);
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
import style from './drawer_playground.scss';
|
||||
import Playground from '../../../playground';
|
||||
import code from '../../../../examples/example.txt';
|
||||
|
||||
class PlaygroundArea extends React.Component {
|
||||
render () {
|
||||
let className = style.root;
|
||||
if (this.props.active) className += ` ${style.active}`;
|
||||
|
||||
return (
|
||||
<aside className={className}>
|
||||
<Playground codeText={code} layout='vertical' />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlaygroundArea;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@import "../../../globals";
|
||||
$drawer-shadow: 0 -4px 5px 0 rgba(0,0,0,.14),0 -1px 10px 0 rgba(0,0,0,.12), 0 -2px 4px -1px rgba(0,0,0,.2);
|
||||
// $drawer-shadow: 0 -10px red;
|
||||
.root {
|
||||
z-index: $z-index-high;
|
||||
background-color: $color-background;
|
||||
transition: all $animation-duration $animation-ease;
|
||||
&:not(.active) {
|
||||
min-width: 0vw;
|
||||
max-width: 0vw;
|
||||
}
|
||||
&.active {
|
||||
min-width: 50vw;
|
||||
max-width: 50vw;
|
||||
box-shadow: $drawer-shadow;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,39 @@
|
|||
import React from 'react';
|
||||
import MainAppBar from './appbar';
|
||||
import MainDrawer from './drawer';
|
||||
import { AppBar, Button } from 'react-toolbox';
|
||||
import Appbar from './components/appbar';
|
||||
import DrawerComponents from './components/drawer_components';
|
||||
import DrawerPlayground from './components/drawer_playground';
|
||||
import style from './style';
|
||||
|
||||
const Main = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<MainAppBar />
|
||||
<section className={style.content}>
|
||||
<MainDrawer />
|
||||
{ props.children }
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
class Main extends React.Component {
|
||||
|
||||
state = {
|
||||
playground: false
|
||||
};
|
||||
|
||||
handlerPlayGroundClick = () => {
|
||||
this.setState({ playground: !this.state.playground})
|
||||
}
|
||||
|
||||
render () {
|
||||
console.log('aaa', this.state.playground);
|
||||
return (
|
||||
<div>
|
||||
<Appbar />
|
||||
<Button
|
||||
accent
|
||||
className={style.playground_button}
|
||||
icon={this.state.playground ? 'close' : 'code'}
|
||||
kind='floating'
|
||||
onClick={this.handlerPlayGroundClick}
|
||||
/>
|
||||
<section className={style.content}>
|
||||
<DrawerComponents active={!this.state.playground}/>
|
||||
{ this.props.children }
|
||||
<DrawerPlayground active={this.state.playground} />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Main;
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Button, Drawer } from 'react-toolbox';
|
||||
import style from './playground_area.scss';
|
||||
import Playground from '../../playground';
|
||||
import code from '../../../examples/example.txt';
|
||||
|
||||
class PlaygroundArea extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<Drawer className={style.drawer} ref='drawer' type='right'>
|
||||
<Button label='Close' onClick={this.hide} />
|
||||
<Playground codeText={code} layout='vertical' />
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
show = () => {
|
||||
this.refs.drawer.show();
|
||||
};
|
||||
|
||||
hide = () => {
|
||||
this.refs.drawer.hide();
|
||||
};
|
||||
}
|
||||
|
||||
export default PlaygroundArea;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "../../globals";
|
||||
|
||||
.drawer > aside {
|
||||
width: 60%;
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
@import "../../globals";
|
||||
@import "~react-toolbox/app_bar/config";
|
||||
@import "~react-toolbox/button/config";
|
||||
|
||||
$appbar-height: 11.2 * $unit;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
|
@ -7,3 +10,10 @@
|
|||
padding-top: $appbar-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.playground_button {
|
||||
z-index: $z-index-higher;
|
||||
position: absolute;
|
||||
right: $button-floating-height / 2;
|
||||
top: $appbar-height - ($button-floating-height / 2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@ import code from '../../../examples/example.txt';
|
|||
const PlaygroundArea = () => {
|
||||
return (
|
||||
<section>
|
||||
<h1>Playground</h1>
|
||||
<p>
|
||||
lorem ipsum...
|
||||
</p>
|
||||
<Playground codeText={code} />
|
||||
<Playground codeText={code} layout='horizontal'/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,8 +5,8 @@ const Navigation = (props) => {
|
|||
return (
|
||||
<nav className={props.className}>
|
||||
<ul>
|
||||
<li><Link to='/install'>Installation</Link></li>
|
||||
<li><Link to='/components/app_bar'>Components</Link></li>
|
||||
<li><Link to='/install'>Installation</Link></li>
|
||||
<li><a href='http://www.github.com/react-toolbox/react-toolbox' target='_blank'>Github</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
@import "../../../globals";
|
||||
@import "../../../mixins";
|
||||
|
||||
$documentation-code-background: rgba(0, 0, 0, .0588235);
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
|
||||
:global {
|
||||
@import "~codemirror/lib/codemirror";
|
||||
@import "solarized";
|
||||
@import "custom";
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 3px 7px;
|
||||
font-size: $font-size-tiny;
|
||||
font-weight: $font-weight-bold;
|
||||
font-family: $code-font-family;
|
||||
color: $color-text;
|
||||
content: "React Toolbox Virtual Console";
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../globals";
|
||||
@import "../mixins";
|
||||
@import "../../../globals";
|
||||
@import "../../../mixins";
|
||||
|
||||
$preview-error-background: #f2777a;
|
||||
$preview-error-color: #fff;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import Editor from '../editor';
|
||||
import Preview from '../preview';
|
||||
import Editor from './components/editor';
|
||||
import Preview from './components/preview';
|
||||
import style from './style';
|
||||
|
||||
class Playground extends React.Component {
|
||||
|
|
@ -10,7 +10,7 @@ class Playground extends React.Component {
|
|||
};
|
||||
|
||||
static defaultProps = {
|
||||
layout: 'horizontal'
|
||||
layout: 'vertical'
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
|
|||
|
|
@ -12,15 +12,22 @@ $preview-background: #fff;
|
|||
|
||||
.vertical {
|
||||
flex-direction: column;
|
||||
> .editor {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
> .preview {
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
flex-direction: row;
|
||||
> .editor {
|
||||
width: $editor-width;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
> .preview {
|
||||
background: $preview-background;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import React from 'react';
|
||||
import Router from 'react-router';
|
||||
import routes from './routes';
|
||||
|
||||
const Docs = props => {
|
||||
return (
|
||||
<Router history={props.history}>
|
||||
{routes}
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
Docs.propTypes = {
|
||||
history: React.PropTypes.object
|
||||
};
|
||||
|
||||
export default Docs;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import {createHashHistory} from 'history';
|
||||
export default createHashHistory();
|
||||
|
|
@ -1,6 +1,23 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import history from './history';
|
||||
import Docs from './docs';
|
||||
import { Router, Route, IndexRoute } from 'react-router';
|
||||
import { App } from 'react-toolbox';
|
||||
import { createHashHistory } from 'history';
|
||||
|
||||
ReactDOM.render(<Docs history={history}/>, document.getElementById('app'));
|
||||
import Home from './components/layout/home';
|
||||
import Main from './components/layout/main';
|
||||
import Playground from './components/layout/playground';
|
||||
import Documentation from './components/layout/main/components/documentation';
|
||||
|
||||
ReactDOM.render((
|
||||
<Router history={createHashHistory()}>
|
||||
<Route component={App}>
|
||||
<Route path="/" component={Home} />
|
||||
<Route component={Main}>
|
||||
<Route path="/components/:component" component={Documentation} />
|
||||
<Route path="/playground" component={Playground} />
|
||||
</Route>
|
||||
<IndexRoute component={Home}/>
|
||||
</Route>
|
||||
</Router>
|
||||
), document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
import React from 'react';
|
||||
import { App } from 'react-toolbox';
|
||||
import { Route, IndexRoute } from 'react-router';
|
||||
import Home from './components/layout/home';
|
||||
import Main from './components/layout/main';
|
||||
import Playground from './components/layout/main/playground';
|
||||
import Component from './components/layout/main/component';
|
||||
|
||||
const routes = (
|
||||
<Route component={App}>
|
||||
<Route path="/" component={Home} />
|
||||
<Route component={Main}>
|
||||
<Route path="/components/:component" component={Component} />
|
||||
<Route path="/playground" component={Playground} />
|
||||
</Route>
|
||||
<IndexRoute component={Home}/>
|
||||
</Route>
|
||||
);
|
||||
|
||||
export default routes;
|
||||
Loading…
Reference in New Issue