From 7f2e977d6854f1473ebbb072085b0132eca216c2 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 9 Mar 2017 10:21:19 -0500
Subject: [PATCH] Add unstyled delete button for sprites
---
.../sprite-selector-item/sprite-selector-item.css | 5 +++++
.../sprite-selector-item/sprite-selector-item.jsx | 7 +++++++
src/components/sprite-selector/sprite-selector.jsx | 3 +++
src/components/target-pane/target-pane.jsx | 3 +++
src/containers/sprite-selector-item.jsx | 12 +++++++++++-
src/containers/target-pane.jsx | 5 +++++
6 files changed, 34 insertions(+), 1 deletion(-)
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index f3a365512..3a8ddba26 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 549faedf6..8d2937fb5 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 e33ccaf29..8d8ff9ca3 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 c918b034e..29bb8c7d4 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 9ea66dcf3..a9e538f30 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 45033a72f..4afcfed2c 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}
/>
);
--
GitLab