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 4f896df2278424fbda5f1819b26e423c50b16cfb..496d19588341fa4b7ae87bef8389b171d1efb9fb 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 6fc0a5bbc99b18ce1a992adfe3ba9c41bca6283a..399d8062b4253cac9f9c77bc1a31abac0e0522f1 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 e836019236961d94a8fec962ec5e68841d165b97..f3f01a5eb6e86a2959673ebb32653c1792a851e9 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 09ddb9a23d6a54f4c6c1307314f4a09364746c15..ec5fbb36d2d6d387c0477a1aa55d8a0ccc0a1459 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 9e5509e76a2296c93988ef8138eb61be814fb21a..0000000000000000000000000000000000000000 Binary files a/src/components/target-pane/icon--add.svg and /dev/null differ diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css index 3f1ef0943d74984e7abfe2ded63608497f50da9b..380200ff52503aef919dad684d0d75e1989e06f4 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 ecfc3e4f5370dbf752e757914c6b253512698a3a..a88a994a0cc5229426e80ac1285bfa044268051d 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 1c2018584c7f83a51ec13179f2517ed148edd310..83a5a1bb06fb2bfcdc8df0c58e3488bc1686ffcf 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 3445e49efe91a9f43e60f28e958068e8d5a3e5ee..9b70a79d4a3305ce3955c9f38442034faf479cb3 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());