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 | Bin
.../sprite-selector/sprite-selector.css | 8 ++++
.../sprite-selector/sprite-selector.jsx | 20 +++++++++
.../icon--backdrop.svg | Bin
.../stage-selector/stage-selector.css | 9 ++++
.../stage-selector/stage-selector.jsx | 20 ++++++++-
src/components/target-pane/icon--add.svg | Bin 361 -> 0 bytes
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(+), 56 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 9e5509e76a2296c93988ef8138eb61be814fb21a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 361
zcmZ{g!EVDK5JZ0k(KBE>QBx7jq38ZXg$yJ#1S~^?ttkKAbx5oB(93G{q?y@WkuC@1
zbdTTEVy5>NBdxL`L7mNmAz<^_ht%U^&Ld~6ltRmf#_7PirfC>NV03Y&yvDi54QkMi
zZeQ*LOQDTTQlz|iBkAB1X|L9K&qEAmpYjw>hCf+rADVa<%%Da-#m}IB!;k2~Us{~b
zN8XL|{w7#$5UloPm!Z!MF%Y7(7OVoXrlY~D1n1nBf#cd9Z|H7|(E{ojRtMJoFi<UK
W@;@hhXSLOU)m8(R?*MSF50YO1kZ}Y6
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());
--
GitLab