Merge pull request #1547 from fsih/backdropLoad

Move backdrop library back to costumes tab

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)}

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,

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
 };

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());
     }

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 => {

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));
     },