diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css
index 3d00662496134202e23248933958e7abf6481746..657bdf9be0d1448b5f7a2d91c94d08837dfbf3d8 100644
--- a/src/components/blocks/blocks.css
+++ b/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;
}
diff --git a/src/components/blocks/blocks.jsx b/src/components/blocks/blocks.jsx
index fa00102abe51ca1f8437caa83d5c9619e2789e85..786d060c1131bb201a401cc25b484318343eb91f 100644
--- a/src/components/blocks/blocks.jsx
+++ b/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;
diff --git a/src/components/box/box.css b/src/components/box/box.css
new file mode 100644
index 0000000000000000000000000000000000000000..9581e0c4233e88b6e0f7a458636a1b8e3891193c
--- /dev/null
+++ b/src/components/box/box.css
@@ -0,0 +1,4 @@
+.box {
+ display: flex;
+ position: relative;
+}
diff --git a/src/components/box/box.jsx b/src/components/box/box.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7afee654d82640fd901093a473612ef991a244ac
--- /dev/null
+++ b/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;
diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css
index b8000e48277db1b70c458db492e1ff21df36d1af..1931b2d2188d9a6525942bdac40051342ff2daef 100644
--- a/src/components/green-flag/green-flag.css
+++ b/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%);
}
diff --git a/src/components/green-flag/green-flag.jsx b/src/components/green-flag/green-flag.jsx
index f1b24b1516471c1cd650181c008df3a3b180c9d8..a5642641a89aab3efbebfdcb00789be10dda6d7d 100644
--- a/src/components/green-flag/green-flag.jsx
+++ b/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;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
deleted file mode 100644
index 78b6f009ac5791ea7b1e1ec0f40a635f68193d0d..0000000000000000000000000000000000000000
--- a/src/components/gui/gui.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.gui {
- position: absolute;
- top: 0;
- right: 4px;
- bottom: 0;
- left: 4px;
-}
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 31e5e6ae2d0e4d6a21c8bc9cf6d7ee985e647f8e..c929d9b4ee45d682d5b5536521eb0daf01265d18 100644
--- a/src/components/gui/gui.jsx
+++ b/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,7 +10,7 @@ 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 {
@@ -19,7 +18,6 @@ const GUIComponent = props => {
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;
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index ab3342835774064b2e75168829829eea6f711dfd..4d90f6147874728c8244e52736d2c572120717d3 100644
--- a/src/components/library-item/library-item.css
+++ b/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;
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 641f989da0ec694391014500cc99a30079ccb7d6..3e47a2beecde42cb7c22df5bf75bded1508f0c1a 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -2,6 +2,7 @@ const classNames = require('classnames');
const bindAll = require('lodash.bindall');
const React = require('react');
+const Box = require('../box/box.jsx');
const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
const styles = require('./library-item.css');
@@ -16,16 +17,20 @@ class LibraryItem extends React.Component {
}
render () {
return (
- <div
+ <Box
+ alignContent="center"
+ alignItems="center"
className={classNames({
[styles.libraryItem]: true,
[styles.isSelected]: this.props.selected
})}
+ direction="column"
+ width={140}
onClick={this.handleClick}
>
<CostumeCanvas url={this.props.iconURL} />
<p>{this.props.name}</p>
- </div>
+ </Box>
);
}
}
diff --git a/src/components/library/library.css b/src/components/library/library.css
index 02101f223974d00a9054bf5a83cd342ab08010ad..6fee04d977f5a29f0afb43cbbf456dbd8bdc0b9a 100644
--- a/src/components/library/library.css
+++ b/src/components/library/library.css
@@ -1,8 +1,3 @@
.library-scroll-grid {
- overflow: scroll;
- position: absolute;
- top: 70px;
- bottom: 20px;
- left: 30px;
- right: 30px;
+ overflow-y: auto;
}
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 043ece729151d4d6529fe74f468f2ac4b67efaf1..35374d7e03b4dd223811e1079ee8ce6e3f2e807b 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -1,6 +1,7 @@
const bindAll = require('lodash.bindall');
const React = require('react');
+const Box = require('../box/box.jsx');
const LibraryItem = require('../library-item/library-item.jsx');
const ModalComponent = require('../modal/modal.jsx');
@@ -27,7 +28,12 @@ class LibraryComponent extends React.Component {
onRequestClose={this.props.onRequestClose}
>
<h1>{this.props.title}</h1>
- <div className={styles.libraryScrollGrid}>
+ <Box
+ className={styles.libraryScrollGrid}
+ grow={1}
+ justifyContent="space-around"
+ wrap="wrap"
+ >
{this.props.data.map((dataItem, itemId) => {
const scratchURL = dataItem.md5 ?
`https://cdn.assets.scratch.mit.edu/internalapi/asset/${dataItem.md5}/get/` :
@@ -43,7 +49,7 @@ class LibraryComponent extends React.Component {
/>
);
})}
- </div>
+ </Box>
</ModalComponent>
);
}
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index b9cb8527b1d31d627de55b0d8bec120c42b61095..b050f13eb01127ae1be0be9e2182056d2def1112 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -10,7 +10,7 @@
.modal-content {
outline: none;
position: absolute;
- overflow: visible;
+ overflow: hidden;
-webkit-overflow-scrolling: 'touch';
border: 1px solid #ccc;
border-radius: 6px;
@@ -21,6 +21,11 @@
left: 5%;
background: #fcfcfc;
}
+.modal-children {
+ overflow: hidden;
+ height: 100%;
+ z-index: 0;
+}
.modal-close-button {
color: rgb(255, 255, 255);
background: rgb(50, 50, 50);
@@ -32,5 +37,6 @@
position: absolute;
right: 3px;
top: 3px;
- cursor: pointer
+ cursor: pointer;
+ z-index: 1;
}
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 3c36ba50921e50e8386f8be8e6ff56e53bc7793c..f41b61f1bf069965799423f1b895000078953471 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -1,6 +1,8 @@
const React = require('react');
const ReactModal = require('react-modal');
+const Box = require('../box/box.jsx');
+
const styles = require('./modal.css');
class ModalComponent extends React.Component {
@@ -19,7 +21,12 @@ class ModalComponent extends React.Component {
>
{'x'}
</div>
- {this.props.children}
+ <Box
+ className={styles.modalChildren}
+ direction="column"
+ >
+ {this.props.children}
+ </Box>
</ReactModal>
);
}
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index a7de0d93c864cde916db9cfbb91f4da8c6e17f79..ebcdd423b07fd20a47e4a7d6e04c383d99c1c209 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -1,11 +1,12 @@
const classNames = require('classnames');
const React = require('react');
+const Box = require('../box/box.jsx');
const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
const styles = require('./sprite-selector-item.css');
const SpriteSelectorItem = props => (
- <div
+ <Box
className={classNames({
[styles.spriteSelectorItem]: true,
[styles.isSelected]: props.selected
@@ -20,7 +21,7 @@ const SpriteSelectorItem = props => (
/>
) : null}
<div>{props.name}</div>
- </div>
+ </Box>
);
SpriteSelectorItem.propTypes = {
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
deleted file mode 100644
index 1eadc56d506fe17bad44bb1348d64fe54b124412..0000000000000000000000000000000000000000
--- a/src/components/sprite-selector/sprite-selector.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.sprite-selector {
- width: 400px;
-}
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 770e7ca6ffd08786257cb0808bc371aa85810dde..694a490fc51c49bd33e479bdd5daa493a233f620 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -1,9 +1,8 @@
const React = require('react');
+const Box = require('../box/box.jsx');
const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx');
-const styles = require('./sprite-selector.css');
-
const SpriteSelectorComponent = function (props) {
const {
onSelectSprite,
@@ -12,8 +11,11 @@ const SpriteSelectorComponent = function (props) {
...componentProps
} = props;
return (
- <div
- className={styles.spriteSelector}
+ <Box
+ alignContent="flex-start"
+ alignItems="flex-start"
+ justifyContent="flex-start"
+ wrap="wrap"
{...componentProps}
>
{Object.keys(sprites)
@@ -30,7 +32,7 @@ const SpriteSelectorComponent = function (props) {
/>
))
}
- </div>
+ </Box>
);
};
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 0981e0ebeeae4eef41fa4a2dc3965b64069aea21..e3cf8de6dcdd91e594a5bf98c6b292948808dad7 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -1,10 +1,5 @@
.stage-selector {
- position: absolute;
- top: 0;
- right: 0;
- width: 72px;
- border: 1px solid;
- border-color: transparent;
+ text-align: center;
}
.stage-selector.is-selected {
border-color: black;
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index db6b93e97c104c31d91a81d0ff0b0a31330548d5..e97cb38c3cbb6bb158a2fe2d3af2568c73918094 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -1,36 +1,47 @@
const classNames = require('classnames');
const React = require('react');
+const Box = require('../box/box.jsx');
const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
const styles = require('./stage-selector.css');
-const StageSelector = props => (
- <div
- className={classNames({
- [styles.stageSelector]: true,
- [styles.isSelected]: props.selected
- })}
- onClick={props.onClick}
- >
- <div>Stage</div>
- <div>Backgrounds</div>
- <div>{props.backdropCount}</div>
- <hr />
- {props.url ? (
- <CostumeCanvas
- height={42}
- url={props.url}
- width={50}
- />
- ) : null}
- </div>
-);
-
+const StageSelector = props => {
+ const {
+ backdropCount,
+ selected,
+ url,
+ onClick,
+ ...componentProps
+ } = props;
+ return (
+ <Box
+ alignItems="center"
+ className={classNames({
+ [styles.stageSelector]: true,
+ [styles.isSelected]: selected
+ })}
+ direction="column"
+ onClick={onClick}
+ {...componentProps}
+ >
+ <div>Stage</div>
+ <div>Backgrounds</div>
+ <div>{backdropCount}</div>
+ <hr />
+ {url ? (
+ <CostumeCanvas
+ height={42}
+ url={url}
+ width={50}
+ />
+ ) : null}
+ </Box>
+ );
+};
StageSelector.propTypes = {
backdropCount: React.PropTypes.number,
onClick: React.PropTypes.func,
selected: React.PropTypes.bool,
url: React.PropTypes.string
};
-
module.exports = StageSelector;
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
deleted file mode 100644
index 60d9f9a1023b2bda348bb08c01fc8eb8e88db516..0000000000000000000000000000000000000000
--- a/src/components/stage/stage.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.stage {
- position: absolute;
- top: 40px;
- right: 0;
-}
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index daf447999b67910517a2c63f3a99723e7c51ca9e..3607b52049bbcb35faef9ce4503db14af4f64aaf 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -1,39 +1,32 @@
const React = require('react');
-const styles = require('./stage.css');
-
-class StageComponent extends React.Component {
- render () {
- const {
- canvasRef,
- width,
- height,
- ...props
- } = this.props;
- return (
- <canvas
- className={styles.stage}
- ref={canvasRef}
- style={{
- width: width,
- height: height
- }}
- {...props}
- />
- );
- }
-}
+const Box = require('../box/box.jsx');
+const StageComponent = props => {
+ const {
+ canvasRef,
+ width,
+ height,
+ ...boxProps
+ } = props;
+ return (
+ <Box
+ componentRef={canvasRef}
+ element="canvas"
+ height={height}
+ width={width}
+ {...boxProps}
+ />
+ );
+};
StageComponent.propTypes = {
canvasRef: React.PropTypes.func,
height: React.PropTypes.number,
width: React.PropTypes.number
};
-
StageComponent.defaultProps = {
canvasRef: () => {},
width: 480,
height: 360
};
-
module.exports = StageComponent;
diff --git a/src/components/stop-all/stop-all.css b/src/components/stop-all/stop-all.css
index ff44af122de95cbf7344bece99700e37a5c895c1..227391698974774c4a30433cbbd80fcb2f3a4b7c 100644
--- a/src/components/stop-all/stop-all.css
+++ b/src/components/stop-all/stop-all.css
@@ -1,11 +1,7 @@
.stop-all {
- position: absolute;
- top: 8px;
- right: calc(480px - 16px - 12px - 16px);
width: 16px;
height: 16px;
}
-
-.active {
+.stop-all.is-active {
filter: saturate(200%) brightness(150%);
}
diff --git a/src/components/stop-all/stop-all.jsx b/src/components/stop-all/stop-all.jsx
index 8d0d8ccfb00004e4ec79c00b33e0e200ee98ebac..1c009de44bbf236523a5300d34ca791829dde1ef 100644
--- a/src/components/stop-all/stop-all.jsx
+++ b/src/components/stop-all/stop-all.jsx
@@ -15,7 +15,7 @@ const StopAllComponent = function (props) {
<img
className={classNames({
[styles.stopAll]: true,
- [styles.active]: active
+ [styles.isActive]: active
})}
src={stopAllIcon}
title={title}
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
deleted file mode 100644
index 626220df8b14442d1b05b38eb03122e3111d13a9..0000000000000000000000000000000000000000
--- a/src/components/target-pane/target-pane.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.target-pane {
- position: absolute;
- top: calc(40px + 360px + 8px);
- right: 0;
- width: 480px;
-}
-.target-pane-library-buttons {
- position: absolute;
- right: 0;
- top: 108px;
- width: 72px;
-}
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index 48883747aa4f27e5b440c92e221f4ea63356bfe9..cebd483128fdff867b4d1fde24cb15641c7d2be0 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -3,14 +3,13 @@ const React = require('react');
const MediaLibrary = require('../../lib/media-library');
const VM = require('scratch-vm');
+const Box = require('../box/box.jsx');
const BackdropLibrary = require('../../containers/backdrop-library.jsx');
const CostumeLibrary = require('../../containers/costume-library.jsx');
const SpriteLibrary = require('../../containers/sprite-library.jsx');
const SpriteSelectorComponent = require('../sprite-selector/sprite-selector.jsx');
const StageSelector = require('../../containers/stage-selector.jsx');
-const styles = require('./target-pane.css');
-
/*
* Pane that contains the sprite selector, sprite info, stage selector,
* and the new sprite, costume and backdrop buttons
@@ -37,49 +36,69 @@ const TargetPane = function (props) {
...componentProps
} = props;
return (
- <div
- className={styles.targetPane}
- {...componentProps}
- >
- <SpriteSelectorComponent
- selectedId={editingTarget}
- sprites={sprites}
- onSelectSprite={onSelectSprite}
- />
- <StageSelector
- backdropCount={stage.costumeCount}
- id={stage.id}
- selected={stage.id === editingTarget}
- url={stage.costume.skin}
- onSelect={onSelectSprite}
- />
- <p className={styles.targetPaneLibraryButtons}>
- <button onClick={onNewSpriteClick}>New Sprite</button>
- {editingTarget === stage.id ? (
- <button onClick={onNewBackdropClick}>New Backdrop</button>
- ) : (
- <button onClick={onNewCostumeClick}>New Costume</button>
- )}
- <SpriteLibrary
- mediaLibrary={mediaLibrary}
- visible={spriteLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseSpriteLibrary}
- />
- <CostumeLibrary
- mediaLibrary={mediaLibrary}
- visible={costumeLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseCostumeLibrary}
- />
- <BackdropLibrary
- mediaLibrary={mediaLibrary}
- visible={backdropLibraryVisible}
- vm={vm}
- onRequestClose={onRequestCloseBackdropLibrary}
+ <Box {...componentProps}>
+ <Box
+ alignContent="flex-start"
+ alignItems="flex-start"
+ grow={1}
+ style={{overflowY: 'auto'}}
+ >
+ <SpriteSelectorComponent
+ grow={1}
+ selectedId={editingTarget}
+ shrink={0}
+ sprites={sprites}
+ width="100%"
+ onSelectSprite={onSelectSprite}
/>
- </p>
- </div>
+ </Box>
+ <Box
+ direction="column"
+ shrink={0}
+ width={72}
+ >
+ {stage.id && <StageSelector
+ backdropCount={stage.costumeCount}
+ id={stage.id}
+ selected={stage.id === editingTarget}
+ shrink={0}
+ url={stage.costume.skin}
+ onSelect={onSelectSprite}
+ />}
+ <Box
+ alignContent="flex-start"
+ alignItems="flex-start"
+ direction="column"
+ grow={1}
+ shrink={0}
+ >
+ <button onClick={onNewSpriteClick}>New Sprite</button>
+ {editingTarget === stage.id ? (
+ <button onClick={onNewBackdropClick}>New Backdrop</button>
+ ) : (
+ <button onClick={onNewCostumeClick}>New Costume</button>
+ )}
+ <SpriteLibrary
+ mediaLibrary={mediaLibrary}
+ visible={spriteLibraryVisible}
+ vm={vm}
+ onRequestClose={onRequestCloseSpriteLibrary}
+ />
+ <CostumeLibrary
+ mediaLibrary={mediaLibrary}
+ visible={costumeLibraryVisible}
+ vm={vm}
+ onRequestClose={onRequestCloseCostumeLibrary}
+ />
+ <BackdropLibrary
+ mediaLibrary={mediaLibrary}
+ visible={backdropLibraryVisible}
+ vm={vm}
+ onRequestClose={onRequestCloseBackdropLibrary}
+ />
+ </Box>
+ </Box>
+ </Box>
);
};
const spriteShape = React.PropTypes.shape({
@@ -113,4 +132,8 @@ TargetPane.propTypes = {
vm: React.PropTypes.instanceOf(VM)
};
+TargetPane.defaultProps = {
+ mediaLibrary: new MediaLibrary()
+};
+
module.exports = TargetPane;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..9a6822326905bd2384c980412aac61463d791f6e
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,7 @@
+:global(html),
+:global(body),
+.app {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+}
diff --git a/src/index.jsx b/src/index.jsx
index 393cb95deec95510962b293282667b293b15a295..a91c27b1d1b3665ebdff91233d5f8a79104c1e63 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -8,6 +8,8 @@ const log = require('./lib/log');
const ProjectLoader = require('./lib/project-loader');
const reducer = require('./reducers/gui');
+const styles = require('./index.css');
+
class App extends React.Component {
constructor (props) {
super(props);
@@ -59,6 +61,7 @@ App.propTypes = {
};
const appTarget = document.createElement('div');
+appTarget.className = styles.app;
document.body.appendChild(appTarget);
const store = createStore(
reducer,
diff --git a/webpack.config.js b/webpack.config.js
index 3f5e68802968face09fed1809ae648f4720fbd2e..39376b7dff47d288878b9b81b7019b1f89fc7281 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -36,6 +36,7 @@ module.exports = {
loader: 'css',
query: {
modules: true,
+ importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64:5]',
camelCase: true
}
@@ -52,10 +53,15 @@ module.exports = {
loader: 'json-loader'
}]
},
- postcss: [autoprefixer],
+ postcss: [
+ autoprefixer({
+ browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']
+ })
+ ],
plugins: [
new webpack.DefinePlugin({
- 'process.env.BASE_PATH': '"' + (process.env.BASE_PATH || '/') + '"'
+ 'process.env.BASE_PATH': '"' + (process.env.BASE_PATH || '/') + '"',
+ 'process.env.DEBUG': Boolean(process.env.DEBUG)
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'lib',