From 610ce74c39ef7b2a0cbdc654c6457249ea2a2b32 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 9 Aug 2017 17:17:14 -0400
Subject: [PATCH] Move add sprite and backdrop to their correct containers

---
 .../icon--sprite.svg                          |  0
 .../sprite-selector/sprite-selector.css       |  8 ++++
 .../sprite-selector/sprite-selector.jsx       | 20 ++++++++++
 .../icon--backdrop.svg                        |  0
 .../stage-selector/stage-selector.css         |  9 +++++
 .../stage-selector/stage-selector.jsx         | 20 +++++++++-
 src/components/target-pane/icon--add.svg      |  1 -
 src/components/target-pane/target-pane.css    |  9 -----
 src/components/target-pane/target-pane.jsx    | 40 +------------------
 src/containers/stage-selector.jsx             | 11 ++++-
 src/containers/target-pane.jsx                |  5 ---
 11 files changed, 66 insertions(+), 57 deletions(-)
 rename src/components/{target-pane => sprite-selector}/icon--sprite.svg (100%)
 rename src/components/{target-pane => stage-selector}/icon--backdrop.svg (100%)
 delete mode 100644 src/components/target-pane/icon--add.svg

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 = (
+    <FormattedMessage
+        defaultMessage="Add Sprite"
+        description="Button to add a sprite in the target pane"
+        id="targetPane.addSprite"
+    />
+);
 
 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) {
                     }
                 </Box>
             </Box>
+            <IconButton
+                className={styles.addButton}
+                img={spriteIcon}
+                title={addSpriteMessage}
+                onClick={onNewSpriteClick}
+            />
         </Box>
     );
 };
@@ -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 = (
+    <FormattedMessage
+        defaultMessage="Add Backdrop"
+        description="Button to add a backdrop in the target pane"
+        id="targetPane.addBackdrop"
+    />
+);
 
 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 => {
                     <div className={styles.label}>Backdrops</div>
                     <div className={styles.count}>{backdropCount}</div>
                 </div>
-
+                <IconButton
+                    className={styles.addButton}
+                    img={backdropIcon}
+                    title={addBackdropMessage}
+                    onClick={onNewBackdropClick}
+                />
             </div>
         </Box>
     );
@@ -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 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.48 7.48"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>icon--add</title><line class="cls-1" x1="3.74" y1="6.48" x2="3.74" y2="1"/><line class="cls-1" x1="1" y1="3.74" x2="6.48" y2="3.74"/></svg>
\ 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 = (
-    <FormattedMessage
-        defaultMessage="Add Sprite"
-        description="Button to add a sprite in the target pane"
-        id="targetPane.addSprite"
-    />
-);
-
-const addBackdropMessage = (
-    <FormattedMessage
-        defaultMessage="Add Backdrop"
-        description="Button to add a backdrop in the target pane"
-        id="targetPane.addBackdrop"
-    />
-);
 
 /*
  * 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}
         />
         <Box className={styles.stageSelectorWrapper}>
@@ -94,22 +73,6 @@ const TargetPane = ({
                 onSelect={onSelectSprite}
             />}
             <Box>
-                <Box className={classNames(styles.addButtonWrapper, styles.addButtonWrapperSprite)}>
-                    <IconButton
-                        className={styles.addButton}
-                        img={spriteIcon}
-                        title={addSpriteMessage}
-                        onClick={onNewSpriteClick}
-                    />
-                </Box>
-                <Box className={classNames(styles.addButtonWrapper, styles.addButtonWrapperStage)}>
-                    <IconButton
-                        className={styles.addButton}
-                        img={backdropIcon}
-                        title={addBackdropMessage}
-                        onClick={onNewBackdropClick}
-                    />
-                </Box>
                 <SpriteLibrary
                     visible={spriteLibraryVisible}
                     vm={vm}
@@ -164,7 +127,6 @@ TargetPane.propTypes = {
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,
     onDeleteSprite: PropTypes.func,
-    onNewBackdropClick: PropTypes.func,
     onNewSpriteClick: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
     onRequestCloseCostumeLibrary: PropTypes.func,
diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx
index 1c2018584..83a5a1bb0 100644
--- a/src/containers/stage-selector.jsx
+++ b/src/containers/stage-selector.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {connect} from 'react-redux';
-
+import {openBackdropLibrary} from '../reducers/modals';
 import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx';
 
 class StageSelector extends React.Component {
@@ -44,7 +44,14 @@ const mapStateToProps = (state, {assetId}) => ({
     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());