diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 8d251bd14e17538e5f38da679d8ddd3eb752757d..c3b7cff716b6b07fd874c64abfa68035a593fca5 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -65,6 +65,7 @@ const GUIComponent = props => { importInfoVisible, intl, isPlayerOnly, + isRtl, loading, onExtensionButtonClick, onActivateCostumesTab, @@ -110,6 +111,7 @@ const GUIComponent = props => { ) : ( <Box className={styles.pageWrapper} + dir={isRtl ? 'rtl' : 'ltr'} {...componentProps} > {previewInfoVisible ? ( @@ -282,6 +284,7 @@ GUIComponent.propTypes = { importInfoVisible: PropTypes.bool, intl: intlShape.isRequired, isPlayerOnly: PropTypes.bool, + isRtl: PropTypes.bool, loading: PropTypes.bool, onActivateCostumesTab: PropTypes.func, onActivateSoundsTab: PropTypes.func, diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index 3862fa653fbe239a2db9d6e29175bcca64f508b4..44d52664e366582e7fa6776e103c9a1993af3ba2 100644 --- a/src/containers/blocks.jsx +++ b/src/containers/blocks.jsx @@ -77,7 +77,7 @@ class Blocks extends React.Component { const workspaceConfig = defaultsDeep({}, Blocks.defaultOptions, this.props.options, - {toolbox: this.props.toolboxXML} + {rtl: this.props.isRtl, toolbox: this.props.toolboxXML} ); this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig); @@ -403,6 +403,7 @@ class Blocks extends React.Component { options, stageSize, vm, + isRtl, isVisible, onActivateColorPicker, updateToolboxState, @@ -467,6 +468,7 @@ Blocks.propTypes = { anyModalVisible: PropTypes.bool, customProceduresVisible: PropTypes.bool, extensionLibraryVisible: PropTypes.bool, + isRtl: PropTypes.bool, isVisible: PropTypes.bool, locale: PropTypes.string, messages: PropTypes.objectOf(PropTypes.string), @@ -541,6 +543,7 @@ const mapStateToProps = state => ({ state.scratchGui.mode.isFullScreen ), extensionLibraryVisible: state.scratchGui.modals.extensionLibrary, + isRtl: state.locales.isRtl, locale: state.locales.locale, messages: state.locales.messages, toolboxXML: state.scratchGui.toolbox.toolboxXML, diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index 8db598c85fd28f2f1c6e66fdbae55468399123c4..ffa099496fc5c3d10587fdb66f3f547e6622f127 100644 --- a/src/containers/gui.jsx +++ b/src/containers/gui.jsx @@ -113,6 +113,7 @@ const mapStateToProps = state => ({ costumesTabVisible: state.scratchGui.editorTab.activeTabIndex === COSTUMES_TAB_INDEX, importInfoVisible: state.scratchGui.modals.importInfo, isPlayerOnly: state.scratchGui.mode.isPlayerOnly, + isRtl: state.locales.isRtl, loadingStateVisible: state.scratchGui.modals.loadingProject, previewInfoVisible: state.scratchGui.modals.previewInfo, targetIsStage: ( diff --git a/src/reducers/locales.js b/src/reducers/locales.js index fda8f9dc36d14dac09f72fad62f704617b87e0cf..c2c072391ff70d94ea74eaab8685bd048b57e585 100644 --- a/src/reducers/locales.js +++ b/src/reducers/locales.js @@ -9,22 +9,28 @@ const UPDATE_LOCALES = 'scratch-gui/locales/UPDATE_LOCALES'; const SELECT_LOCALE = 'scratch-gui/locales/SELECT_LOCALE'; const initialState = { + isRtl: false, locale: 'en', messagesByLocale: editorMessages, 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, locale: action.locale, messagesByLocale: state.messagesByLocale, messages: state.messagesByLocale[action.locale] }); case UPDATE_LOCALES: return Object.assign({}, state, { + isRtl: state.isRtl, locale: state.locale, messagesByLocale: action.messagesByLocale, messages: action.messagesByLocale[state.locale] @@ -53,6 +59,7 @@ const initLocale = function (currentState, locale) { {}, currentState, { + isRtl: RtlLangs.indexOf(locale) !== -1, locale: locale, messagesByLocale: currentState.messagesByLocale, messages: currentState.messagesByLocale[locale]