From ea6980e39c6623430a1a809ead52ab722e49ca6e Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Thu, 2 Aug 2018 16:33:27 -0400
Subject: [PATCH] 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 | 4 ++++
src/components/action-menu/action-menu.jsx | 8 +++++---
src/components/gui/gui.css | 5 +++++
src/components/sound-editor/sound-editor.css | 4 ++++
src/components/sound-editor/sound-editor.jsx | 2 ++
src/components/sprite-selector/sprite-selector.jsx | 3 ++-
src/components/stage-selector/stage-selector.css | 1 -
src/lib/rtl-locales.js | 3 +++
src/reducers/locales.js | 8 +++-----
.../components/__snapshots__/sound-editor.test.jsx.snap | 2 ++
10 files changed, 30 insertions(+), 10 deletions(-)
create mode 100644 src/lib/rtl-locales.js
diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 682c3b242..e82103ca1 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 781549d3d..90555dfd8 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 87b75b837..1924bd8c4 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 13a46d730..c6e620001 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 6814b94ae..f97338e06 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 e6948c5b7..04e2de63e 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 9bb846b1e..2669a6de5 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 000000000..b48ff7599
--- /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 c2c072391..14ca3bd37 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 7b6a88c75..93ebc2cf6 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"
/>
--
GitLab