-
React Storybook
-
+
+
React Storybook
+
+
{kindNames.map(this.renderKind.bind(this))}
diff --git a/src/client/ui/layout.js b/src/client/ui/layout.js
index d4a3e0469f01..9324f3caeef0 100644
--- a/src/client/ui/layout.js
+++ b/src/client/ui/layout.js
@@ -1,62 +1,66 @@
import React from 'react';
-class Layout extends React.Component {
- componentWillMount() {
- this.updateHeight();
- }
-
- componentDidMount() {
- window.addEventListener('resize', this.updateHeight.bind(this));
- }
-
- updateHeight() {
- const { documentElement, body } = document;
- let height = documentElement.clientHeight || body.clientHeight;
- height -= 20;
- this.setState({ height });
- }
+import VSplit from './layout_vsplit';
+import HSplit from './layout_hsplit';
+import SplitPane from '@mnmtanish/react-split-pane';
+class Layout extends React.Component {
render() {
const { controls, preview, actionLogger } = this.props;
- const { height } = this.state;
const rootStyles = {
- height,
- padding: 8,
+ height: '100vh',
backgroundColor: '#F7F7F7',
};
+
const controlsStyle = {
- width: 240,
- float: 'left',
+ position: 'absolute',
+ width: '100%',
height: '100%',
- overflowY: 'auto',
};
const actionStyle = {
- height: 150,
- marginLeft: 250,
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ padding: '5px 10px 10px 0',
+ boxSizing: 'border-box',
};
const previewStyle = {
- height: height - actionStyle.height - 25,
- marginLeft: 250,
- border: '1px solid #ECECEC',
- borderRadius: 4,
- padding: 5,
- backgroundColor: '#FFF',
+ position: 'absolute',
+ width: '100%',
+ height: '100%',
+ padding: '10px 10px 10px 0',
+ boxSizing: 'border-box',
+ };
+
+ const vsplit =
;
+ const hsplit =
;
+
+ const onDragStart = function () {
+ document.body.classList.add('dragging');
+ };
+
+ const onDragEnd = function () {
+ document.body.classList.remove('dragging');
};
return (
-
- {controls}
-
-
- {preview}
-
-
- {actionLogger}
-
+
+
+ {controls}
+
+
+
+ {preview}
+
+
+ {actionLogger}
+
+
+
);
}
diff --git a/src/client/ui/layout_hsplit.js b/src/client/ui/layout_hsplit.js
new file mode 100644
index 000000000000..4c603a30bb9b
--- /dev/null
+++ b/src/client/ui/layout_hsplit.js
@@ -0,0 +1,38 @@
+import React, { Component, PropTypes } from 'react';
+
+class HSplit extends Component {
+ constructor(...args) {
+ super(...args);
+ this.state = {};
+ }
+
+ render() {
+ const wrapStyle = {
+ cursor: 'row-resize',
+ width: '100%',
+ height: '10px',
+ marginTop: '-10px',
+ marginBottom: '-10px',
+ position: 'relative',
+ };
+
+ const spanStyle = {
+ height: '1px',
+ width: '20px',
+ top: '5px',
+ left: '50%',
+ marginLeft: '-10px',
+ position: 'absolute',
+ borderTop: 'solid 1px rgba(0,0,0,0.1)',
+ borderBottom: 'solid 1px rgba(0,0,0,0.1)',
+ };
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default HSplit;
diff --git a/src/client/ui/layout_vsplit.js b/src/client/ui/layout_vsplit.js
new file mode 100644
index 000000000000..7826f900987d
--- /dev/null
+++ b/src/client/ui/layout_vsplit.js
@@ -0,0 +1,37 @@
+import React, { Component, PropTypes } from 'react';
+
+class VSplit extends Component {
+ constructor(...args) {
+ super(...args);
+ this.state = {};
+ }
+
+ render() {
+ const wrapStyle = {
+ cursor: 'col-resize',
+ height: '100%',
+ width: '20px',
+ marginLeft: '-10px',
+ position: 'relative',
+ };
+
+ const spanStyle = {
+ width: '1px',
+ height: '20px',
+ right: '5px',
+ top: '50%',
+ marginTop: '-10px',
+ position: 'absolute',
+ borderLeft: 'solid 1px rgba(0,0,0,0.1)',
+ borderRight: 'solid 1px rgba(0,0,0,0.1)',
+ };
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default VSplit;
diff --git a/src/server/index.html.js b/src/server/index.html.js
index 2ad8e0720c2c..8375d7743b7c 100644
--- a/src/server/index.html.js
+++ b/src/server/index.html.js
@@ -9,6 +9,16 @@ export default function () {
+