diff --git a/package.json b/package.json index 299fcd8d8..728c99a03 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "react": "15.5.4", "react-dom": "15.5.4", "react-draggable": "2.2.6", + "react-intl": "2.3.0", "react-modal": "1.7.7", "react-redux": "5.0.5", "react-style-proptype": "3.0.0", diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx index a9c448751..b2fe999c3 100644 --- a/src/components/asset-panel/selector.jsx +++ b/src/components/asset-panel/selector.jsx @@ -1,5 +1,6 @@ const PropTypes = require('prop-types'); const React = require('react'); +const {FormattedMessage} = require('react-intl'); const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx'); @@ -33,7 +34,7 @@ const Selector = props => { ))} - {buttons.map(({text, img, onClick}, index) => ( + {buttons.map(({message, img, onClick}, index) => ( { src={img} /> - {text} + ))} @@ -55,7 +56,11 @@ const Selector = props => { Selector.propTypes = { buttons: PropTypes.arrayOf(PropTypes.shape({ - text: PropTypes.string.isRequired, + message: PropTypes.shape({ + id: PropTypes.string.isRequired, + defaultMessage: PropTypes.string, + description: PropTypes.string + }), img: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired })), diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index c6c323891..f18dcf013 100644 --- a/src/containers/costume-tab.jsx +++ b/src/containers/costume-tab.jsx @@ -1,6 +1,7 @@ const PropTypes = require('prop-types'); const React = require('react'); const bindAll = require('lodash.bindall'); +const {defineMessages} = require('react-intl'); const VM = require('scratch-vm'); @@ -61,18 +62,30 @@ class CostumeTab extends React.Component { return null; } - const addText = target.isStage ? 'Add Backdrop' : 'Add Costume'; + const messages = defineMessages({ + addBackdrop: { + id: 'action.addBackdrop', + defaultMessage: 'Add Backdrop', + description: 'Button to add a backdrop in the editor tab' + }, + addCostume: { + id: 'action.addCostume', + defaultMessage: 'Add Costume', + description: 'Button to add a costume in the editor tab' + } + }); + + const addMessage = target.isStage ? messages.addBackdrop : messages.addCostume; const addFunc = target.isStage ? onNewBackdropClick : onNewCostumeClick; return ( - + + + ), appTarget);