Flip the direction of a bunch of icons

I think this switches all the icons we saw. I also switched the icons on the tabs (the blocks going the wrong way looked bad).

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

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;

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;
 }

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;

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}
                         />

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>

src/components/stage-selector/stage-selector.css

 @import "../../css/units.css";
 @import "../../css/colors.css";
-@import "../../css/z-index.css";
 
 $header-height: calc($stage-menu-height - 2px);
 

src/lib/rtl-locales.js

+// TODO: this probably should be coming from scratch-l10n
+// Tracking in https://github.com/LLK/scratch-l10n/issues/32
+export default ['he'];

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]

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"
           />