merge

dist/modules/api/index.js

@@ -19,8 +19,13 @@ exports.default = {
   defaultState: {
     uiOptions: {
       name: 'REACT STORYBOOK',
+<<<<<<< HEAD
       url: 'https://github.com/storybooks/react-storybook',
       sortStoriesByKind: false
+=======
+      sortStoriesByKind: false,
+      url: 'https://github.com/storybooks/react-storybook'
+>>>>>>> ff5d73d52a1472f932251c1f9ee6e0762f424759
     }
   },
   load: function load(_ref, _actions) {

src/modules/ui/components/layout/dimensions.js

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { baseFonts } from '../theme';
+
+const container = {
+  position: 'absolute',
+  padding: 5,
+  bottom: 10,
+  right: 10,
+  backgroundColor: 'rgba(255, 255, 255, 0.5)',
+};
+
+const dimensionStyle = {
+  fontSize: 12,
+  ...baseFonts,
+};
+
+const delimeterStyle = {
+  margin: '0px 5px',
+  fontSize: 12,
+  ...baseFonts,
+};
+
+// Same as Chrome's timeout in the developer tools
+const DISPLAY_TIMEOUT = 1000;
+
+class Dimensions extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isVisible: false,
+    };
+
+    this._hideTimeout = null;
+  }
+
+  componentWillReceiveProps({ width, height }) {
+    if (width !== this.state.width || height !== this.state.height) {
+      this.onChange(width, height);
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._hideTimeout);
+  }
+
+  onChange(width, height) {
+    this.setState({ isVisible: true });
+
+    this._hideTimeout = setTimeout(() => {
+      // Ensure the dimensions aren't still changing
+      if (width === this.props.width && height === this.props.height) {
+        this.setState({ isVisible: false });
+      }
+    }, DISPLAY_TIMEOUT);
+  }
+
+  render() {
+    if (!this.state.isVisible) {
+      return null;
+    }
+
+    const {
+      width,
+      height,
+    } = this.props;
+
+    return (
+      <div style={container}>
+        <span style={dimensionStyle}>{`${width}px`}</span>
+        <span style={delimeterStyle}>x</span>
+        <span style={dimensionStyle}>{`${height}px`}</span>
+      </div>
+    );
+  }
+}
+
+Dimensions.propTypes = {
+  width: React.PropTypes.number.isRequired,
+  height: React.PropTypes.number.isRequired,
+};
+
+export default Dimensions;

src/modules/ui/components/layout/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import VSplit from './vsplit';
 import HSplit from './hsplit';
+import Dimensions from './dimensions';
 import SplitPane from '@kadira/react-split-pane';
 
 const rootStyle = {
@@ -55,7 +56,6 @@ const fullScreenPreviewStyle = {
   overflow: 'hidden',
 };
 
-
 const vsplit = <VSplit />;
 const hsplit = <HSplit />;
 
@@ -68,11 +68,49 @@ const onDragEnd = function () {
 };
 
 class Layout extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      previewPanelDimensions: {
+        height: 0,
+        width: 0,
+      },
+    };
+
+    this.onResize = this.onResize.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.onResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  }
+
+  onResize() {
+    const {
+      clientWidth,
+      clientHeight,
+    } = this.previewPanelRef;
+
+    this.setState({
+      previewPanelDimensions: {
+        width: clientWidth,
+        height: clientHeight,
+      },
+    });
+  }
+
   render() {
     const {
       goFullScreen, showLeftPanel, showDownPanel, downPanelInRight,
       downPanel, leftPanel, preview,
     } = this.props;
+    const {
+      previewPanelDimensions,
+    } = this.state;
 
     let previewStyle = normalPreviewStyle;
 
@@ -102,6 +140,7 @@ class Layout extends React.Component {
           resizerChildren={vsplit}
           onDragStarted={onDragStart}
           onDragFinished={onDragEnd}
+          onChange={this.onResize}
         >
           <div style={leftPanelStyle}>
             {showLeftPanel ? leftPanel() : null}
@@ -115,18 +154,16 @@ class Layout extends React.Component {
             resizerChildren={downPanelInRight ? vsplit : hsplit}
             onDragStarted={onDragStart}
             onDragFinished={onDragEnd}
-            onChange={
-              size => {
-                if (typeof localStorage !== 'undefined') {
-                  localStorage.setItem('splitPos', size);
-                }
-              }
-            }
+            onChange={this.onResize}
           >
             <div style={contentPanelStyle}>
-              <div style={previewStyle}>
+              <div
+                style={previewStyle}
+                ref={(ref) => { this.previewPanelRef = ref; }}
+              >
                 {preview()}
               </div>
+              <Dimensions {...previewPanelDimensions} />
             </div>
             <div style={downPanelStyle}>
               {showDownPanel ? downPanel() : null}