From ca19e77106390176166e221d22231a493c416bd1 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 1 Aug 2018 11:52:52 -0400
Subject: [PATCH] Stage-header RTL
Rename buttons first and last instead of left/right. Add RTL styles.
---
src/components/stage-header/stage-header.css | 22 ++++++++++++++++++--
src/components/stage-header/stage-header.jsx | 4 ++--
2 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 93ef5b440..397c679da 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 21a156a95..43414179b 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}
--
GitLab