From b0dbe9e323a6704c90ca70036a332540a841b6b3 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Thu, 25 Jul 2019 15:29:10 -0400
Subject: [PATCH] Flip copy to new button in RTL, and use a class for flipping
buttons
---
src/components/sound-editor/sound-editor.css | 11 +----------
src/components/sound-editor/sound-editor.jsx | 8 ++++----
2 files changed, 5 insertions(+), 14 deletions(-)
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index b9cb97f16..7a791e6ab 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -171,16 +171,7 @@ $border-radius: 0.25rem;
margin-bottom: -0.375rem;
}
-/* mirror the louder/softer/mute speaker icons when rtl */
-[dir="rtl"] .effect-button:nth-of-type(4) img {
- transform: scaleX(-1);
-}
-
-[dir="rtl"] .effect-button:nth-of-type(5) img {
- transform: scaleX(-1);
-}
-
-[dir="rtl"] .effect-button:nth-of-type(6) img {
+[dir="rtl"] .flip-in-rtl img {
transform: scaleX(-1);
}
diff --git a/src/components/sound-editor/sound-editor.jsx b/src/components/sound-editor/sound-editor.jsx
index b0e97a174..84f56d08b 100644
--- a/src/components/sound-editor/sound-editor.jsx
+++ b/src/components/sound-editor/sound-editor.jsx
@@ -195,7 +195,7 @@ const SoundEditor = props => (
onClick={props.onPaste}
/>
<IconButton
- className={styles.toolButton}
+ className={classNames(styles.toolButton, styles.flipInRtl)}
img={copyToNewIcon}
title={props.intl.formatMessage(messages.copyToNew)}
onClick={props.onCopyToNew}
@@ -265,19 +265,19 @@ const SoundEditor = props => (
onClick={props.onSlower}
/>
<IconButton
- className={styles.effectButton}
+ className={classNames(styles.effectButton, styles.flipInRtl)}
img={louderIcon}
title={<FormattedMessage {...messages.louder} />}
onClick={props.onLouder}
/>
<IconButton
- className={styles.effectButton}
+ className={classNames(styles.effectButton, styles.flipInRtl)}
img={softerIcon}
title={<FormattedMessage {...messages.softer} />}
onClick={props.onSofter}
/>
<IconButton
- className={styles.effectButton}
+ className={classNames(styles.effectButton, styles.flipInRtl)}
img={muteIcon}
title={<FormattedMessage {...messages.mute} />}
onClick={props.onMute}
--
GitLab