From 749683b39a4936e06794e29bfba18b65f0dbd5d8 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 1 Aug 2018 11:56:44 -0400
Subject: [PATCH] Sound Editor RTL
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Checked with Moran, and the sound waveform along with play button should stay LTR. So added a `row-reverse` that only applies when `dir=“rtl”`
---
 src/components/sound-editor/sound-editor.css | 66 ++++++++++++++++----
 src/components/sound-editor/sound-editor.jsx |  2 +-
 2 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 7703802e3..13a46d730 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,15 +27,31 @@
     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;
+}
+
 .waveform-container {
     display: flex;
     justify-content: space-around;
@@ -92,21 +112,22 @@ $border-radius: 0.25rem;
     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 +145,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 a4aafcd91..6814b94ae 100644
--- a/src/components/sound-editor/sound-editor.jsx
+++ b/src/components/sound-editor/sound-editor.jsx
@@ -168,7 +168,7 @@ const SoundEditor = props => (
                 />
             </div>
         </div>
-        <div className={styles.row}>
+        <div className={classNames(styles.row, styles.rowReverse)}>
             <div className={styles.inputGroup}>
                 {props.playhead ? (
                     <button
-- 
GitLab