From ef8de74e0b22ac3145a59f9426e1e54ab49c57b5 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Tue, 16 May 2017 11:25:54 -0400 Subject: [PATCH 1/4] Remove selected state from libraries, adding on first click --- src/components/library-item/library-item.css | 10 ++-------- src/components/library-item/library-item.jsx | 9 ++------- src/components/library/library.jsx | 15 ++------------- 3 files changed, 6 insertions(+), 28 deletions(-) diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css index e25c478d2..c702492f8 100644 --- a/src/components/library-item/library-item.css +++ b/src/components/library-item/library-item.css @@ -27,12 +27,6 @@ transform: scale(1.02, 1.02); } -.library-item.is-selected { - border-width: 2px; - border-color: #1dacf4; - transition: 0.25s ease-out; -} - .library-item-image-container { height: 100px; } @@ -47,12 +41,12 @@ margin: 0.25rem 0; text-align: center; - /* + /* For truncating overflowing text gracefully Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - min-width: 0; + min-width: 0; } diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx index 31e722b0e..6abe41b97 100644 --- a/src/components/library-item/library-item.jsx +++ b/src/components/library-item/library-item.jsx @@ -1,4 +1,3 @@ -const classNames = require('classnames'); const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); @@ -18,10 +17,7 @@ class LibraryItem extends React.Component { render () { return ( @@ -40,8 +36,7 @@ LibraryItem.propTypes = { iconURL: PropTypes.string.isRequired, id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, - onSelect: PropTypes.func.isRequired, - selected: PropTypes.bool.isRequired + onSelect: PropTypes.func.isRequired }; module.exports = LibraryItem; diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index 16327c10c..3be748703 100644 --- a/src/components/library/library.jsx +++ b/src/components/library/library.jsx @@ -11,19 +11,10 @@ class LibraryComponent extends React.Component { constructor (props) { super(props); bindAll(this, ['handleSelect']); - this.state = {selectedItem: null}; } handleSelect (id) { - if (this.state.selectedItem === id) { - // Double select: select as the library's value. - this.props.onRequestClose(); - this.props.onItemSelected(this.props.data[id]); - } else { - if (this.props.onItemChosen) { - this.props.onItemChosen(this.props.data[id]); - } - } - this.setState({selectedItem: id}); + this.props.onRequestClose(); + this.props.onItemSelected(this.props.data[id]); } render () { if (!this.props.visible) return null; @@ -45,7 +36,6 @@ class LibraryComponent extends React.Component { id={itemId} key={`item_${itemId}`} name={dataItem.name} - selected={this.state.selectedItem === itemId} onSelect={this.handleSelect} /> ); @@ -67,7 +57,6 @@ LibraryComponent.propTypes = { }) /* eslint-enable react/no-unused-prop-types, lines-around-comment */ ), - onItemChosen: PropTypes.func, onItemSelected: PropTypes.func, onRequestClose: PropTypes.func, title: PropTypes.string.isRequired, From 37425e4649dbc93610bb186fe246ea5851b32522 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Tue, 16 May 2017 11:54:04 -0400 Subject: [PATCH 2/4] Add hover hooks to libraries and hook up sound hover action --- src/components/library-item/library-item.jsx | 16 +++++++++++++++- src/components/library/library.jsx | 16 +++++++++++++++- src/containers/sound-library.jsx | 14 +++++++++++--- 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx index 6abe41b97..8e113c9be 100644 --- a/src/components/library-item/library-item.jsx +++ b/src/components/library-item/library-item.jsx @@ -8,17 +8,29 @@ const styles = require('./library-item.css'); class LibraryItem extends React.Component { constructor (props) { super(props); - bindAll(this, ['handleClick']); + bindAll(this, [ + 'handleClick', + 'handleMouseEnter', + 'handleMouseLeave' + ]); } handleClick (e) { this.props.onSelect(this.props.id); e.preventDefault(); } + handleMouseEnter () { + this.props.onMouseEnter(this.props.id); + } + handleMouseLeave () { + this.props.onMouseLeave(this.props.id); + } render () { return ( ); @@ -57,6 +69,8 @@ LibraryComponent.propTypes = { }) /* eslint-enable react/no-unused-prop-types, lines-around-comment */ ), + onItemMouseEnter: PropTypes.func, + onItemMouseLeave: PropTypes.func, onItemSelected: PropTypes.func, onRequestClose: PropTypes.func, title: PropTypes.string.isRequired, diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx index d478d141a..f267959a8 100644 --- a/src/containers/sound-library.jsx +++ b/src/containers/sound-library.jsx @@ -14,14 +14,18 @@ class SoundLibrary extends React.Component { super(props); bindAll(this, [ 'handleItemSelected', - 'handleItemChosen' + 'handleItemMouseEnter', + 'handleItemMouseLeave' ]); } componentDidMount () { this.audioEngine = new AudioEngine(); this.player = this.audioEngine.createPlayer(); } - handleItemChosen (soundItem) { + componentWillReceiveProps (newProps) { + if (this.player && !newProps.visible) this.player.stopAllSounds(); + } + handleItemMouseEnter (soundItem) { const md5ext = soundItem._md5; const idParts = md5ext.split('.'); const md5 = idParts[0]; @@ -39,6 +43,9 @@ class SoundLibrary extends React.Component { this.player.playSound(soundItem._md5); }); } + handleItemMouseLeave () { + this.player.stopAllSounds(); + } handleItemSelected (soundItem) { const vmSound = { format: soundItem.format, @@ -68,7 +75,8 @@ class SoundLibrary extends React.Component { data={soundLibraryThumbnailData} title="Sound Library" visible={this.props.visible} - onItemChosen={this.handleItemChosen} + onItemMouseEnter={this.handleItemMouseEnter} + onItemMouseLeave={this.handleItemMouseLeave} onItemSelected={this.handleItemSelected} onRequestClose={this.props.onRequestClose} /> From 0448ed0ac1d9215ce94cfd8bd16506ae39bf532c Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Tue, 16 May 2017 11:55:05 -0400 Subject: [PATCH 3/4] Rename Libary => Library --- src/containers/backdrop-library.jsx | 4 ++-- src/containers/costume-library.jsx | 4 ++-- src/containers/sound-library.jsx | 4 ++-- src/containers/sprite-library.jsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx index b19921b4c..62e9cd473 100644 --- a/src/containers/backdrop-library.jsx +++ b/src/containers/backdrop-library.jsx @@ -4,7 +4,7 @@ const React = require('react'); const VM = require('scratch-vm'); const backdropLibraryContent = require('../lib/libraries/backdrops.json'); -const LibaryComponent = require('../components/library/library.jsx'); +const LibraryComponent = require('../components/library/library.jsx'); class BackdropLibrary extends React.Component { @@ -26,7 +26,7 @@ class BackdropLibrary extends React.Component { } render () { return ( - Date: Tue, 16 May 2017 12:02:44 -0400 Subject: [PATCH 4/4] Add comment to explain edge case --- src/containers/sound-library.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx index 53aaf04da..53aa6bde0 100644 --- a/src/containers/sound-library.jsx +++ b/src/containers/sound-library.jsx @@ -23,6 +23,7 @@ class SoundLibrary extends React.Component { this.player = this.audioEngine.createPlayer(); } componentWillReceiveProps (newProps) { + // Stop playing sounds if the library closes without a mouseleave (e.g. by using the escape key) if (this.player && !newProps.visible) this.player.stopAllSounds(); } handleItemMouseEnter (soundItem) {