diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css index f3a3655122e9aa806c505c4aecd78bdf0dbef73d..3a8ddba2676b2335b4f128133ac9180010e0ae1a 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.css +++ b/src/components/sprite-selector-item/sprite-selector-item.css @@ -49,3 +49,8 @@ white-space: nowrap; min-width: 0; } + +.sprite-delete-button { + background: red; + color: white; +} diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index 549faedf6f7fa647283d9960d2d1eac7fa56b947..8d2937fb5fa52f5209934dbbdd8b960c0e503864 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/src/components/sprite-selector-item/sprite-selector-item.jsx @@ -25,6 +25,12 @@ const SpriteSelectorItem = props => ( /> ) : null} <div className={styles.spriteName}>{props.name}</div> + <div + className={styles.spriteDeleteButton} + onClick={props.onDeleteButtonClick} + > + 𘅠+ </div> </Box> ); @@ -33,6 +39,7 @@ SpriteSelectorItem.propTypes = { costumeURL: React.PropTypes.string, name: React.PropTypes.string, onClick: React.PropTypes.func, + onDeleteButtonClick: React.PropTypes.func, selected: React.PropTypes.bool }; diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index e33ccaf29de3396f5d87ad5c012667fbf1d1f821..8d8ff9ca370bf980c171f5e626f2fbfb35a49970 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -13,6 +13,7 @@ const SpriteSelectorComponent = function (props) { onChangeSpriteVisibility, onChangeSpriteX, onChangeSpriteY, + onDeleteSprite, onSelectSprite, selectedId, sprites, @@ -59,6 +60,7 @@ const SpriteSelectorComponent = function (props) { name={sprites[id].name} selected={id === selectedId} onClick={onSelectSprite} + onDeleteButtonClick={onDeleteSprite} /> )) } @@ -75,6 +77,7 @@ SpriteSelectorComponent.propTypes = { onChangeSpriteVisibility: React.PropTypes.func, onChangeSpriteX: React.PropTypes.func, onChangeSpriteY: React.PropTypes.func, + onDeleteSprite: React.PropTypes.func, onSelectSprite: React.PropTypes.func, selectedId: React.PropTypes.string, sprites: React.PropTypes.shape({ diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index c918b034e85dde327b774f3a8528bc18267a1033..29bb8c7d46d7c3e731bbc7a8bd6fc936343022e6 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -43,6 +43,7 @@ class TargetPane extends React.Component { onChangeSpriteVisibility, onChangeSpriteX, onChangeSpriteY, + onDeleteSprite, onNewSpriteClick, onNewBackdropClick, onRequestCloseBackdropLibrary, @@ -69,6 +70,7 @@ class TargetPane extends React.Component { onChangeSpriteVisibility={onChangeSpriteVisibility} onChangeSpriteX={onChangeSpriteX} onChangeSpriteY={onChangeSpriteY} + onDeleteSprite={onDeleteSprite} onSelectSprite={onSelectSprite} /> <Box className={styles.stageSelectorWrapper}> @@ -150,6 +152,7 @@ TargetPane.propTypes = { onChangeSpriteVisibility: React.PropTypes.func, onChangeSpriteX: React.PropTypes.func, onChangeSpriteY: React.PropTypes.func, + onDeleteSprite: React.PropTypes.func, onNewBackdropClick: React.PropTypes.func, onNewSpriteClick: React.PropTypes.func, onRequestCloseBackdropLibrary: React.PropTypes.func, diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx index 9ea66dcf3c8650bf059dddcc54266ce837756ba5..a9e538f30d4f11a3d134d3ef6348dc4ed9f2b554 100644 --- a/src/containers/sprite-selector-item.jsx +++ b/src/containers/sprite-selector-item.jsx @@ -7,22 +7,31 @@ class SpriteSelectorItem extends React.Component { constructor (props) { super(props); bindAll(this, [ - 'handleClick' + 'handleClick', + 'handleDelete' ]); } handleClick (e) { e.preventDefault(); this.props.onClick(this.props.id); } + handleDelete () { + // eslint-disable-next-line no-alert + if (window.confirm('Are you sure you want to delete this sprite?')) { + this.props.onDeleteButtonClick(this.props.id); + } + } render () { const { id, // eslint-disable-line no-unused-vars onClick, // eslint-disable-line no-unused-vars + onDeleteButtonClick, // eslint-disable-line no-unused-vars ...props } = this.props; return ( <SpriteSelectorItemComponent onClick={this.handleClick} + onDeleteButtonClick={this.handleDelete} {...props} /> ); @@ -34,6 +43,7 @@ SpriteSelectorItem.propTypes = { id: React.PropTypes.string, name: React.PropTypes.string, onClick: React.PropTypes.func, + onDeleteButtonClick: React.PropTypes.func, selected: React.PropTypes.bool }; diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index 45033a72f921694de506834227caa532ee4a7c60..4afcfed2ceb55fcf22766a57bb93cea45c47e01d 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -23,6 +23,7 @@ class TargetPane extends React.Component { 'handleChangeSpriteVisibility', 'handleChangeSpriteX', 'handleChangeSpriteY', + 'handleDeleteSprite', 'handleSelectSprite' ]); } @@ -44,6 +45,9 @@ class TargetPane extends React.Component { handleChangeSpriteY (y) { this.props.vm.postSpriteInfo({y}); } + handleDeleteSprite (id) { + this.props.vm.deleteSprite(id); + } handleSelectSprite (id) { this.props.vm.setEditingTarget(id); } @@ -57,6 +61,7 @@ class TargetPane extends React.Component { onChangeSpriteVisibility={this.handleChangeSpriteVisibility} onChangeSpriteX={this.handleChangeSpriteX} onChangeSpriteY={this.handleChangeSpriteY} + onDeleteSprite={this.handleDeleteSprite} onSelectSprite={this.handleSelectSprite} /> );