From ee50ef99e096981c14fdbbf3910272b89dbfa5ec Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Mon, 6 Aug 2018 15:43:10 -0400
Subject: [PATCH] RTL corrections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* center the title on full screen modals.
Adding the `[dir=“ltrâ€]` atttribute to the css rule for a child style didn’t work the way I expected.
`[dir="ltr"] .full-screen .header-item-title` did not match the fullscreen title element, so the style wasn’t applied.
`.full-screen [dir="ltr"] .header-item-title` did match.
* fix the filter to reverse the icon and ‘x’ in the filter input
* more space after the library back icon
* reverse the arrow on camera -retake image and rerecord sound.
---
src/components/button/button.css | 9 ++++-
src/components/camera-modal/camera-modal.css | 4 +++
src/components/camera-modal/camera-modal.jsx | 2 +-
src/components/filter/filter.css | 36 +++++++++++++++++--
src/components/modal/modal.css | 4 +--
src/components/record-modal/playback-step.jsx | 2 +-
src/components/record-modal/record-modal.css | 4 +++
src/containers/custom-procedures.jsx | 5 ++-
8 files changed, 57 insertions(+), 9 deletions(-)
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 9ce746c52..9ba2fbd93 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -11,10 +11,17 @@
}
.icon {
- margin-right: .5rem;
height: 1.5rem;
}
+[dir="ltr"] .icon {
+ margin-right: .5rem;
+}
+
+[dir="rtl"] .icon {
+ margin-left: .5rem;
+}
+
.content {
white-space: nowrap;
}
diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index 4ea962fba..7522fbb2e 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -135,6 +135,10 @@ $main-button-size: 2.75rem;
color: $ui-white;
}
+[dir="rtl"] .retake-button img {
+ transform: scaleX(-1);
+}
+
@keyframes flash {
0% { opacity: 1; }
100% { opacity: 0; }
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index 5e18661b7..8c499c362 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -79,7 +79,7 @@ const CameraModal = ({intl, ...props}) => (
{props.capture ?
<Box className={styles.buttonRow}>
<button
- className={styles.cancelButton}
+ className={styles.retakeButton}
key="retake-button"
onClick={props.onBack}
>
diff --git a/src/components/filter/filter.css b/src/components/filter/filter.css
index b67e60795..fffef4812 100644
--- a/src/components/filter/filter.css
+++ b/src/components/filter/filter.css
@@ -18,13 +18,22 @@
.filter-icon {
position: absolute;
top: 0;
- left: 0;
height: 1rem;
width: 1rem;
+}
+
+[dir="ltr"] .filter-icon {
+ left: 0;
margin: 0.75rem 0.75rem 0.75rem 1rem;
}
+[dir="rtl"] .filter-icon {
+ right: 0;
+ margin: 0.75rem 1rem 0.75rem 0.75rem;
+ transform: scaleX(-1);
+}
+
.filter:focus-within {
box-shadow: 0 0 0 .25rem $motion-transparent;
}
@@ -36,7 +45,6 @@
opacity: 0;
position: absolute;
top: 0;
- right: 0;
display: flex;
justify-content: center;
@@ -53,6 +61,14 @@
transition: opacity 0.05s linear;
}
+[dir="ltr"] .x-icon-wrapper {
+ right: 0;
+}
+
+[dir="rtl"] .x-icon-wrapper {
+ left: 0;
+}
+
/*
Shown state
*/
@@ -96,13 +112,27 @@
font-size: 0.75rem;
letter-spacing: 0.15px;
cursor: text;
+}
+
+[dir="ltr"] .filter-input {
padding: .625rem 2rem .625rem 3rem;
}
+[dir="rtl"] .filter-input {
+ padding: .625rem 3rem .625rem 2rem;
+}
+
.filter-input::placeholder {
opacity: .5;
- padding: 0 0 0 0.25rem;
color: $text-primary;
font-size: 0.875rem;
letter-spacing: 0.15px;
}
+
+[dir="ltr"] .filter-input::placeholder {
+ padding: 0 0 0 0.25rem;
+}
+
+[dir="rtl"] .filter-input::placeholder {
+ padding: 0 0.25rem 0 0;
+}
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index be410bd85..e36e472ed 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -110,11 +110,11 @@ $sides: 20rem;
margin: 0 0 0 -$sides;
}
-[dir="ltr"] .full-screen .header-item-title {
+.full-screen [dir="ltr"] .header-item-title {
margin: 0 0 0 -$sides;
}
-[dir="rtl"] .full-screen .header-item-title {
+.full-screen [dir="rtl"] .header-item-title {
margin: 0 -$sides 0 0;
}
diff --git a/src/components/record-modal/playback-step.jsx b/src/components/record-modal/playback-step.jsx
index 40167172d..8f76b506f 100644
--- a/src/components/record-modal/playback-step.jsx
+++ b/src/components/record-modal/playback-step.jsx
@@ -87,7 +87,7 @@ const PlaybackStep = props => (
</Box>
<Box className={styles.buttonRow}>
<button
- className={styles.cancelButton}
+ className={styles.rerecordButton}
onClick={props.onBack}
>
<img
diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css
index 79ce9c606..ae9d8afcc 100644
--- a/src/components/record-modal/record-modal.css
+++ b/src/components/record-modal/record-modal.css
@@ -118,3 +118,7 @@
opacity: 0.2;
transition: 0.1s;
}
+
+[dir="rtl"] .rerecord-button img {
+ transform: scaleX(-1);
+}
diff --git a/src/containers/custom-procedures.jsx b/src/containers/custom-procedures.jsx
index 879800aae..525422720 100644
--- a/src/containers/custom-procedures.jsx
+++ b/src/containers/custom-procedures.jsx
@@ -32,7 +32,8 @@ class CustomProcedures extends React.Component {
this.blocks = blocksRef;
const workspaceConfig = defaultsDeep({},
CustomProcedures.defaultOptions,
- this.props.options
+ this.props.options,
+ {rtl: this.props.isRtl}
);
// @todo This is a hack to make there be no toolbox.
@@ -117,6 +118,7 @@ class CustomProcedures extends React.Component {
}
CustomProcedures.propTypes = {
+ isRtl: PropTypes.bool,
mutator: PropTypes.instanceOf(Element),
onRequestClose: PropTypes.func.isRequired,
options: PropTypes.shape({
@@ -147,6 +149,7 @@ CustomProcedures.defaultProps = {
};
const mapStateToProps = state => ({
+ isRtl: state.locales.isRtl,
mutator: state.scratchGui.customProcedures.mutator
});
--
GitLab