From 582d59123187fc293602e3d754b9dd8feb7d3a39 Mon Sep 17 00:00:00 2001
From: sjhuang26 <sjhuang26@gmail.com>
Date: Sat, 2 Jun 2018 15:54:37 -0400
Subject: [PATCH] Move z-index values to separate file
---
.../browser-modal/browser-modal.css | 3 ++-
src/components/cards/card.css | 9 ++++----
src/components/coming-soon/coming-soon.css | 5 +++--
src/components/context-menu/context-menu.css | 3 ++-
src/components/drag-layer/drag-layer.css | 3 ++-
src/components/gui/gui.css | 3 ++-
src/components/import-modal/import-modal.css | 3 ++-
src/components/loader/loader.css | 3 ++-
src/components/menu-bar/menu-bar.css | 4 ++--
src/components/modal/modal.css | 3 ++-
src/components/monitor/monitor.css | 5 +++--
.../preview-modal/preview-modal.css | 3 ++-
src/components/stage-header/stage-header.css | 3 ++-
src/components/stage/stage.css | 9 ++++----
src/components/webgl-modal/webgl-modal.css | 3 ++-
src/css/z-index.css | 21 +++++++++++++++++++
16 files changed, 59 insertions(+), 24 deletions(-)
create mode 100644 src/css/z-index.css
diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css
index b93eb0db4..aa8840c4c 100644
--- a/src/components/browser-modal/browser-modal.css
+++ b/src/components/browser-modal/browser-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 84b6e6bf7..0f0616a04 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -1,9 +1,10 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.card-container {
position:absolute;
- z-index: 100;
+ z-index: $z-index-card;
}
.left-card, .right-card {
@@ -13,7 +14,7 @@
background: $ui-white;
border: 1px solid $ui-tertiary;
width: 10px;
- z-index: 99;
+ z-index: 10;
opacity: 0.9;
overflow: hidden;
}
@@ -46,7 +47,7 @@
position: absolute;
top: 50%;
margin-top: -15px;
- z-index: 101;
+ z-index: 20;
user-select: none;
cursor: pointer;
background: $motion-primary;
@@ -73,7 +74,7 @@
display: flex;
flex-direction: column;
cursor: move;
- z-index: 101;
+ z-index: 20;
overflow: hidden;
box-shadow: 0px 5px 25px 5px $ui-black-transparent;
align-items: center;
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index db737e1c8..bdd7f87eb 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -5,17 +5,18 @@
*/
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.coming-soon {
background-color: $data-primary !important;
- border: 1px solid $ui-black-transparent) !important;
+ border: 1px solid $ui-black-transparent !important;
border-radius: .25rem !important;
box-shadow: 0 0 .5rem $ui-black-transparent !important;
padding: .75rem 1rem !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.25rem !important;
- z-index: 100 !important;
+ z-index: $z-index-coming-soon !important;
}
.coming-soon:after {
diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css
index ff2505ff9..5a02ce797 100644
--- a/src/components/context-menu/context-menu.css
+++ b/src/components/context-menu/context-menu.css
@@ -1,5 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
+@import "../../css/z-index.css";
.context-menu {
min-width: 130px;
@@ -13,7 +14,7 @@
box-shadow: 0px 0px 5px 1px $ui-black-transparent;
pointer-events: none;
transition: opacity 0.2s ease;
- z-index: 200; /* Above the stage */
+ z-index: $z-index-context-menu;
}
.menu-item {
diff --git a/src/components/drag-layer/drag-layer.css b/src/components/drag-layer/drag-layer.css
index 711b5eea8..0e89c6b5c 100644
--- a/src/components/drag-layer/drag-layer.css
+++ b/src/components/drag-layer/drag-layer.css
@@ -1,10 +1,11 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.drag-layer {
position: fixed;
pointer-events: none;
- z-index: 1000; /* Above everything */
+ z-index: $z-index-drag-layer;
left: 0;
top: 0;
width: 100%;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 2e4e7b846..e1739444a 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.page-wrapper {
height: 100%;
@@ -190,7 +191,7 @@
position: absolute;
bottom: 0;
left: 0;
- z-index: 50; /** Force extension button above the ScratchBlocks flyout. */
+ z-index: $z-index-extension-button;
background: $motion-primary;
border: 1px solid $motion-primary;
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index 93480429b..b41c02b1b 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/loader/loader.css b/src/components/loader/loader.css
index 8ebbdb5cf..9f97b3e81 100644
--- a/src/components/loader/loader.css
+++ b/src/components/loader/loader.css
@@ -1,4 +1,5 @@
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.background {
position: fixed;
@@ -6,7 +7,7 @@
left: 0;
width: 100%;
height: 100%;
- z-index: 999; /* Below preview modal */
+ z-index: $z-index-loader;
display: flex;
justify-content: center;
align-items: center;
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 96c64b345..8063361d9 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -1,5 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
+@import "../../css/z-index.css";
.menu-bar {
display: flex;
@@ -44,8 +45,7 @@
}
.menu {
- /* blocklyToolboxDiv is 40 */
- z-index: 50;
+ z-index: $z-index-menu-bar;
top: $menu-bar-height;
}
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 2a69d8ba6..3aa21280b 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -1,5 +1,6 @@
@import "../../css/colors.css";
@import "../../css/units.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -7,7 +8,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index f7337e90f..97a62e02d 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -1,10 +1,11 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.monitor-container {
position: absolute;
background: $ui-primary;
- z-index: 100;
+ z-index: $z-index-monitor;
border: 1px solid $ui-black-transparent;
border-radius: calc($space / 2);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -19,7 +20,7 @@
}
.dragging {
- z-index: 101;
+ z-index: $z-index-monitor-dragging;
box-shadow: 3px 3px 5px #888888;
}
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index 837ed92cf..2c35acf63 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 2ac722efc..24194b332 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.stage-header-wrapper {
position: relative;
@@ -11,7 +12,7 @@
top: 0;
left: 0;
right: 0;
- z-index: 5000;
+ z-index: $z-index-stage-header;
}
.stage-menu-wrapper {
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index d2c7894c7..15ac8bcc1 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -1,5 +1,6 @@
@import "../../css/units.css";
@import "../../css/colors.css";
+@import "../../css/z-index.css";
.stage {
/*
@@ -21,7 +22,7 @@
.with-color-picker {
cursor: none;
- z-index: 2001;
+ z-index: $z-index-stage-with-color-picker;
}
.color-picker-background {
@@ -30,7 +31,7 @@
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
display: block;
- z-index: 2000;
+ z-index: $z-index-stage-color-picker-background;
top: 0;
left: 0;
}
@@ -45,7 +46,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 5000;
+ z-index: $z-index-stage-wrapper-overlay;
background-color: $ui-white;
}
@@ -86,6 +87,6 @@
position: absolute;
top: 0;
left: 0;
- z-index: 1000; /* Above everything so it is draggable into other panes */
+ z-index: $z-index-dragging-sprite;
filter: drop-shadow(5px 5px 5px $ui-black-transparent);
}
diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css
index 334ef8f68..f1b6ff6ef 100644
--- a/src/components/webgl-modal/webgl-modal.css
+++ b/src/components/webgl-modal/webgl-modal.css
@@ -1,6 +1,7 @@
@import "../../css/colors.css";
@import "../../css/units.css";
@import "../../css/typography.css";
+@import "../../css/z-index.css";
.modal-overlay {
position: fixed;
@@ -8,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
diff --git a/src/css/z-index.css b/src/css/z-index.css
new file mode 100644
index 000000000..dfca96245
--- /dev/null
+++ b/src/css/z-index.css
@@ -0,0 +1,21 @@
+/*
+ Contains constants for the z-index values of elements that are part of the global stack context.
+ In other words, z-index values that are "inside" a component are not added here.
+ This prevents conflicts between identical z-index values in different components.
+*/
+
+$z-index-extension-button: 50; /* Force extension button above the ScratchBlocks flyout */
+$z-index-menu-bar: 50; /* blocklyToolboxDiv is 40 */
+$z-index-card: 100;
+$z-index-coming-soon: 100;
+$z-index-monitor: 100;
+$z-index-monitor-dragging: 101;
+$z-index-context-menu: 200; /* above the stage */
+$z-index-loader: 999; /* below modals */
+$z-index-modal: 1000;
+$z-index-drag-layer: 1000; /* above everything */
+$z-index-dragging-sprite: 1000; /* above everything so it is draggable into other panes */
+$z-index-stage-color-picker-background: 2000;
+$z-index-stage-with-color-picker: 2001;
+$z-index-stage-header: 5000;
+$z-index-stage-wrapper-overlay: 5000;
\ No newline at end of file
--
GitLab