diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 682c3b2423a9fc2d846e693056a4bf6e8b4b9179..e82103ca10a2d62e78912a13100355a75ed90cc3 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -59,6 +59,10 @@ button::-moz-focus-inner {
height: calc($main-button-size - 1rem);
}
+[dir="rtl"] .main-icon {
+ transform: scaleX(-1);
+}
+
.more-buttons-outer {
/*
Need to use two divs to set different overflow x/y
diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx
index 781549d3d918abce3c58a6ff91b878ce03766378..90555dfd8c1fde5ed886b81daa3f716d25d3d053 100644
--- a/src/components/action-menu/action-menu.jsx
+++ b/src/components/action-menu/action-menu.jsx
@@ -101,6 +101,7 @@ class ActionMenu extends React.Component {
img: mainImg,
title: mainTitle,
moreButtons,
+ tooltipPlace,
onClick
} = this.props;
@@ -134,7 +135,7 @@ class ActionMenu extends React.Component {
className={styles.tooltip}
effect="solid"
id={mainTooltipId}
- place="left"
+ place={tooltipPlace || 'left'}
/>
<div className={styles.moreButtonsOuter}>
<div className={styles.moreButtons}>
@@ -174,7 +175,7 @@ class ActionMenu extends React.Component {
})}
effect="solid"
id={tooltipId}
- place="left"
+ place={tooltipPlace || 'left'}
/>
</div>
);
@@ -198,7 +199,8 @@ ActionMenu.propTypes = {
fileInput: PropTypes.func // Optional, only for file upload
})),
onClick: PropTypes.func.isRequired,
- title: PropTypes.node.isRequired
+ title: PropTypes.node.isRequired,
+ tooltipPlace: PropTypes.string
};
export default ActionMenu;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 87b75b837ce8de03b2b1526849a101e0fadea0b7..1924bd8c4080c2ce3208de1c2fb211492a0fbd79 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -130,6 +130,7 @@
[dir="rtl"] .tab img {
margin-left: 0.125rem;
+ transform: scaleX(-1);
}
.tab.is-selected img {
@@ -262,6 +263,10 @@ $fade-out-distance: 15px;
height: 1.75rem;
}
+[dir="rtl"] .extension-button-icon {
+ transform: scaleX(-1);
+}
+
.extension-button > div {
margin-top: 0;
}
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 13a46d7301dbd6fbee7dbb123b4c2db06c44511e..c6e620001af95c4762242a6f1d0f914c02d0d561 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -107,6 +107,10 @@ $border-radius: 0.25rem;
/*min-width: 1.5rem;*/
}
+[dir="rtl"] .undo-icon, [dir="rtl"] .redo-icon {
+ transform: scaleX(-1);
+}
+
.trim-button {
display: flex;
align-items: center;
diff --git a/src/components/sound-editor/sound-editor.jsx b/src/components/sound-editor/sound-editor.jsx
index 6814b94ae3b2b78652f16df05113ed38d8a25daa..f97338e06a55bf75e0bceda2ddc33d8a9be1070b 100644
--- a/src/components/sound-editor/sound-editor.jsx
+++ b/src/components/sound-editor/sound-editor.jsx
@@ -122,6 +122,7 @@ const SoundEditor = props => (
onClick={props.onUndo}
>
<img
+ className={styles.undoIcon}
draggable={false}
src={undoIcon}
/>
@@ -133,6 +134,7 @@ const SoundEditor = props => (
onClick={props.onRedo}
>
<img
+ className={styles.redoIcon}
draggable={false}
src={redoIcon}
/>
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index e6948c5b7d85c08720a24625425e560c345811aa..04e2de63e61741157fa3383c355d2452bf5a3a5f 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
import React from 'react';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
-
import Box from '../box/box.jsx';
import SpriteInfo from '../../containers/sprite-info.jsx';
import SpriteList from './sprite-list.jsx';
import ActionMenu from '../action-menu/action-menu.jsx';
import {STAGE_DISPLAY_SIZES} from '../../lib/layout-constants';
+import RtlLocales from '../../lib/rtl-locales';
import styles from './sprite-selector.css';
@@ -137,6 +137,7 @@ const SpriteSelectorComponent = function (props) {
}
]}
title={intl.formatMessage(messages.addSpriteFromLibrary)}
+ tooltipPlace={RtlLocales.indexOf(intl.locale) === -1 ? 'left' : 'right'}
onClick={onNewSpriteClick}
/>
</Box>
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 9bb846b1ef0db8e705537b32c22e84ed87e2e2c0..2669a6de576a4487686e466cfdae7d0ba87349f9 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -1,6 +1,5 @@
@import "../../css/units.css";
@import "../../css/colors.css";
-@import "../../css/z-index.css";
$header-height: calc($stage-menu-height - 2px);
diff --git a/src/lib/rtl-locales.js b/src/lib/rtl-locales.js
new file mode 100644
index 0000000000000000000000000000000000000000..b48ff75997f906abc0a11530e74e2a4ecc4116a6
--- /dev/null
+++ b/src/lib/rtl-locales.js
@@ -0,0 +1,3 @@
+// TODO: this probably should be coming from scratch-l10n
+// Tracking in https://github.com/LLK/scratch-l10n/issues/32
+export default ['he'];
diff --git a/src/reducers/locales.js b/src/reducers/locales.js
index c2c072391ff70d94ea74eaab8685bd048b57e585..14ca3bd37b17971432645eeafc684cc244a63270 100644
--- a/src/reducers/locales.js
+++ b/src/reducers/locales.js
@@ -2,6 +2,7 @@ import {addLocaleData} from 'react-intl';
import {localeData} from 'scratch-l10n';
import editorMessages from 'scratch-l10n/locales/editor-msgs';
+import RtlLocales from '../lib/rtl-locales';
addLocaleData(localeData);
@@ -15,15 +16,12 @@ const initialState = {
messages: editorMessages.en
};
-// TODO: this probably should be coming from scratch-l10n
-const RtlLangs = ['he'];
-
const reducer = function (state, action) {
if (typeof state === 'undefined') state = initialState;
switch (action.type) {
case SELECT_LOCALE:
return Object.assign({}, state, {
- isRtl: RtlLangs.indexOf(action.locale) !== -1,
+ isRtl: RtlLocales.indexOf(action.locale) !== -1,
locale: action.locale,
messagesByLocale: state.messagesByLocale,
messages: state.messagesByLocale[action.locale]
@@ -59,7 +57,7 @@ const initLocale = function (currentState, locale) {
{},
currentState,
{
- isRtl: RtlLangs.indexOf(locale) !== -1,
+ isRtl: RtlLocales.indexOf(locale) !== -1,
locale: locale,
messagesByLocale: currentState.messagesByLocale,
messages: currentState.messagesByLocale[locale]
diff --git a/test/unit/components/__snapshots__/sound-editor.test.jsx.snap b/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
index 7b6a88c75e28b1f3da3f49e1d22217184745700c..93ebc2cf68c794ad31bbf93e6f61b6ec5ac440b5 100644
--- a/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
@@ -39,6 +39,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
title="Undo"
>
<img
+ className={undefined}
draggable={false}
src="test-file-stub"
/>
@@ -50,6 +51,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
title="Redo"
>
<img
+ className={undefined}
draggable={false}
src="test-file-stub"
/>