From 37803aa4d38bb055c4ac7b93f88be37b7cc5c983 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 21 Mar 2017 09:29:15 -0400
Subject: [PATCH] Add sound and costume tabs
---
package.json | 1 +
src/components/asset-panel/asset-panel.css | 18 +++
src/components/asset-panel/asset-panel.jsx | 23 ++++
.../icon--sound.svg} | Bin
src/components/asset-panel/selector.css | 38 +++++++
src/components/asset-panel/selector.jsx | 61 ++++++++++
src/components/blocks/blocks.css | 12 +-
src/components/gui/gui.css | 48 ++++++--
src/components/gui/gui.jsx | 51 +++++++--
src/containers/costume-tab.jsx | 98 ++++++++++++++++
src/containers/sound-library.jsx | 3 +-
src/containers/sound-tab.jsx | 107 ++++++++++++++++++
src/css/colors.css | 5 +-
13 files changed, 433 insertions(+), 32 deletions(-)
create mode 100644 src/components/asset-panel/asset-panel.css
create mode 100644 src/components/asset-panel/asset-panel.jsx
rename src/components/{target-pane/icon--sound-dark.svg => asset-panel/icon--sound.svg} (100%)
create mode 100644 src/components/asset-panel/selector.css
create mode 100644 src/components/asset-panel/selector.jsx
create mode 100644 src/containers/costume-tab.jsx
create mode 100644 src/containers/sound-tab.jsx
diff --git a/package.json b/package.json
index 41888d82b..9250d26e1 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"react-modal": "1.7.2",
"react-redux": "5.0.3",
"react-style-proptype": "2.0.1",
+ "react-tabs": "^0.8.2",
"redux": "3.6.0",
"redux-throttle": "0.1.1",
"scratch-audio": "latest",
diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css
new file mode 100644
index 000000000..8ff5ca4cb
--- /dev/null
+++ b/src/components/asset-panel/asset-panel.css
@@ -0,0 +1,18 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+.wrapper {
+ display: flex;
+ flex-grow: 1;
+ border: 1px solid $ui-pane-border;
+ border-top-right-radius: $space;
+ background: $ui-pane-gray;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 0.85rem;
+}
+
+.detail-area {
+ flex-grow: 1;
+ flex-shrink: 0;
+ border-left: 1px solid $ui-pane-border;
+}
diff --git a/src/components/asset-panel/asset-panel.jsx b/src/components/asset-panel/asset-panel.jsx
new file mode 100644
index 000000000..2d6ea710b
--- /dev/null
+++ b/src/components/asset-panel/asset-panel.jsx
@@ -0,0 +1,23 @@
+const React = require('react');
+
+const Box = require('../box/box.jsx');
+const Selector = require('./selector.jsx');
+const styles = require('./asset-panel.css');
+
+const AssetPanel = props => (
+ <Box className={styles.wrapper}>
+ <Selector
+ className={styles.selector}
+ {...props}
+ />
+ <Box className={styles.detailArea}>
+ {/* @todo editor area */}
+ </Box>
+ </Box>
+);
+
+AssetPanel.propTypes = {
+ ...Selector.propTypes
+};
+
+module.exports = AssetPanel;
diff --git a/src/components/target-pane/icon--sound-dark.svg b/src/components/asset-panel/icon--sound.svg
similarity index 100%
rename from src/components/target-pane/icon--sound-dark.svg
rename to src/components/asset-panel/icon--sound.svg
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
new file mode 100644
index 000000000..8964c9b13
--- /dev/null
+++ b/src/components/asset-panel/selector.css
@@ -0,0 +1,38 @@
+/* Need to use a fixed height for the new container to make list scrollable */
+$new-height: 60px;
+
+.wrapper {
+ width: 200px;
+ position: relative;
+}
+
+.new-item {
+ background: white;
+ border-bottom: 1px solid #ddd;
+ height: $new-height;
+ display: flex;
+ align-items: center;
+ padding-left: 1.75rem;
+ cursor: pointer;
+ font-size: 0.85rem;
+}
+
+.list-area {
+ position: absolute;
+ width: 100%;
+ top: 60px;
+ height: calc(100% - $new-height);
+ overflow-y: scroll;
+}
+
+.list-item {
+ width: 5rem;
+ min-height: 5rem;
+ margin: 1rem auto;
+}
+
+.delete-button {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+}
diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx
new file mode 100644
index 000000000..5250c3e7d
--- /dev/null
+++ b/src/components/asset-panel/selector.jsx
@@ -0,0 +1,61 @@
+const React = require('react');
+
+const SpriteSelectorItem = require('../sprite-selector-item/sprite-selector-item.jsx');
+const Box = require('../box/box.jsx');
+const styles = require('./selector.css');
+
+const Selector = props => {
+ const {
+ items,
+ newText,
+ selectedItemIndex,
+ onDeleteClick,
+ onItemClick,
+ onNewClick
+ } = props;
+
+ return (
+ <Box className={styles.wrapper}>
+ <Box
+ className={styles.newItem}
+ onClick={onNewClick}
+ >
+ {newText}
+ </Box>
+ <Box className={styles.listArea}>
+ {items.map((item, index) => {
+ const _onItemClick = () => onItemClick(item);
+ const _onDeleteClick = e => {
+ e.stopPropagation();
+ onDeleteClick(item);
+ };
+ return (
+ <SpriteSelectorItem
+ className={styles.listItem}
+ costumeURL={item.image}
+ key={`asset-${index}`}
+ name={item.name}
+ selected={index === selectedItemIndex}
+ onClick={_onItemClick}
+ onDeleteButtonClick={_onDeleteClick}
+ />
+ );
+ })}
+ </Box>
+ </Box>
+ );
+};
+
+Selector.propTypes = {
+ items: React.PropTypes.arrayOf(React.PropTypes.shape({
+ image: React.PropTypes.string,
+ name: React.PropTypes.string
+ })),
+ newText: React.PropTypes.string,
+ onDeleteClick: React.PropTypes.func,
+ onItemClick: React.PropTypes.func,
+ onNewClick: React.PropTypes.func,
+ selectedItemIndex: React.PropTypes.number
+};
+
+module.exports = Selector;
diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css
index 137a8f886..80689e48c 100644
--- a/src/components/blocks/blocks.css
+++ b/src/components/blocks/blocks.css
@@ -1,4 +1,7 @@
-$border-style: 1px solid #dbdbdb;
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+$border-style: 1px solid $ui-pane-border;
.blocks :global(.injectionDiv){
position: absolute;
@@ -7,12 +10,7 @@ $border-style: 1px solid #dbdbdb;
bottom: 0;
left: 0;
border: $border-style;
-
- /*
- @todo: using _space doesn't compute to the right amount?
- Related to `scratch-blocks`
- */
- border-top-right-radius: 0.75rem;
+ border-top-right-radius: $space;
}
.blocks :global(.blocklyMainBackground) {
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index e587122a7..43a0191b7 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -21,24 +21,48 @@
height: 100%;
}
-.blocks-wrapper {
- /*
- scratch-blocks is based on absolute positioning, which injects
- inside this element and becomes the child
- */
+.editor-wrapper {
+ flex-basis: 600px;
+ flex-grow: 1;
+ flex-shrink: 0;
position: relative;
- flex-basis: 600px;
+ display: flex;
+ flex-direction: column;
+}
+
+.tab-list {
+ height: $stage-menu-height;
+ display: flex;
+ align-items: flex-end;
+ flex-shrink: 0;
+
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 0.85rem;
+
+ /* Overrides for react-tabs styling */
+ margin: 0 0 0 1rem !important;
+ border-bottom: 0 !important;
+}
+
+.tabs {
+ position: relative;
flex-grow: 1;
flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+}
- /*
- Normally we'd use padding, but the absolute positioning ignores it,
- so use margin instead. Temporary, until tabs are inserted.
- */
- margin-top: $stage-menu-height;
+.tab-panel {
+ position: relative;
+ flex-grow: 1;
+ flex-shrink: 0;
+ display: flex;
+}
- background: #e8edf1;
+.blocks-wrapper {
+ flex-grow: 1;
+ position: relative;
}
.stage-and-target-wrapper {
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 36dbec0e2..a131ad40a 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -1,12 +1,14 @@
const React = require('react');
const VM = require('scratch-vm');
-
const Blocks = require('../../containers/blocks.jsx');
+const CostumeTab = require('../../containers/costume-tab.jsx');
const GreenFlag = require('../../containers/green-flag.jsx');
const TargetPane = require('../../containers/target-pane.jsx');
+const SoundTab = require('../../containers/sound-tab.jsx');
const Stage = require('../../containers/stage.jsx');
const StopAll = require('../../containers/stop-all.jsx');
const MenuBar = require('../menu-bar/menu-bar.jsx');
+const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
const Box = require('../box/box.jsx');
const styles = require('./gui.css');
@@ -25,6 +27,14 @@ const GUIComponent = props => {
</Box>
);
}
+
+ // @todo hack to resize blockly manually in case resize happened while hidden
+ const handleTabSelect = tabIndex => {
+ if (tabIndex === 0) {
+ setTimeout(() => window.dispatchEvent(new Event('resize')));
+ }
+ };
+
return (
<Box
className={styles.pageWrapper}
@@ -33,14 +43,35 @@ const GUIComponent = props => {
<MenuBar />
<Box className={styles.bodyWrapper}>
<Box className={styles.flexWrapper}>
- <Box className={styles.blocksWrapper}>
- <Blocks
- grow={1}
- options={{
- media: `${basePath}static/blocks-media/`
- }}
- vm={vm}
- />
+ <Box className={styles.editorWrapper}>
+ <Tabs
+ className={styles.tabs}
+ forceRenderTabPanel={true} // eslint-disable-line react/jsx-boolean-value
+ onSelect={handleTabSelect}
+ >
+ <TabList className={styles.tabList}>
+ <Tab>Scripts</Tab>
+ <Tab>Costumes</Tab>
+ <Tab>Sounds</Tab>
+ </TabList>
+ <TabPanel className={styles.tabPanel}>
+ <Box className={styles.blocksWrapper}>
+ <Blocks
+ grow={1}
+ options={{
+ media: `${basePath}static/blocks-media/`
+ }}
+ vm={vm}
+ />
+ </Box>
+ </TabPanel>
+ <TabPanel className={styles.tabPanel}>
+ <CostumeTab vm={vm} />
+ </TabPanel>
+ <TabPanel className={styles.tabPanel}>
+ <SoundTab vm={vm} />
+ </TabPanel>
+ </Tabs>
</Box>
<Box className={styles.stageAndTargetWrapper} >
@@ -48,7 +79,7 @@ const GUIComponent = props => {
<GreenFlag vm={vm} />
<StopAll vm={vm} />
</Box>
-
+
<Box className={styles.stageWrapper} >
<Stage
shrink={0}
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
new file mode 100644
index 000000000..0f569fcd4
--- /dev/null
+++ b/src/containers/costume-tab.jsx
@@ -0,0 +1,98 @@
+const React = require('react');
+const bindAll = require('lodash.bindall');
+
+const VM = require('scratch-vm');
+
+const AssetPanel = require('../components/asset-panel/asset-panel.jsx');
+
+const {connect} = require('react-redux');
+
+const {
+ openCostumeLibrary
+} = require('../reducers/modals');
+
+class CostumeTab extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleSelectCostume',
+ 'handleDeleteCostume'
+ ]);
+ this.state = {selectedCostumeIndex: 0};
+ }
+
+ handleSelectCostume (item) {
+ this.setState({selectedCostumeIndex: this.props.vm.editingTarget.getCostumeIndexByName(item.name)});
+ }
+
+ handleDeleteCostume (item) {
+ // @todo the VM should handle all of this logic
+ const {editingTarget} = this.props.vm;
+ const i = editingTarget.getCostumeIndexByName(item.name);
+
+ if (i === editingTarget.currentCostume) {
+ editingTarget.setCostume(i - 1);
+ }
+
+ editingTarget.sprite.costumes = editingTarget.sprite.costumes
+ .slice(0, i)
+ .concat(editingTarget.sprite.costumes.slice(i + 1));
+ this.props.vm.emitTargetsUpdate();
+ // @todo not sure if this is getting redrawn correctly
+ this.props.vm.runtime.requestRedraw();
+
+ this.setState({
+ selectedCostumeIndex: this.state.selectedCostumeIndex % editingTarget.sprite.costumes.length
+ });
+ }
+
+ render () {
+ const {
+ vm,
+ onNewCostumeClick
+ } = this.props;
+
+ const costumes = vm.editingTarget ? vm.editingTarget.sprite.costumes.map(costume => (
+ {
+ image: costume.skin,
+ name: costume.name
+ }
+ )) : [];
+
+ const addText = vm.editingTarget && vm.editingTarget.isStage ? 'Add Backdrop' : 'Add Costume';
+
+ return (
+ <AssetPanel
+ items={costumes}
+ newText={addText}
+ selectedItemIndex={this.state.selectedCostumeIndex}
+ onDeleteClick={this.handleDeleteCostume}
+ onItemClick={this.handleSelectCostume}
+ onNewClick={onNewCostumeClick}
+ />
+ );
+ }
+}
+
+CostumeTab.propTypes = {
+ ...AssetPanel.propTypes,
+ vm: React.PropTypes.instanceOf(VM)
+};
+
+const mapStateToProps = state => ({
+ editingTarget: state.targets.editingTarget,
+ sprites: state.targets.sprites,
+ costumeLibraryVisible: state.modals.costumeLibrary
+});
+
+const mapDispatchToProps = dispatch => ({
+ onNewCostumeClick: e => {
+ e.preventDefault();
+ dispatch(openCostumeLibrary());
+ }
+});
+
+module.exports = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(CostumeTab);
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
index 010f8e23e..4db5ee3ea 100644
--- a/src/containers/sound-library.jsx
+++ b/src/containers/sound-library.jsx
@@ -4,7 +4,8 @@ const VM = require('scratch-vm');
const AudioEngine = require('scratch-audio');
const LibaryComponent = require('../components/library/library.jsx');
-const soundIcon = require('../components/target-pane/icon--sound-dark.svg');
+
+const soundIcon = require('../components/asset-panel/icon--sound.svg');
const soundLibraryContent = require('../lib/libraries/sounds.json');
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
new file mode 100644
index 000000000..74578b590
--- /dev/null
+++ b/src/containers/sound-tab.jsx
@@ -0,0 +1,107 @@
+const React = require('react');
+const bindAll = require('lodash.bindall');
+
+const VM = require('scratch-vm');
+
+const AssetPanel = require('../components/asset-panel/asset-panel.jsx');
+const soundIcon = require('../components/asset-panel/icon--sound.svg');
+
+const {connect} = require('react-redux');
+
+const {
+ openSoundLibrary
+} = require('../reducers/modals');
+
+class SoundTab extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'getSoundIndexByName',
+ 'handleSelectSound',
+ 'handleDeleteSound'
+ ]);
+ this.state = {selectedSoundIndex: 0};
+ }
+
+ getSoundIndexByName (name) {
+ // @todo should be in VM
+ let i = -1;
+ this.props.vm.editingTarget.sprite.sounds.forEach((sound, soundIndex) => {
+ if (sound.name === name) {
+ i = soundIndex;
+ }
+ });
+ return i;
+ }
+
+ handleSelectSound (item) {
+ const selectedSoundIndex = this.getSoundIndexByName(item.name);
+ const sound = this.props.vm.editingTarget.sprite.sounds[selectedSoundIndex];
+ this.props.vm.editingTarget.audioPlayer.playSound(sound.md5);
+ this.setState({selectedSoundIndex});
+ }
+
+ handleDeleteSound (item) {
+ // @todo the VM should handle all of this logic
+ const {editingTarget} = this.props.vm;
+ const i = this.getSoundIndexByName(item.name);
+ editingTarget.sprite.sounds = editingTarget.sprite.sounds
+ .slice(0, i)
+ .concat(editingTarget.sprite.sounds.slice(i + 1));
+ this.props.vm.emitTargetsUpdate();
+ this.props.vm.runtime.requestRedraw();
+
+ this.setState({
+ selectedSoundIndex: this.state.selectedSoundIndex % editingTarget.sprite.sounds.length
+ });
+ }
+
+ render () {
+ const {
+ vm,
+ onNewSoundClick
+ } = this.props;
+
+ const sounds = vm.editingTarget ? vm.editingTarget.sprite.sounds.map(sound => (
+ {
+ image: soundIcon,
+ name: sound.name
+ }
+ )) : [];
+
+
+ return (
+ <AssetPanel
+ items={sounds}
+ newText={'Add Sound'}
+ selectedItemIndex={this.state.selectedSoundIndex}
+ onDeleteClick={this.handleDeleteSound}
+ onItemClick={this.handleSelectSound}
+ onNewClick={onNewSoundClick}
+ />
+ );
+ }
+}
+
+SoundTab.propTypes = {
+ ...AssetPanel.propTypes,
+ vm: React.PropTypes.instanceOf(VM)
+};
+
+const mapStateToProps = state => ({
+ editingTarget: state.targets.editingTarget,
+ sprites: state.targets.sprites,
+ soundLibraryVisible: state.modals.soundLibrary
+});
+
+const mapDispatchToProps = dispatch => ({
+ onNewSoundClick: e => {
+ e.preventDefault();
+ dispatch(openSoundLibrary());
+ }
+});
+
+module.exports = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(SoundTab);
diff --git a/src/css/colors.css b/src/css/colors.css
index 03bf83a7a..c223ea39e 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -1,2 +1,3 @@
-$ui-pane-gray: #f9f9f9;
-$blue: #4c97ff;
+$ui-pane-border: #D9D9D9;
+$ui-pane-gray: #F9F9F9;
+$blue: #4C97FF;
--
GitLab