From 8da7e12f414fc78cd702f16b37198f41507e67e5 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Tue, 28 Aug 2018 17:59:11 -0400
Subject: [PATCH] Mirror the speaker icon for RTL languages
fixes #2983
---
src/components/asset-panel/icon--sound-rtl.svg | Bin 0 -> 2527 bytes
src/components/gui/gui.css | 6 +++++-
src/components/sound-editor/sound-editor.css | 9 +++++++++
src/containers/sound-library.jsx | 17 +++++++++++++++--
src/containers/sound-tab.jsx | 6 +++++-
5 files changed, 34 insertions(+), 4 deletions(-)
create mode 100644 src/components/asset-panel/icon--sound-rtl.svg
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
GIT binary patch
literal 2527
zcma)8O;g)Q5WVMD%qkbCl1J0?)jgC=YS$HVA*W<7xj9&17sjF_fyuw$H?oZd#bIqj
z%{;YUcfaoWn0|SA*r?~a?bgk9R**J@s<$`Ia=pEq761Ocnn>~G^3$|?zEivPvR}c*
zn8%kwt?KpNs(+n6uj}1E&C9GX$|#uRzhX>Gg@UVXH!D_s|9DYVyWLLjoNn5?${J%T
zxHy<xylmFn`;QDMrBn@1i_1?6pXpzdiTYM=>vqvM?S=YrU-vgF6-Zlk7C2BkR}(ez
z_`6xv59`GtMSaseRNela$>c!Uulr4X`FGp@ZWirwTJ7h1cgwoFxtzE4qOX?_q+cC8
z>S;ARI$GU!d$J+M#|7+`v*LSnnu1Hl#4-jQC9p}N=Fw_z$lEa(Nk_}#DP`0PvlFkP
z(aHKCi85-~1o2MIgJ^LfSpkL9Vk0FR6i{-B4TFL-kysn83Q0R=?`$eDG$f7!LLkk~
z0R#$SV;#O~j2dmM=Md7E!ACFzaXt<~9Nl@RlMx9P#;4FciedoAIL^Z*okH}<XCa(6
z&O6VsbfOvIdM65*vNaIEmoSDRG@wx@?>&MpK^%yZ<R};lITDUideO)yaP(?~h6pwe
z#)9}n0ndSgNtpsLSwvYzuM<EQAiUQxAar_DxsU7lOMU04Erb<vC0orLqqT(Kf({N<
zGctzRYs6!cp^OHW7z`_*COC;{u%$>oLAW`SPBB=M%A6B183+f^MoA)EMkH+#ISDG0
znaJc2Gg30iT1K-lYwsemMX4EDIQ*O%p`Nuflstj>M1g`N>w*zG1ab7|BKi%zhk#!r
za~|F#L<8DW7S3vkp3wCmKs+90ceZqBbdP1gN%6i{B$cpr@IV}tpz+u-q4+)*A7wxi
z67d!i4X8du<;YN2jZpNq_mT`+@WcSgqKR03=rvB-qTt9Ut8Pq4XuB)}i(oCjDcr~9
zM4hqENV3tp(wRI;PFP)^P^6E2&>F19`3Qw;bTNxU>=FbkPfE#D=r9|VM?5JyM+i-F
z8o3A6wZp1{5|Pj+s6E_SWH*O^Cb18UJwdd?mKV`J7De<4t0Ls$iwIiDDeJUH2jbl^
zdTrs**)Z%MC*wI`0|_Qz9geLDj4rRC++_+gNR3J*MrT}Oikv`|9BMbuQ$kF}pvlyT
z58Z_Q2xeZ5oR83JgbE7w$aVzJk(XtH2t0<f2H0CtLLsoeNm2+3dPzcWVTVBL7@?Rf
zsxwm8MjZk%9;x}L6mU(3AYVR54)wLzgoMDwBXCsoUxiv@i_csAgo?{)l}CpI1xLg2
zJeb}MX2-*&P+i|P_w}sUHrx6*n;cKtLfx)6o8!Ygp0rOJSl7?>wplI@hv0C??1{fF
z*Ek0!KNr8d>PPdmU3P`)+r_rKZQ6%fF$_02yv_oa)$l3R>+oE4H;YYuHlb3{`To7Z
zc=Bpes?+#fjr<QWJS@8VA-_DB*kky+)w-|W*$(zkU9E=G{9@JCx3l8&Nj^L}ouGqp
zl}X=WnIOyF<y4REKKps%tE>I=onZgp-CoamvuWDuTf6vEsO*1MJhhv%&-?t&Up?Zc
z@s-1e9^XbhWYX3*{SfxRj!O@2O@;b1{6CgH-=0QStlUxgwYO~3>h1)*PKLoW-={AB
E1MB5Xi~s-t
literal 0
HcmV?d00001
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 757653e9a..086011f4b 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 c6e620001..4a0e03655 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 5d7cb67f6..154ddaa81 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 a30b8f97e..9631b30d3 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,
--
GitLab