From 0aca8fe779f6546e8c41049808cc6289970e27c3 Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Fri, 30 Oct 2015 12:50:13 +0700 Subject: [PATCH 1/5] Reorder project --- .../components/layout/main/{ => components}/appbar.jsx | 6 +++--- .../components/layout/main/{ => components}/appbar.scss | 2 +- .../main/{component.jsx => components/documentation.jsx} | 6 +++--- .../{component.scss => components/documentation.scss} | 0 .../main/{drawer.jsx => components/drawer_components.jsx} | 8 ++++---- .../{drawer.scss => components/drawer_components.scss} | 2 +- .../drawer_playground.jsx} | 4 ++-- .../layout/main/components/drawer_playground.scss | 5 +++++ docs/app/components/layout/main/index.jsx | 8 ++++---- .../components/layout/main/{ => modules}/components.js | 0 docs/app/components/layout/main/playground_area.scss | 5 ----- .../layout/{main/playground.jsx => playground/index.jsx} | 0 docs/app/routes.jsx | 6 +++--- 13 files changed, 26 insertions(+), 26 deletions(-) rename docs/app/components/layout/main/{ => components}/appbar.jsx (86%) rename docs/app/components/layout/main/{ => components}/appbar.scss (98%) rename docs/app/components/layout/main/{component.jsx => components/documentation.jsx} (55%) rename docs/app/components/layout/main/{component.scss => components/documentation.scss} (100%) rename docs/app/components/layout/main/{drawer.jsx => components/drawer_components.jsx} (84%) rename docs/app/components/layout/main/{drawer.scss => components/drawer_components.scss} (97%) rename docs/app/components/layout/main/{playground_area.jsx => components/drawer_playground.jsx} (84%) create mode 100644 docs/app/components/layout/main/components/drawer_playground.scss rename docs/app/components/layout/main/{ => modules}/components.js (100%) delete mode 100644 docs/app/components/layout/main/playground_area.scss rename docs/app/components/layout/{main/playground.jsx => playground/index.jsx} (100%) diff --git a/docs/app/components/layout/main/appbar.jsx b/docs/app/components/layout/main/components/appbar.jsx similarity index 86% rename from docs/app/components/layout/main/appbar.jsx rename to docs/app/components/layout/main/components/appbar.jsx index 6c919563..9c75628c 100644 --- a/docs/app/components/layout/main/appbar.jsx +++ b/docs/app/components/layout/main/components/appbar.jsx @@ -1,9 +1,9 @@ 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 Logo from '../../../logo'; +import Navigation from '../../../navigation'; +import PlaygroundArea from '../playground_area'; import style from './appbar.scss'; class MainAppBar extends React.Component { diff --git a/docs/app/components/layout/main/appbar.scss b/docs/app/components/layout/main/components/appbar.scss similarity index 98% rename from docs/app/components/layout/main/appbar.scss rename to docs/app/components/layout/main/components/appbar.scss index e5bed696..3df81881 100644 --- a/docs/app/components/layout/main/appbar.scss +++ b/docs/app/components/layout/main/components/appbar.scss @@ -1,4 +1,4 @@ -@import "../../globals"; +@import "../../../globals"; @import "~react-toolbox/app_bar/config"; @import "~react-toolbox/button/config"; diff --git a/docs/app/components/layout/main/component.jsx b/docs/app/components/layout/main/components/documentation.jsx similarity index 55% rename from docs/app/components/layout/main/component.jsx rename to docs/app/components/layout/main/components/documentation.jsx index b68bd6ed..c5dc398c 100644 --- a/docs/app/components/layout/main/component.jsx +++ b/docs/app/components/layout/main/components/documentation.jsx @@ -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 (
{ - 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)) { diff --git a/docs/app/components/layout/main/drawer.scss b/docs/app/components/layout/main/components/drawer_components.scss similarity index 97% rename from docs/app/components/layout/main/drawer.scss rename to docs/app/components/layout/main/components/drawer_components.scss index 937191d7..a6cb7116 100644 --- a/docs/app/components/layout/main/drawer.scss +++ b/docs/app/components/layout/main/components/drawer_components.scss @@ -1,4 +1,4 @@ -@import "../../globals"; +@import "../../../globals"; $drawer-h-offset: 2.4 * $unit; $drawer-v-offset: 1.2 * $unit; diff --git a/docs/app/components/layout/main/playground_area.jsx b/docs/app/components/layout/main/components/drawer_playground.jsx similarity index 84% rename from docs/app/components/layout/main/playground_area.jsx rename to docs/app/components/layout/main/components/drawer_playground.jsx index baf63620..f17b329e 100644 --- a/docs/app/components/layout/main/playground_area.jsx +++ b/docs/app/components/layout/main/components/drawer_playground.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { Button, Drawer } from 'react-toolbox'; -import style from './playground_area.scss'; +import style from './drawer_playground.scss'; import Playground from '../../playground'; -import code from '../../../examples/example.txt'; +import code from '../../../../examples/example.txt'; class PlaygroundArea extends React.Component { render () { diff --git a/docs/app/components/layout/main/components/drawer_playground.scss b/docs/app/components/layout/main/components/drawer_playground.scss new file mode 100644 index 00000000..e0a3a322 --- /dev/null +++ b/docs/app/components/layout/main/components/drawer_playground.scss @@ -0,0 +1,5 @@ +@import "../../../globals"; + +.drawer > aside { + width: 50vw; +} diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx index f0b149b8..e1d9357e 100644 --- a/docs/app/components/layout/main/index.jsx +++ b/docs/app/components/layout/main/index.jsx @@ -1,14 +1,14 @@ import React from 'react'; -import MainAppBar from './appbar'; -import MainDrawer from './drawer'; +import Appbar from './components/appbar'; +import DrawerComponents from './components/drawer_components'; import style from './style'; const Main = (props) => { return (
- +
- + { props.children }
diff --git a/docs/app/components/layout/main/components.js b/docs/app/components/layout/main/modules/components.js similarity index 100% rename from docs/app/components/layout/main/components.js rename to docs/app/components/layout/main/modules/components.js diff --git a/docs/app/components/layout/main/playground_area.scss b/docs/app/components/layout/main/playground_area.scss deleted file mode 100644 index 44bbe108..00000000 --- a/docs/app/components/layout/main/playground_area.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../../globals"; - -.drawer > aside { - width: 60%; -} diff --git a/docs/app/components/layout/main/playground.jsx b/docs/app/components/layout/playground/index.jsx similarity index 100% rename from docs/app/components/layout/main/playground.jsx rename to docs/app/components/layout/playground/index.jsx diff --git a/docs/app/routes.jsx b/docs/app/routes.jsx index 34a7c8a0..18ebcacc 100644 --- a/docs/app/routes.jsx +++ b/docs/app/routes.jsx @@ -3,14 +3,14 @@ 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'; +import Playground from './components/layout/playground'; +import Documentation from './components/layout/main/components/documentation'; const routes = ( - + From c9978342436e5fa46b08821ddd095a6881402f99 Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Fri, 30 Oct 2015 13:32:39 +0700 Subject: [PATCH 2/5]
navigation like Magerial Design Lite. --- .../layout/main/components/appbar.jsx | 9 ++-- .../layout/main/components/appbar.scss | 42 +++++++------------ .../layout/main/components/documentation.scss | 2 +- docs/app/components/layout/main/style.scss | 1 + docs/app/components/navigation/index.jsx | 2 +- 5 files changed, 21 insertions(+), 35 deletions(-) diff --git a/docs/app/components/layout/main/components/appbar.jsx b/docs/app/components/layout/main/components/appbar.jsx index 9c75628c..a514cb36 100644 --- a/docs/app/components/layout/main/components/appbar.jsx +++ b/docs/app/components/layout/main/components/appbar.jsx @@ -3,19 +3,19 @@ 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 PlaygroundArea from '../playground_area'; import style from './appbar.scss'; class MainAppBar extends React.Component { handlerPlayGroundClick = () => { - this.refs.playground.show(); + // this.refs.playground.show(); } render () { return ( - - React Toolbox + +
+ ); + } +} export default Main; diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss index e32ece9a..c50c167b 100644 --- a/docs/app/components/layout/main/style.scss +++ b/docs/app/components/layout/main/style.scss @@ -1,10 +1,19 @@ @import "../../globals"; @import "~react-toolbox/app_bar/config"; +@import "~react-toolbox/button/config"; $appbar-height: 11.2 * $unit; + .content { display: flex; max-height: 100vh; padding-top: $appbar-height; overflow: hidden; } + +.playground_button { + z-index: 1980; + position: absolute; + right: $button-floating-height / 2; + top: $appbar-height - ($button-floating-height / 2); +} diff --git a/docs/app/components/layout/playground/index.jsx b/docs/app/components/layout/playground/index.jsx index 9f59cb28..2d7e3a5b 100644 --- a/docs/app/components/layout/playground/index.jsx +++ b/docs/app/components/layout/playground/index.jsx @@ -5,11 +5,7 @@ import code from '../../../examples/example.txt'; const PlaygroundArea = () => { return (
-

Playground

-

- lorem ipsum... -

- +
); }; diff --git a/docs/app/components/editor/_custom.scss b/docs/app/components/playground/components/editor/_custom.scss similarity index 100% rename from docs/app/components/editor/_custom.scss rename to docs/app/components/playground/components/editor/_custom.scss diff --git a/docs/app/components/editor/_solarized.scss b/docs/app/components/playground/components/editor/_solarized.scss similarity index 100% rename from docs/app/components/editor/_solarized.scss rename to docs/app/components/playground/components/editor/_solarized.scss diff --git a/docs/app/components/editor/index.jsx b/docs/app/components/playground/components/editor/index.jsx similarity index 100% rename from docs/app/components/editor/index.jsx rename to docs/app/components/playground/components/editor/index.jsx diff --git a/docs/app/components/editor/style.scss b/docs/app/components/playground/components/editor/style.scss similarity index 85% rename from docs/app/components/editor/style.scss rename to docs/app/components/playground/components/editor/style.scss index 8b37f8cb..fc87be13 100644 --- a/docs/app/components/editor/style.scss +++ b/docs/app/components/playground/components/editor/style.scss @@ -1,5 +1,5 @@ -@import "../globals"; -@import "../mixins"; +@import "../../../globals"; +@import "../../../mixins"; .editor { position: relative; diff --git a/docs/app/components/preview/index.jsx b/docs/app/components/playground/components/preview/index.jsx similarity index 100% rename from docs/app/components/preview/index.jsx rename to docs/app/components/playground/components/preview/index.jsx diff --git a/docs/app/components/preview/style.scss b/docs/app/components/playground/components/preview/style.scss similarity index 87% rename from docs/app/components/preview/style.scss rename to docs/app/components/playground/components/preview/style.scss index 3b60dc04..da45b841 100644 --- a/docs/app/components/preview/style.scss +++ b/docs/app/components/playground/components/preview/style.scss @@ -1,5 +1,5 @@ -@import "../globals"; -@import "../mixins"; +@import "../../../globals"; +@import "../../../mixins"; $preview-error-background: #f2777a; $preview-error-color: #fff; diff --git a/docs/app/components/playground/index.jsx b/docs/app/components/playground/index.jsx index e29cc2ee..a6b9aaa3 100644 --- a/docs/app/components/playground/index.jsx +++ b/docs/app/components/playground/index.jsx @@ -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 = { diff --git a/docs/app/components/playground/style.scss b/docs/app/components/playground/style.scss index 4b7f57e8..3540a3b4 100644 --- a/docs/app/components/playground/style.scss +++ b/docs/app/components/playground/style.scss @@ -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%; } } From 962b3214904aee51a4046106493e0f501dca1c7b Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Fri, 30 Oct 2015 15:23:36 +0700 Subject: [PATCH 4/5] Basic transition for Playground --- docs/app/components/_globals.scss | 5 +++++ .../layout/main/components/documentation.scss | 6 ++---- .../layout/main/components/drawer_components.scss | 4 +++- .../layout/main/components/drawer_playground.scss | 6 +++--- docs/app/components/layout/main/style.scss | 2 +- .../playground/components/editor/style.scss | 13 ++++++++----- 6 files changed, 22 insertions(+), 14 deletions(-) diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss index e8173d1c..116239d4 100644 --- a/docs/app/components/_globals.scss +++ b/docs/app/components/_globals.scss @@ -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; diff --git a/docs/app/components/layout/main/components/documentation.scss b/docs/app/components/layout/main/components/documentation.scss index 460bcb8e..203a0958 100644 --- a/docs/app/components/layout/main/components/documentation.scss +++ b/docs/app/components/layout/main/components/documentation.scss @@ -5,8 +5,6 @@ $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 { diff --git a/docs/app/components/layout/main/components/drawer_components.scss b/docs/app/components/layout/main/components/drawer_components.scss index a01e746e..b5fcd1e0 100644 --- a/docs/app/components/layout/main/components/drawer_components.scss +++ b/docs/app/components/layout/main/components/drawer_components.scss @@ -6,10 +6,11 @@ $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; flex-direction: column; background-color: $color-background; + transition: all $animation-duration $animation-ease; &:not(.active_drawer) { min-width: 0; max-width: 0; @@ -44,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); diff --git a/docs/app/components/layout/main/components/drawer_playground.scss b/docs/app/components/layout/main/components/drawer_playground.scss index 7f9bb1ea..adceebd6 100644 --- a/docs/app/components/layout/main/components/drawer_playground.scss +++ b/docs/app/components/layout/main/components/drawer_playground.scss @@ -1,10 +1,10 @@ @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-normal; - + z-index: $z-index-high; + background-color: $color-background; + transition: all $animation-duration $animation-ease; &:not(.active) { min-width: 0vw; max-width: 0vw; diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss index c50c167b..6168cbd4 100644 --- a/docs/app/components/layout/main/style.scss +++ b/docs/app/components/layout/main/style.scss @@ -12,7 +12,7 @@ $appbar-height: 11.2 * $unit; } .playground_button { - z-index: 1980; + z-index: $z-index-higher; position: absolute; right: $button-floating-height / 2; top: $appbar-height - ($button-floating-height / 2); diff --git a/docs/app/components/playground/components/editor/style.scss b/docs/app/components/playground/components/editor/style.scss index fc87be13..bf9fbc81 100644 --- a/docs/app/components/playground/components/editor/style.scss +++ b/docs/app/components/playground/components/editor/style.scss @@ -1,6 +1,8 @@ @import "../../../globals"; @import "../../../mixins"; +$documentation-code-background: rgba(0, 0, 0, .0588235); + .editor { position: relative; @@ -14,10 +16,11 @@ display: block; width: 100%; padding: 3px 7px; - font-size: 12px; - font-weight: bold; - color: #c2c0bc; - content: "Try Component"; - background: #f1ede4; + 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); } } From 19a49903532dc91ee8f1714de4c799609dfb38ca Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Fri, 30 Oct 2015 10:40:55 +0100 Subject: [PATCH 5/5] Restructure docs index --- docs/app/docs.jsx | 17 ----------------- docs/app/history.js | 2 -- docs/app/index.jsx | 23 ++++++++++++++++++++--- docs/app/routes.jsx | 20 -------------------- 4 files changed, 20 insertions(+), 42 deletions(-) delete mode 100644 docs/app/docs.jsx delete mode 100644 docs/app/history.js delete mode 100644 docs/app/routes.jsx diff --git a/docs/app/docs.jsx b/docs/app/docs.jsx deleted file mode 100644 index 0aecc72d..00000000 --- a/docs/app/docs.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Router from 'react-router'; -import routes from './routes'; - -const Docs = props => { - return ( - - {routes} - - ); -}; - -Docs.propTypes = { - history: React.PropTypes.object -}; - -export default Docs; diff --git a/docs/app/history.js b/docs/app/history.js deleted file mode 100644 index 94749b79..00000000 --- a/docs/app/history.js +++ /dev/null @@ -1,2 +0,0 @@ -import {createHashHistory} from 'history'; -export default createHashHistory(); diff --git a/docs/app/index.jsx b/docs/app/index.jsx index b24e8c7f..ebc00679 100644 --- a/docs/app/index.jsx +++ b/docs/app/index.jsx @@ -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(, 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(( + + + + + + + + + + +), document.getElementById('app')); diff --git a/docs/app/routes.jsx b/docs/app/routes.jsx deleted file mode 100644 index 18ebcacc..00000000 --- a/docs/app/routes.jsx +++ /dev/null @@ -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/playground'; -import Documentation from './components/layout/main/components/documentation'; - -const routes = ( - - - - - - - - -); - -export default routes;