From 67f4496947c143efa3e24f6214b36bfc651f25e3 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 1 Aug 2018 11:37:10 -0400
Subject: [PATCH] Action menu RTL
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
This bled into normalizing z-indices for the action menus in the z-index.css. The tooltip id was not unique between action menus for ‘suprise’ and ‘paint’, so `mainTooltipId` was used as a prefix to make them unique.
---
src/components/action-menu/action-menu.css | 6 ++++--
src/components/action-menu/action-menu.jsx | 2 +-
src/components/asset-panel/selector.css | 1 +
src/components/coming-soon/coming-soon.css | 2 +-
src/components/sprite-selector/sprite-selector.css | 8 +++++++-
src/components/stage-selector/stage-selector.css | 1 -
src/css/z-index.css | 2 +-
7 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 8f39946c1..682c3b242 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -1,4 +1,5 @@
@import "../../css/colors.css";
+@import "../../css/z-index.css";
$main-button-size: 2.75rem;
$more-button-size: 2.25rem;
@@ -44,7 +45,7 @@ button::-moz-focus-inner {
width: $main-button-size;
height: $main-button-size;
box-shadow: 0 0 0 4px $motion-transparent;
- z-index: 20; /* TODO reorder layout to prevent z-index need */
+ z-index: $z-index-add-button;
transition: transform, box-shadow 0.5s;
}
@@ -71,6 +72,7 @@ button::-moz-focus-inner {
border-top-right-radius: $more-button-size;
width: $more-button-size;
margin-left: calc(($main-button-size - $more-button-size) / 2);
+ margin-right: calc(($main-button-size - $more-button-size) / 2);
position: absolute;
bottom: calc($main-button-size);
@@ -150,7 +152,7 @@ button::-moz-focus-inner {
border-radius: .25rem !important;
box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
- z-index: 100 !important;
+ z-index: $z-index-tooltip !important;
}
$arrow-size: 0.5rem;
diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx
index 2725c502b..781549d3d 100644
--- a/src/components/action-menu/action-menu.jsx
+++ b/src/components/action-menu/action-menu.jsx
@@ -142,7 +142,7 @@ class ActionMenu extends React.Component {
fileAccept, fileChange, fileInput}, keyId) => {
const isComingSoon = !handleClick;
const hasFileInput = fileInput;
- const tooltipId = title;
+ const tooltipId = `${mainTooltipId}-${title}`;
return (
<div key={`${tooltipId}-${keyId}`}>
<button
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index 132f7d71d..535c38b0b 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -32,6 +32,7 @@ $fade-out-distance: 100px;
position: absolute;
bottom: 0;
left: 0;
+ right:0;
background: linear-gradient(rgba(232,237,241, 0),rgba(232,237,241, 1));
height: $fade-out-distance;
width: 100%;
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index bdd7f87eb..091d2dd34 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -16,7 +16,7 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.25rem !important;
- z-index: $z-index-coming-soon !important;
+ z-index: $z-index-tooltip !important;
}
.coming-soon:after {
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 708952117..da89efab0 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -68,8 +68,14 @@
.add-button {
position: absolute;
bottom: 0.75rem;
+}
+
+[dir="ltr"] .add-button {
right: 1rem;
- z-index: $z-index-add-button;
+}
+
+[dir="rtl"] .add-button {
+ left: 1rem;
}
.raised {
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index a16875990..9bb846b1e 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -96,7 +96,6 @@ $header-height: calc($stage-menu-height - 2px);
.add-button {
position: absolute;
bottom: 0.75rem;
- z-index: $z-index-add-button
}
.raised, .raised .header {
diff --git a/src/css/z-index.css b/src/css/z-index.css
index b3368fc2b..26893f08f 100644
--- a/src/css/z-index.css
+++ b/src/css/z-index.css
@@ -8,8 +8,8 @@ $z-index-extension-button: 50; /* Force extension button above the ScratchBlocks
$z-index-menu-bar: 50; /* blocklyToolboxDiv is 40 */
$z-index-monitor: 100;
-$z-index-coming-soon: 110;
$z-index-add-button: 120;
+$z-index-tooltip: 130; /* tooltips should go over add buttons if they overlap */
$z-index-card: 490;
$z-index-loader: 500;
--
GitLab