diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 8f39946c128d445c5dbd98acbade5ac10553f1c2..e82103ca10a2d62e78912a13100355a75ed90cc3 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -1,4 +1,5 @@
@import "../../css/colors.css";
+@import "../../css/z-index.css";
$main-button-size: 2.75rem;
$more-button-size: 2.25rem;
@@ -44,7 +45,7 @@ button::-moz-focus-inner {
width: $main-button-size;
height: $main-button-size;
box-shadow: 0 0 0 4px $motion-transparent;
- z-index: 20; /* TODO reorder layout to prevent z-index need */
+ z-index: $z-index-add-button;
transition: transform, box-shadow 0.5s;
}
@@ -58,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
@@ -71,6 +76,7 @@ button::-moz-focus-inner {
border-top-right-radius: $more-button-size;
width: $more-button-size;
margin-left: calc(($main-button-size - $more-button-size) / 2);
+ margin-right: calc(($main-button-size - $more-button-size) / 2);
position: absolute;
bottom: calc($main-button-size);
@@ -150,7 +156,7 @@ button::-moz-focus-inner {
border-radius: .25rem !important;
box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
- z-index: 100 !important;
+ z-index: $z-index-tooltip !important;
}
$arrow-size: 0.5rem;
diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx
index 2725c502b421007f85c7ec4d8621ff213f35b162..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}>
@@ -142,7 +143,7 @@ class ActionMenu extends React.Component {
fileAccept, fileChange, fileInput}, keyId) => {
const isComingSoon = !handleClick;
const hasFileInput = fileInput;
- const tooltipId = title;
+ const tooltipId = `${mainTooltipId}-${title}`;
return (
<div key={`${tooltipId}-${keyId}`}>
<button
@@ -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/asset-panel/selector.css b/src/components/asset-panel/selector.css
index 132f7d71dd68ec3883f9e2d6dafc2b8679148c21..535c38b0be684e8ac55d3cec8446cf758cd00833 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -32,6 +32,7 @@ $fade-out-distance: 100px;
position: absolute;
bottom: 0;
left: 0;
+ right:0;
background: linear-gradient(rgba(232,237,241, 0),rgba(232,237,241, 1));
height: $fade-out-distance;
width: 100%;
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index bdd7f87eb4f031a9155aec4a0fd3f6affda1ad0d..091d2dd344c4bba864447041cd0c08b5ee07f5d6 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -16,7 +16,7 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.25rem !important;
- z-index: $z-index-coming-soon !important;
+ z-index: $z-index-tooltip !important;
}
.coming-soon:after {
diff --git a/src/components/forms/label.css b/src/components/forms/label.css
index 759a731d37efca6effb443534f24ed17e30bec5c..14691f1056a672bb91b5b1912c47661440b36566 100644
--- a/src/components/forms/label.css
+++ b/src/components/forms/label.css
@@ -9,13 +9,20 @@
.input-label, .input-label-secondary {
font-size: 0.625rem;
- margin-right: .5rem;
user-select: none;
cursor: default;
white-space: nowrap;
}
+[dir="ltr"] .input-label, .input-label-secondary {
+ margin-right: .5rem;
+}
+
+[dir="rtl"] .input-label, .input-label-secondary {
+ margin-left: .5rem;
+}
+
.input-label {
font-weight: bold;
}
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index e40b025735171530f8006dbbfd589e48879a82e3..1924bd8c4080c2ce3208de1c2fb211492a0fbd79 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -63,7 +63,6 @@
flex-grow: 1;
height: 80%;
margin-bottom: 0;
- margin-left: -0.5rem;
border-radius: 1rem 1rem 0 0;
border: 1px solid $ui-black-transparent;
@@ -82,9 +81,24 @@
white-space: nowrap;
}
+[dir="ltr"] .tab {
+ margin-left: -0.5rem;
+}
+
+[dir="rtl"] .tab {
+ margin-right: -0.5rem;
+}
+
+[dir="ltr"] .tab:nth-of-type(1) {
+ margin-left: 0;
+}
+
+[dir="rtl"] .tab:nth-of-type(1) {
+ margin-right: 0;
+}
+
/* Use z-indices to force left-on-top for tabs */
.tab:nth-of-type(1) {
- margin-left: 0;
z-index: 3;
}
.tab:nth-of-type(2) {
@@ -106,11 +120,19 @@
}
.tab img {
- margin-right: 0.125rem;
width: 1.375rem;
filter: grayscale(100%);
}
+[dir="ltr"] .tab img {
+ margin-right: 0.125rem;
+}
+
+[dir="rtl"] .tab img {
+ margin-left: 0.125rem;
+ transform: scaleX(-1);
+}
+
.tab.is-selected img {
filter: none;
}
@@ -191,7 +213,7 @@
padding-right: $space;
min-height: 0; /* this makes it work in Firefox */
-
+
/*
For making the sprite-selector a scrollable pane
@todo: Not working in Safari
@@ -206,6 +228,7 @@
position: absolute;
bottom: 0;
left: 0;
+ right: 0;
z-index: $z-index-extension-button;
background: $motion-primary;
@@ -240,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/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/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 7703802e307b871ecfb073f12458126d3b8b43f6..c6e620001af95c4762242a6f1d0f914c02d0d561 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -14,6 +14,10 @@
align-items: center;
}
+[dir="rtl"] .row-reverse {
+ flex-direction: row-reverse;
+}
+
.row + .row {
margin-top: calc(2 * $space);
}
@@ -23,12 +27,28 @@
flex-direction: row;
}
-.input-group + .input-group {
+[dir="ltr"] .input-group + .input-group {
margin-left: calc(2 * $space);
}
-.input-group {
+[dir="rtl"] .input-group + .input-group {
+ margin-right: calc(2 * $space);
+}
+
+[dir="ltr"] .input-group {
+ padding-right: calc(2 * $space);
+ border-right: 1px dashed $ui-black-transparent;
+}
+
+[dir="rtl"] .input-group {
+ padding-left: calc(2 * $space);
+ border-left: 1px dashed $ui-black-transparent;
+}
+
+[dir="rtl"] .row-reverse > .input-group {
+ padding-left: 0;
padding-right: calc(2 * $space);
+ border-left: none;
border-right: 1px dashed $ui-black-transparent;
}
@@ -87,26 +107,31 @@ $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;
color: $text-primary;
font-size: 0.625rem;
- margin-left: 1rem;
user-select: none;
}
+[dir="ltr"] .trim-button {
+ margin-left: 1rem;
+}
+
+[dir="rtl"] .trim-button {
+ margin-right: 1rem;
+}
+
.trim-button > img {
width: 1.25rem;
margin-bottom: -0.375rem;
}
-.input-group-right {
- flex-grow: 1;
- display: flex;
- flex-direction: row-reverse;
-}
-
.effect-button {
flex-basis: 60px;
color: $text-primary;
@@ -124,26 +149,47 @@ $border-radius: 0.25rem;
margin-bottom: -0.375rem;
}
-.button-group {
+[dir="ltr"] .button-group {
margin-left: 1rem;
}
+[dir="rtl"] .button-group {
+ margin-right: 1rem;
+}
+
.button-group .button {
border-radius: 0;
+}
+
+[dir="ltr"] .button-group .button {
border-left: none;
}
+[dir="rtl"] .button-group .button {
+ border-right: none;
+}
-.button-group .button:last-of-type {
+[dir="ltr"] .button-group .button:last-of-type {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
-.button-group .button:first-of-type {
+[dir="ltr"] .button-group .button:first-of-type {
border-left: 1px solid $ui-black-transparent;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
+[dir="rtl"] .button-group .button:last-of-type {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+}
+
+[dir="rtl"] .button-group .button:first-of-type {
+ border-right: 1px solid $ui-black-transparent;
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+}
+
.button:disabled > img {
opacity: 0.25;
}
diff --git a/src/components/sound-editor/sound-editor.jsx b/src/components/sound-editor/sound-editor.jsx
index a4aafcd9155968b46d30d8022092a3da11cc58ae..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}
/>
@@ -168,7 +170,7 @@ const SoundEditor = props => (
/>
</div>
</div>
- <div className={styles.row}>
+ <div className={classNames(styles.row, styles.rowReverse)}>
<div className={styles.inputGroup}>
{props.playhead ? (
<button
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index c835843994ce4ffb477a742fdd48c6461c288992..179b13965c5268ee367aa6fed7d2ec7abad98e3f 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -59,27 +59,45 @@
cursor: default;
}
-.radio-left {
+.radio-first {
border: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-first {
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
-.radio-left:focus {
+[dir="rtl"] .radio-first {
+ border-top-right-radius: $form-radius;
+ border-bottom-right-radius: $form-radius;
+}
+
+.radio-first:focus {
border-color: $motion-primary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
-.radio-right {
+.radio-last {
border-bottom: 1px solid $ui-black-transparent;
border-top: 1px solid $ui-black-transparent;
+}
+
+[dir="ltr"] .radio-last {
border-right: 1px solid $ui-black-transparent;
border-left: 1px solid $ui-black-transparent;
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
-.radio-right:focus {
+[dir="rtl"] .radio-last {
+ border-left: 1px solid $ui-black-transparent;
+ border-right: 1px solid $ui-black-transparent;
+ border-top-left-radius: $form-radius;
+ border-bottom-left-radius: $form-radius;
+}
+
+.radio-last:focus {
border-color: $motion-primary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index b46b889a4a87a500a05e43500825aa04d1ce0eda..f4e3773b96ff002f25092bd74426cc5238527625 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -176,7 +176,7 @@ class SpriteInfo extends React.Component {
<div
className={classNames(
styles.radio,
- styles.radioLeft,
+ styles.radioFirst,
styles.iconWrapper,
{
[styles.isActive]: this.props.visible && !this.props.disabled,
@@ -195,7 +195,7 @@ class SpriteInfo extends React.Component {
<div
className={classNames(
styles.radio,
- styles.radioRight,
+ styles.radioLast,
styles.iconWrapper,
{
[styles.isActive]: !this.props.visible && !this.props.disabled,
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 24bf17395a71fec24c218446c88762d8ad3cb1a9..d29d15c82c0777cf8eecec14ae027972715cc506 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -80,15 +80,29 @@
.delete-button {
position: absolute;
top: 0.125rem;
- right: 0.125rem;
z-index: 1;
}
+[dir="ltr"] .delete-button {
+ right: 0.125rem;
+}
+
+[dir="rtl"] .delete-button {
+ left: 0.125rem;
+}
+
.number {
position: absolute;
top: 0.15rem;
- left: 0.15rem;
font-size: 0.625rem;
font-weight: bold;
z-index: 2;
}
+
+[dir="ltr"] .number {
+ left: 0.15rem;
+}
+
+[dir="rtl"] .number {
+ right: 0.15rem;
+}
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 70895211757bba3a752569a9969aaf21c783cc8e..da89efab0433d86fe091e452f56c06f3fb496e9e 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -68,8 +68,14 @@
.add-button {
position: absolute;
bottom: 0.75rem;
+}
+
+[dir="ltr"] .add-button {
right: 1rem;
- z-index: $z-index-add-button;
+}
+
+[dir="rtl"] .add-button {
+ left: 1rem;
}
.raised {
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 1ab064d38c3e6aecf7ead60cd394d58051fbf7d6..5b55c200998b4076e14da558e2504ce0b2c4323a 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';
@@ -140,6 +140,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-header/stage-header.css b/src/components/stage-header/stage-header.css
index 93ef5b4408a1d701fc624a0f41b9ad994844dd58..397c679da34811e8170a422d6f24dc336a619db4 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -31,9 +31,16 @@
.stage-size-toggle-group {
display: flex;
+}
+
+[dir="ltr"] .stage-size-toggle-group {
margin-right: .2rem;
}
+[dir="rtl"] .stage-size-toggle-group {
+ margin-left: .2rem;
+}
+
.stage-button {
display: block;
border: 1px solid $ui-black-transparent;
@@ -51,13 +58,24 @@
height: 100%;
}
-.stage-button-right {
+[dir="ltr"] .stage-button-first {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+[dir="ltr"] .stage-button-last {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
-.stage-button-left {
+[dir="rtl"] .stage-button-first {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+[dir="rtl"] .stage-button-last {
+ border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 21a156a95a6add7ff7caa60b21aa23c28b04b6d7..43414179b7b4d4f26454b0ef92d8ed16e6af28be 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -96,7 +96,7 @@ const StageHeaderComponent = function (props) {
<Button
className={classNames(
styles.stageButton,
- styles.stageButtonLeft,
+ styles.stageButtonFirst,
(stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonToggledOff
)}
onClick={onSetStageSmall}
@@ -113,7 +113,7 @@ const StageHeaderComponent = function (props) {
<Button
className={classNames(
styles.stageButton,
- styles.stageButtonRight,
+ styles.stageButtonLast,
(stageSizeMode === STAGE_SIZE_MODES.large) ? null : styles.stageButtonToggledOff
)}
onClick={onSetStageLarge}
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index a168759901196783d90a0714fbb578941e028d9d..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);
@@ -96,7 +95,6 @@ $header-height: calc($stage-menu-height - 2px);
.add-button {
position: absolute;
bottom: 0.75rem;
- z-index: $z-index-add-button
}
.raised, .raised .header {
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/css/z-index.css b/src/css/z-index.css
index b3368fc2bd638ef4763bf495171b41a7f41d7c53..26893f08fa5147930328992359d709777bef0ec7 100644
--- a/src/css/z-index.css
+++ b/src/css/z-index.css
@@ -8,8 +8,8 @@ $z-index-extension-button: 50; /* Force extension button above the ScratchBlocks
$z-index-menu-bar: 50; /* blocklyToolboxDiv is 40 */
$z-index-monitor: 100;
-$z-index-coming-soon: 110;
$z-index-add-button: 120;
+$z-index-tooltip: 130; /* tooltips should go over add buttons if they overlap */
$z-index-card: 490;
$z-index-loader: 500;
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 fda8f9dc36d14dac09f72fad62f704617b87e0cf..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);
@@ -9,6 +10,7 @@ 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
@@ -19,12 +21,14 @@ const reducer = function (state, action) {
switch (action.type) {
case SELECT_LOCALE:
return Object.assign({}, state, {
+ isRtl: RtlLocales.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 +57,7 @@ const initLocale = function (currentState, locale) {
{},
currentState,
{
+ 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 0279a418b36f6ede1d60b9f936eeebf03ecf5aaa..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"
/>
@@ -334,7 +336,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
</div>
</div>
<div
- className={undefined}
+ className=""
>
<div
className={undefined}