Merge pull request scratchfoundation#26 from rschamp/feature/layout

Pass for overall layout

src/components/blocks/blocks.css

@@ -1,7 +1,7 @@
-.blocks {
+.blocks :global(.injectionDiv){
     position: absolute;
-    top: 40px;
-    right: 500px;
+    top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
 }

src/components/blocks/blocks.jsx

@@ -1,25 +1,21 @@
 const React = require('react');
-
+const Box = require('../box/box.jsx');
 const styles = require('./blocks.css');
 
-class BlocksComponent extends React.Component {
-    render () {
-        const {
-            componentRef,
-            ...props
-        } = this.props;
-        return (
-            <div
-                className={styles.blocks}
-                ref={componentRef}
-                {...props}
-            />
-        );
-    }
-}
-
+const BlocksComponent = props => {
+    const {
+        componentRef,
+        ...componentProps
+    } = props;
+    return (
+        <Box
+            className={styles.blocks}
+            componentRef={componentRef}
+            {...componentProps}
+        />
+    );
+};
 BlocksComponent.propTypes = {
     componentRef: React.PropTypes.func
 };
-
 module.exports = BlocksComponent;

src/components/box/box.css

@@ -0,0 +1,4 @@
+.box {
+    display: flex;
+    position: relative;
+}

src/components/box/box.jsx

@@ -0,0 +1,119 @@
+const classNames = require('classnames');
+const React = require('react');
+const stylePropType = require('react-style-proptype');
+const styles = require('./box.css');
+
+const getRandomColor = (function () {
+    // In "DEBUG" mode this is used to output a random background color for each
+    // box. The function gives the same "random" set for each seed, allowing re-
+    // renders of the same content to give the same random display.
+    const random = (function (seed) {
+        let mW = seed;
+        let mZ = 987654321;
+        const mask = 0xffffffff;
+        return function () {
+            mZ = ((36969 * (mZ & 65535)) + (mZ >> 16)) & mask;
+            mW = ((18000 * (mW & 65535)) + (mW >> 16)) & mask;
+            let result = ((mZ << 16) + mW) & mask;
+            result /= 4294967296;
+            return result + 1;
+        };
+    }(601));
+    return function () {
+        const r = Math.max(parseInt(random() * 100, 10) % 256, 1);
+        const g = Math.max(parseInt(random() * 100, 10) % 256, 1);
+        const b = Math.max(parseInt(random() * 100, 10) % 256, 1);
+        return `rgb(${r},${g},${b})`;
+    };
+}());
+
+const Box = props => {
+    const {
+        alignContent,
+        alignItems,
+        alignSelf,
+        basis,
+        children,
+        className,
+        componentRef,
+        direction,
+        element,
+        grow,
+        height,
+        justifyContent,
+        width,
+        wrap,
+        shrink,
+        style,
+        ...componentProps
+    } = props;
+    return React.createElement(element, {
+        className: classNames(styles.box, className),
+        ref: componentRef,
+        style: Object.assign(
+            {
+                alignContent: alignContent,
+                alignItems: alignItems,
+                alignSelf: alignSelf,
+                flexBasis: basis,
+                flexDirection: direction,
+                flexGrow: grow,
+                flexShrink: shrink,
+                flexWrap: wrap,
+                justifyContent: justifyContent,
+                width: width,
+                height: height
+            },
+            process.env.DEBUG ? {
+                backgroundColor: getRandomColor(),
+                outline: `1px solid black`
+            } : {},
+            style
+        ),
+        ...componentProps
+    }, children);
+};
+Box.propTypes = {
+    alignContent: React.PropTypes.oneOf([
+        'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'
+    ]),
+    alignItems: React.PropTypes.oneOf([
+        'flex-start', 'flex-end', 'center', 'baseline', 'stretch'
+    ]),
+    alignSelf: React.PropTypes.oneOf([
+        'auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'
+    ]),
+    basis: React.PropTypes.oneOfType([
+        React.PropTypes.number,
+        React.PropTypes.oneOf(['auto'])
+    ]),
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    componentRef: React.PropTypes.func,
+    direction: React.PropTypes.oneOf([
+        'row', 'row-reverse', 'column', 'column-reverse'
+    ]),
+    element: React.PropTypes.string,
+    grow: React.PropTypes.number,
+    height: React.PropTypes.oneOfType([
+        React.PropTypes.number,
+        React.PropTypes.string
+    ]),
+    justifyContent: React.PropTypes.oneOf([
+        'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
+    ]),
+    shrink: React.PropTypes.number,
+    style: stylePropType,
+    width: React.PropTypes.oneOfType([
+        React.PropTypes.number,
+        React.PropTypes.string
+    ]),
+    wrap: React.PropTypes.oneOf([
+        'nowrap', 'wrap', 'wrap-reverse'
+    ])
+};
+Box.defaultProps = {
+    element: 'div',
+    style: {}
+};
+module.exports = Box;

src/components/green-flag/green-flag.css

@@ -1,11 +1,7 @@
 .green-flag {
-    position: absolute;
-    top: 8px;
-    right: calc(480px - 16px);
     width: 16px;
     height: 16px;
 }
-
-.active {
+.green-flag.is-active {
     filter: saturate(200%) brightness(150%);
 }

src/components/green-flag/green-flag.jsx

@@ -15,7 +15,7 @@ const GreenFlagComponent = function (props) {
         <img
             className={classNames({
                 [styles.greenFlag]: true,
-                [styles.active]: active
+                [styles.isActive]: active
             })}
             src={greenFlagIcon}
             title={title}
@@ -24,16 +24,13 @@ const GreenFlagComponent = function (props) {
         />
     );
 };
-
 GreenFlagComponent.propTypes = {
     active: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     title: React.PropTypes.string
 };
-
 GreenFlagComponent.defaultProps = {
     active: false,
     title: 'Go'
 };
-
 module.exports = GreenFlagComponent;

src/components/gui/gui.jsx

@@ -2,7 +2,6 @@ const defaultsDeep = require('lodash.defaultsdeep');
 const React = require('react');
 const VM = require('scratch-vm');
 
-const MediaLibrary = require('../../lib/media-library');
 const shapeFromPropTypes = require('../../lib/shape-from-prop-types');
 
 const Blocks = require('../../containers/blocks.jsx');
@@ -11,15 +10,14 @@ const TargetPane = require('../../containers/target-pane.jsx');
 const Stage = require('../../containers/stage.jsx');
 const StopAll = require('../../containers/stop-all.jsx');
 
-const styles = require('./gui.css');
+const Box = require('../box/box.jsx');
 
 const GUIComponent = props => {
     let {
         basePath,
         blocksProps,
         children,
         greenFlagProps,
-        mediaLibrary,
         targetPaneProps,
         stageProps,
         stopAllProps,
@@ -32,59 +30,88 @@ const GUIComponent = props => {
     });
     if (children) {
         return (
-            <div className={styles.gui}>
+            <Box>
                 {children}
-            </div>
+            </Box>
         );
     }
     return (
-        <div className={styles.gui}>
-            <GreenFlag
-                vm={vm}
-                {...greenFlagProps}
-            />
-            <StopAll
-                vm={vm}
-                {...stopAllProps}
-            />
-            <Stage
-                vm={vm}
-                {...stageProps}
-            />
-            <TargetPane
-                mediaLibrary={mediaLibrary}
-                vm={vm}
-                {...targetPaneProps}
-            />
-            <Blocks
-                vm={vm}
-                {...blocksProps}
-            />
-        </div>
+        <Box
+            grow={1}
+            height="100%"
+            style={{overflow: 'hidden'}}
+        >
+            <Box
+                direction="column"
+                grow={1}
+                shrink={0}
+                width={600}
+            >
+                <Box
+                    height={32}
+                    style={{
+                        marginTop: 8
+                    }}
+                />
+                <Blocks
+                    grow={1}
+                    vm={vm}
+                    {...blocksProps}
+                />
+            </Box>
+            <Box
+                direction="column"
+                shrink={0}
+                width={480}
+            >
+                <Box
+                    alignItems="center"
+                    height={32}
+                    shrink={0}
+                    style={{
+                        marginTop: 8
+                    }}
+                >
+                    <GreenFlag
+                        vm={vm}
+                        {...greenFlagProps}
+                    />
+                    <StopAll
+                        vm={vm}
+                        {...stopAllProps}
+                    />
+                </Box>
+                <Stage
+                    shrink={0}
+                    vm={vm}
+                    {...stageProps}
+                />
+                <TargetPane
+                    grow={1}
+                    vm={vm}
+                    {...targetPaneProps}
+                />
+            </Box>
+        </Box>
     );
 };
-
 GUIComponent.propTypes = {
     basePath: React.PropTypes.string,
     blocksProps: shapeFromPropTypes(Blocks.propTypes, {omit: ['vm']}),
     children: React.PropTypes.node,
     greenFlagProps: shapeFromPropTypes(GreenFlag.propTypes, {omit: ['vm']}),
-    mediaLibrary: React.PropTypes.instanceOf(MediaLibrary),
     stageProps: shapeFromPropTypes(Stage.propTypes, {omit: ['vm']}),
     stopAllProps: shapeFromPropTypes(StopAll.propTypes, {omit: ['vm']}),
     targetPaneProps: shapeFromPropTypes(TargetPane.propTypes, {omit: ['vm']}),
     vm: React.PropTypes.instanceOf(VM)
 };
-
 GUIComponent.defaultProps = {
     basePath: '/',
     blocksProps: {},
     greenFlagProps: {},
-    mediaLibrary: new MediaLibrary(),
     targetPaneProps: {},
     stageProps: {},
     stopAllProps: {},
     vm: new VM()
 };
-
 module.exports = GUIComponent;

src/components/library-item/library-item.css

@@ -1,10 +1,6 @@
 .library-item {
-    float: left;
-    width: 140px;
-    margin-left: 5px;
-    margin-right: 5px;
-    text-align: center;
     cursor: pointer;
+    text-align: center;
 }
 .library-item.is-selected {
     background: #aaa;