From a194de7fa2ea9e473e823b8f7a1f9ed7f1edd952 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Thu, 23 Aug 2018 19:22:07 -0400
Subject: [PATCH] Fix all the little RTL layout bugs (#2961)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Fix all the little RTL layout bugs
- [ ] borders on toolbox and workspace mirror correctly
- [ ] spacing on stage selector is correct
- [ ] stage size icons are mirrored
- [ ] extension library coming soon text is positioned correctly
- [ ] only mirror blocks icon on the tab (others stay right-handed)
- [ ] drop down icon in create variable modal has correct spacing
* FIx RTL backpack header border-radius
* round the bottom corner of paint/sound editors
This makes the editor’s asset panels match the blocks.
---
src/components/asset-panel/asset-panel.css | 20 ++++++++++++++++++--
src/components/backpack/backpack.css | 9 ++++++++-
src/components/blocks/blocks.css | 18 ++++++++++++++++++
src/components/gui/gui.css | 4 ++++
src/components/library-item/library-item.css | 9 ++++++++-
src/components/prompt/prompt.css | 9 ++++++++-
src/components/stage-header/stage-header.css | 4 ++++
src/components/target-pane/target-pane.css | 7 +++++++
8 files changed, 75 insertions(+), 5 deletions(-)
diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css
index 9a999057b..bfd578909 100644
--- a/src/components/asset-panel/asset-panel.css
+++ b/src/components/asset-panel/asset-panel.css
@@ -5,16 +5,32 @@
display: flex;
flex-grow: 1;
border: 1px solid $ui-black-transparent;
- border-top-right-radius: $space;
background: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.85rem;
}
+[dir="ltr"] .wrapper {
+ border-top-right-radius: $space;
+ border-bottom-right-radius: $space;
+}
+
+[dir="rtl"] .wrapper {
+ border-top-left-radius: $space;
+ border-bottom-left-radius: $space;
+}
+
.detail-area {
display: flex;
flex-grow: 1;
flex-shrink: 1;
- border-left: 1px solid $ui-black-transparent;
overflow-y: auto;
}
+
+[dir="ltr"] .detail-area {
+ border-left: 1px solid $ui-black-transparent;
+}
+
+[dir="rtl"] .detail-area {
+ border-right: 1px solid $ui-black-transparent;
+}
diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css
index 9143844d0..33585ca90 100644
--- a/src/components/backpack/backpack.css
+++ b/src/components/backpack/backpack.css
@@ -9,7 +9,6 @@
.backpack-header {
margin-top: 0.5rem;
border: 1px solid $ui-black-transparent;
- border-top-right-radius: $space;
background: $ui-white;
padding: 0.25rem;
text-align: center;
@@ -20,6 +19,14 @@
user-select: none;
}
+[dir="ltr"] .backpack-header {
+ border-top-right-radius: $space;
+}
+
+[dir="rtl"] .backpack-header {
+ border-top-left-radius: $space;
+}
+
.backpack-list {
position: relative;
display: flex;
diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css
index e02486ce0..3d8740589 100644
--- a/src/components/blocks/blocks.css
+++ b/src/components/blocks/blocks.css
@@ -12,6 +12,13 @@
border-bottom-right-radius: $space;
}
+[dir="rtl"] .blocks :global(.injectionDiv) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-left-radius: $space;
+ border-bottom-left-radius: $space;
+}
+
.blocks :global(.blocklyMainBackground) {
stroke: none;
}
@@ -31,6 +38,11 @@
-ms-overflow-style: none;
}
+[dir="rtl"] .blocks :global(.blocklyToolboxDiv) {
+ border-right: none;
+ border-left: 1px solid $ui-black-transparent;
+}
+
.blocks :global(.blocklyToolboxDiv::-webkit-scrollbar) {
display: none;
}
@@ -40,6 +52,12 @@
box-sizing: content-box;
}
+[dir="rtl"] .blocks :global(.blocklyFlyout) {
+ border-right: none;
+ border-left: 1px solid $ui-black-transparent;
+}
+
+
.blocks :global(.blocklyBlockDragSurface) {
/*
Fix an issue where the drag surface was preventing hover events for sharing blocks.
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 46cf41d2b..757653e9a 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -130,6 +130,10 @@
[dir="rtl"] .tab img {
margin-left: 0.125rem;
+}
+
+/* only mirror blocks tab icon */
+[dir="rtl"] .tab:nth-of-type(1) img {
transform: scaleX(-1);
}
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index 3258b4a7b..fd7217c67 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -99,7 +99,6 @@
.coming-soon-text {
position: absolute;
- transform: translate(calc(2 * $space), calc(2 * $space));
background-color: $data-primary;
border-radius: 1rem;
box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25);
@@ -108,3 +107,11 @@
font-weight: bold;
color: $ui-white;
}
+
+[dir="ltr"] .coming-soon-text {
+ transform: translate(calc(2 * $space), calc(2 * $space));
+}
+
+[dir="rtl"] .coming-soon-text {
+ transform: translate(calc(-2 * $space), calc(2 * $space));
+}
diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index ae523e188..911271f19 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -88,8 +88,15 @@
.more-options-icon {
width: .75rem;
height: .75rem;
- margin-left: .5rem;
vertical-align: middle;
padding-bottom: .2rem;
opacity: .5;
}
+
+[dir="ltr"] .more-options-icon {
+ margin-left: .5rem;
+}
+
+[dir="rtl"] .more-options-icon {
+ margin-right: .5rem;
+}
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index dd2dc2c65..3e6f59c75 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -59,6 +59,10 @@
height: 100%;
}
+[dir="rtl"] .stage-button-icon {
+ transform: scaleX(-1);
+}
+
[dir="ltr"] .stage-button-first {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
diff --git a/src/components/target-pane/target-pane.css b/src/components/target-pane/target-pane.css
index 404283d19..07b07cb16 100644
--- a/src/components/target-pane/target-pane.css
+++ b/src/components/target-pane/target-pane.css
@@ -11,5 +11,12 @@
display: flex;
flex-basis: 72px;
flex-shrink: 0;
+}
+
+[dir="ltr"] .stage-selector-wrapper {
margin-left: calc($space / 2);
}
+
+[dir="rtl"] .stage-selector-wrapper {
+ margin-right: calc($space / 2);
+}
--
GitLab