diff --git a/src/components/target-pane/icon--sprite.svg b/src/components/sprite-selector/icon--sprite.svg
similarity index 100%
rename from src/components/target-pane/icon--sprite.svg
rename to src/components/sprite-selector/icon--sprite.svg
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 4f896df22..496d19588 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -59,3 +59,11 @@
padding-right: calc($space / 2);
padding-bottom: $space;
}
+
+.add-button {
+ font-size: 0.55rem;
+ font-weight: bold;
+ position: absolute;
+ bottom: 0.5rem;
+ right: 0.5rem;
+}
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 6fc0a5bbc..399d8062b 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -1,10 +1,22 @@
import PropTypes from 'prop-types';
import React from 'react';
+import {FormattedMessage} from 'react-intl';
import Box from '../box/box.jsx';
import SpriteInfo from '../../containers/sprite-info.jsx';
import SpriteSelectorItem from '../../containers/sprite-selector-item.jsx';
+import IconButton from '../icon-button/icon-button.jsx';
+
import styles from './sprite-selector.css';
+import spriteIcon from './icon--sprite.svg';
+
+const addSpriteMessage = (
+
+);
const SpriteSelectorComponent = function (props) {
const {
@@ -15,6 +27,7 @@ const SpriteSelectorComponent = function (props) {
onChangeSpriteX,
onChangeSpriteY,
onDeleteSprite,
+ onNewSpriteClick,
onSelectSprite,
selectedId,
sprites,
@@ -69,6 +82,12 @@ const SpriteSelectorComponent = function (props) {
}
+
);
};
@@ -81,6 +100,7 @@ SpriteSelectorComponent.propTypes = {
onChangeSpriteX: PropTypes.func,
onChangeSpriteY: PropTypes.func,
onDeleteSprite: PropTypes.func,
+ onNewSpriteClick: PropTypes.func,
onSelectSprite: PropTypes.func,
selectedId: PropTypes.string,
sprites: PropTypes.shape({
diff --git a/src/components/target-pane/icon--backdrop.svg b/src/components/stage-selector/icon--backdrop.svg
similarity index 100%
rename from src/components/target-pane/icon--backdrop.svg
rename to src/components/stage-selector/icon--backdrop.svg
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index e83601923..f3f01a5eb 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -99,3 +99,12 @@ $border-width: 2px;
width: 100%;
user-select: none;
}
+
+.add-button {
+ font-size: 0.55rem;
+ font-weight: bold;
+ text-align: center;
+ position: absolute;
+ bottom: 0.5rem;
+ left: 0.25rem;
+}
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index 09ddb9a23..ec5fbb36d 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -1,10 +1,21 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
+import {FormattedMessage} from 'react-intl';
import Box from '../box/box.jsx';
+import IconButton from '../icon-button/icon-button.jsx';
import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
import styles from './stage-selector.css';
+import backdropIcon from './icon--backdrop.svg';
+
+const addBackdropMessage = (
+
+);
const StageSelector = props => {
const {
@@ -12,6 +23,7 @@ const StageSelector = props => {
selected,
url,
onClick,
+ onNewBackdropClick,
...componentProps
} = props;
return (
@@ -41,7 +53,12 @@ const StageSelector = props => {
Backdrops
{backdropCount}
-
+
);
@@ -50,6 +67,7 @@ const StageSelector = props => {
StageSelector.propTypes = {
backdropCount: PropTypes.number.isRequired,
onClick: PropTypes.func,
+ onNewBackdropClick: PropTypes.func,
selected: PropTypes.bool.isRequired,
url: PropTypes.string
};
diff --git a/src/components/target-pane/icon--add.svg b/src/components/target-pane/icon--add.svg
deleted file mode 100644
index 9e5509e76..000000000
--- a/src/components/target-pane/icon--add.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
index 3f1ef0943..380200ff5 100644
--- a/src/components/target-pane/target-pane.css
+++ b/src/components/target-pane/target-pane.css
@@ -23,12 +23,3 @@
cursor: pointer;
user-select: none;
}
-
-.add-button {
- font-size: 0.55rem;
- font-weight: bold;
-}
-
-/* @todo: This is hacky. Better: move buttons in their corresponding panes, and set values relatively */
-.add-button-wrapper--sprite { right: 7rem; }
-.add-button-wrapper--stage { right: 0.8rem; }
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index ecfc3e4f5..a88a994a0 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -1,7 +1,5 @@
-import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
-import {FormattedMessage} from 'react-intl';
import VM from 'scratch-vm';
@@ -12,27 +10,8 @@ import SoundLibrary from '../../containers/sound-library.jsx';
import SpriteLibrary from '../../containers/sprite-library.jsx';
import SpriteSelectorComponent from '../sprite-selector/sprite-selector.jsx';
import StageSelector from '../../containers/stage-selector.jsx';
-import IconButton from '../icon-button/icon-button.jsx';
import styles from './target-pane.css';
-import spriteIcon from './icon--sprite.svg';
-import backdropIcon from './icon--backdrop.svg';
-
-const addSpriteMessage = (
-
-);
-
-const addBackdropMessage = (
-
-);
/*
* Pane that contains the sprite selector, sprite info, stage selector,
@@ -54,7 +33,6 @@ const TargetPane = ({
onChangeSpriteY,
onDeleteSprite,
onNewSpriteClick,
- onNewBackdropClick,
onRequestCloseBackdropLibrary,
onRequestCloseCostumeLibrary,
onRequestCloseSoundLibrary,
@@ -80,6 +58,7 @@ const TargetPane = ({
onChangeSpriteX={onChangeSpriteX}
onChangeSpriteY={onChangeSpriteY}
onDeleteSprite={onDeleteSprite}
+ onNewSpriteClick={onNewSpriteClick}
onSelectSprite={onSelectSprite}
/>
@@ -94,22 +73,6 @@ const TargetPane = ({
onSelect={onSelectSprite}
/>}
-
-
-
-
-
-
({
url: assetId && state.vm.runtime.storage.get(assetId).encodeDataURI()
});
+const mapDispatchToProps = dispatch => ({
+ onNewBackdropClick: e => {
+ e.preventDefault();
+ dispatch(openBackdropLibrary());
+ }
+});
+
export default connect(
mapStateToProps,
- () => ({}) // omit dispatch prop
+ mapDispatchToProps
)(StageSelector);
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index 3445e49ef..9b70a79d4 100644
--- a/src/containers/target-pane.jsx
+++ b/src/containers/target-pane.jsx
@@ -4,7 +4,6 @@ import React from 'react';
import {connect} from 'react-redux';
import {
- openBackdropLibrary,
openSpriteLibrary,
closeBackdropLibrary,
closeCostumeLibrary,
@@ -95,10 +94,6 @@ const mapStateToProps = state => ({
backdropLibraryVisible: state.modals.backdropLibrary
});
const mapDispatchToProps = dispatch => ({
- onNewBackdropClick: e => {
- e.preventDefault();
- dispatch(openBackdropLibrary());
- },
onNewSpriteClick: e => {
e.preventDefault();
dispatch(openSpriteLibrary());