diff --git a/src/components/asset-panel/icon--sound-rtl.svg b/src/components/asset-panel/icon--sound-rtl.svg new file mode 100644 index 0000000000000000000000000000000000000000..adf850173944d7530bf16447709dc2bdfcd65a6b Binary files /dev/null and b/src/components/asset-panel/icon--sound-rtl.svg differ diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 757653e9ac32d18507cf2f8d2d433a2ecf8562e8..086011f4ba0a975499f0f7892fcc2eaa3bcee5b5 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -132,11 +132,15 @@ margin-left: 0.125rem; } -/* only mirror blocks tab icon */ +/* mirror blocks and sound tab icons */ [dir="rtl"] .tab:nth-of-type(1) img { transform: scaleX(-1); } +[dir="rtl"] .tab:nth-of-type(3) img { + transform: scaleX(-1); +} + .tab.is-selected img { filter: none; } diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index c6e620001af95c4762242a6f1d0f914c02d0d561..4a0e03655da6c2a28874931844217dbeb627dab0 100644 --- a/src/components/sound-editor/sound-editor.css +++ b/src/components/sound-editor/sound-editor.css @@ -149,6 +149,15 @@ $border-radius: 0.25rem; margin-bottom: -0.375rem; } +/* mirror the louder/softer speaker icons when rtl */ +[dir="rtl"] .effect-button:nth-of-type(6) img { + transform: scaleX(-1); +} + +[dir="rtl"] .effect-button:nth-of-type(7) img { + transform: scaleX(-1); +} + [dir="ltr"] .button-group { margin-left: 1rem; } diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx index 5d7cb67f6fdb50a941460336282b46dfac4128bd..154ddaa814a1967024367e819de7f5f9b714e069 100644 --- a/src/containers/sound-library.jsx +++ b/src/containers/sound-library.jsx @@ -9,10 +9,13 @@ import analytics from '../lib/analytics'; import LibraryComponent from '../components/library/library.jsx'; import soundIcon from '../components/asset-panel/icon--sound.svg'; +import soundIconRtl from '../components/asset-panel/icon--sound-rtl.svg'; import soundLibraryContent from '../lib/libraries/sounds.json'; import soundTags from '../lib/libraries/sound-tags'; +import {connect} from 'react-redux'; + const messages = defineMessages({ libraryTitle: { defaultMessage: 'Choose a Sound', @@ -137,7 +140,7 @@ class SoundLibrary extends React.PureComponent { } = sound; return { _md5: md5, - rawURL: soundIcon, + rawURL: this.props.isRtl ? soundIconRtl : soundIcon, ...otherData }; }); @@ -159,9 +162,19 @@ class SoundLibrary extends React.PureComponent { SoundLibrary.propTypes = { intl: intlShape.isRequired, + isRtl: PropTypes.bool, onNewSound: PropTypes.func.isRequired, onRequestClose: PropTypes.func, vm: PropTypes.instanceOf(VM).isRequired }; -export default injectIntl(SoundLibrary); +const mapStateToProps = state => ({ + isRtl: state.locales.isRtl +}); + +const mapDispatchToProps = () => ({}); + +export default injectIntl(connect( + mapStateToProps, + mapDispatchToProps +)(SoundLibrary)); diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx index a30b8f97e82f93fe1407cc55271f81273feef3f1..9631b30d3581a907e83822e7d5ae6e9b48ecd056 100644 --- a/src/containers/sound-tab.jsx +++ b/src/containers/sound-tab.jsx @@ -6,6 +6,7 @@ import VM from 'scratch-vm'; import AssetPanel from '../components/asset-panel/asset-panel.jsx'; import soundIcon from '../components/asset-panel/icon--sound.svg'; +import soundIconRtl from '../components/asset-panel/icon--sound-rtl.svg'; import addSoundFromLibraryIcon from '../components/asset-panel/icon--add-sound-lib.svg'; import addSoundFromRecordingIcon from '../components/asset-panel/icon--add-sound-record.svg'; import fileUploadIcon from '../components/action-menu/icon--file-upload.svg'; @@ -158,6 +159,7 @@ class SoundTab extends React.Component { const { dispatchUpdateRestore, // eslint-disable-line no-unused-vars intl, + isRtl, vm, onNewSoundFromLibraryClick, onNewSoundFromRecordingClick @@ -171,7 +173,7 @@ class SoundTab extends React.Component { const sounds = sprite.sounds ? sprite.sounds.map(sound => ( { - url: soundIcon, + url: isRtl ? soundIconRtl : soundIcon, name: sound.name, details: (sound.sampleCount / sound.rate).toFixed(2), dragPayload: sound @@ -259,6 +261,7 @@ SoundTab.propTypes = { dispatchUpdateRestore: PropTypes.func, editingTarget: PropTypes.string, intl: intlShape, + isRtl: PropTypes.bool, onActivateCostumesTab: PropTypes.func.isRequired, onNewSoundFromLibraryClick: PropTypes.func.isRequired, onNewSoundFromRecordingClick: PropTypes.func.isRequired, @@ -282,6 +285,7 @@ SoundTab.propTypes = { const mapStateToProps = state => ({ editingTarget: state.scratchGui.targets.editingTarget, + isRtl: state.locales.isRtl, sprites: state.scratchGui.targets.sprites, stage: state.scratchGui.targets.stage, soundLibraryVisible: state.scratchGui.modals.soundLibrary,