diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx index 073ca257c15bfe735bafb67ce25966e69a3dfb40..8016caecab1691294f6f6b47842bf113216a567a 100644 --- a/src/components/stage-selector/stage-selector.jsx +++ b/src/components/stage-selector/stage-selector.jsx @@ -94,12 +94,12 @@ const StageSelector = props => { }, { title: intl.formatMessage(messages.addBackdropFromSurprise), img: surpriseIcon, - onClick: onSurpriseBackdropClick // TODO NEED REAL FUNCTION + onClick: onSurpriseBackdropClick }, { title: intl.formatMessage(messages.addBackdropFromPaint), img: paintIcon, - onClick: onEmptyBackdropClick // TODO NEED REAL FUNCTION + onClick: onEmptyBackdropClick } ]} title={intl.formatMessage(messages.addBackdropFromLibrary)} diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index 1044073a1cc18b438633e487019d03f2d10065e4..7cc7a1ed25963029ea60a6fd3decfb69c52722df 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -4,7 +4,6 @@ import React from 'react'; import VM from 'scratch-vm'; import SpriteLibrary from '../../containers/sprite-library.jsx'; -import BackdropLibrary from '../../containers/backdrop-library.jsx'; import SpriteSelectorComponent from '../sprite-selector/sprite-selector.jsx'; import StageSelector from '../../containers/stage-selector.jsx'; @@ -17,7 +16,6 @@ import styles from './target-pane.css'; * @returns {React.Component} rendered component */ const TargetPane = ({ - backdropLibraryVisible, editingTarget, hoveredTarget, spriteLibraryVisible, @@ -33,7 +31,6 @@ const TargetPane = ({ onSurpriseSpriteClick, onPaintSpriteClick, onRequestCloseSpriteLibrary, - onRequestCloseBackdropLibrary, onSelectSprite, raiseSprites, stage, @@ -83,12 +80,6 @@ const TargetPane = ({ onRequestClose={onRequestCloseSpriteLibrary} /> ) : null} - {backdropLibraryVisible ? ( - <BackdropLibrary - vm={vm} - onRequestClose={onRequestCloseBackdropLibrary} - /> - ) : null} </div> </div> </div> @@ -113,7 +104,6 @@ const spriteShape = PropTypes.shape({ }); TargetPane.propTypes = { - backdropLibraryVisible: PropTypes.bool, editingTarget: PropTypes.string, extensionLibraryVisible: PropTypes.bool, hoveredTarget: PropTypes.shape({ @@ -130,7 +120,6 @@ TargetPane.propTypes = { onDuplicateSprite: PropTypes.func, onNewSpriteClick: PropTypes.func, onPaintSpriteClick: PropTypes.func, - onRequestCloseBackdropLibrary: PropTypes.func, onRequestCloseExtensionLibrary: PropTypes.func, onRequestCloseSpriteLibrary: PropTypes.func, onSelectSprite: PropTypes.func, diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx index e6b7d4d39f6577bf7e2bc967065a030008956848..68f373ece16c7181c259a7b0c35db5d2442752b1 100644 --- a/src/containers/backdrop-library.jsx +++ b/src/containers/backdrop-library.jsx @@ -47,7 +47,7 @@ class BackdropLibrary extends React.Component { } BackdropLibrary.propTypes = { - onNewBackdrop: PropTypes.func, + onNewBackdrop: PropTypes.func.isRequired, onRequestClose: PropTypes.func, vm: PropTypes.instanceOf(VM).isRequired }; diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index 7778e10b4297e65f794b5e76e5425b5b16ca4edf..3668a94fb1bc57fc86f19beb97f3f2bd9af86371 100644 --- a/src/containers/costume-tab.jsx +++ b/src/containers/costume-tab.jsx @@ -7,10 +7,12 @@ import VM from 'scratch-vm'; import AssetPanel from '../components/asset-panel/asset-panel.jsx'; import PaintEditorWrapper from './paint-editor-wrapper.jsx'; import CostumeLibrary from './costume-library.jsx'; +import BackdropLibrary from './backdrop-library.jsx'; import {connect} from 'react-redux'; import { closeCostumeLibrary, + closeBackdropLibrary, openCostumeLibrary, openBackdropLibrary } from '../reducers/modals'; @@ -167,7 +169,9 @@ class CostumeTab extends React.Component { intl, onNewLibraryBackdropClick, onNewLibraryCostumeClick, + backdropLibraryVisible, costumeLibraryVisible, + onRequestCloseBackdropLibrary, onRequestCloseCostumeLibrary, ...props } = this.props; @@ -236,6 +240,13 @@ class CostumeTab extends React.Component { onRequestClose={onRequestCloseCostumeLibrary} /> ) : null} + {backdropLibraryVisible ? ( + <BackdropLibrary + vm={vm} + onNewBackdrop={this.handleNewCostume} + onRequestClose={onRequestCloseBackdropLibrary} + /> + ) : null} </AssetPanel> ); } @@ -284,6 +295,9 @@ const mapDispatchToProps = dispatch => ({ e.preventDefault(); dispatch(openCostumeLibrary()); }, + onRequestCloseBackdropLibrary: () => { + dispatch(closeBackdropLibrary()); + }, onRequestCloseCostumeLibrary: () => { dispatch(closeCostumeLibrary()); } diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx index 27075cef8afb92f04a664ee0ae3c1e8d43930b61..bf749c12a08fa7d997e484aa19b98d252e2a9d30 100644 --- a/src/containers/stage-selector.jsx +++ b/src/containers/stage-selector.jsx @@ -38,7 +38,9 @@ class StageSelector extends React.Component { handleSurpriseBackdrop () { // @todo should this not add a backdrop you already have? const item = backdropLibraryContent[Math.floor(Math.random() * backdropLibraryContent.length)]; - this.addBackdropFromLibraryItem(item); + this.addBackdropFromLibraryItem(item).then(() => { + this.props.onActivateTab(COSTUMES_TAB_INDEX); + }); } handleEmptyBackdrop () { // @todo this is brittle, will need to be refactored for localized libraries @@ -83,6 +85,7 @@ const mapStateToProps = (state, {assetId}) => ({ const mapDispatchToProps = dispatch => ({ onNewBackdropClick: e => { e.preventDefault(); + dispatch(activateTab(COSTUMES_TAB_INDEX)); dispatch(openBackdropLibrary()); }, onActivateTab: tabIndex => { diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index 889d84185ad94b7debf94c9c429b51194ab5af82..e2bad31b7c2f487df13ec18c7955b77ce88502fd 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -5,7 +5,6 @@ import {connect} from 'react-redux'; import { openSpriteLibrary, - closeBackdropLibrary, closeSpriteLibrary } from '../reducers/modals'; @@ -132,8 +131,7 @@ const mapStateToProps = state => ({ }, {}), stage: state.targets.stage, raiseSprites: state.blockDrag, - spriteLibraryVisible: state.modals.spriteLibrary, - backdropLibraryVisible: state.modals.backdropLibrary + spriteLibraryVisible: state.modals.spriteLibrary }); const mapDispatchToProps = dispatch => ({ onNewSpriteClick: e => { @@ -143,9 +141,6 @@ const mapDispatchToProps = dispatch => ({ onRequestCloseSpriteLibrary: () => { dispatch(closeSpriteLibrary()); }, - onRequestCloseBackdropLibrary: () => { - dispatch(closeBackdropLibrary()); - }, onActivateTab: tabIndex => { dispatch(activateTab(tabIndex)); },