From 7b217c6fceefe8bdd0123d4c344fa4c052f5a0d3 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 16 Jan 2019 11:09:39 -0500
Subject: [PATCH] Make sprite selector item absolutely position images to
prevent layouts
On some projects, the sprite image changes frequently, which can cause global layouts and paints if we arent careful. Use the same absolute positioning strategy from the sprite library animations to contain layouts to the sprite image itself
---
src/components/asset-panel/selector.css | 2 +-
src/components/backpack/backpack.css | 12 ++++++++++--
.../sprite-selector-item.css | 18 +++++++++++++++++-
.../sprite-selector-item.jsx | 14 +++++++++-----
4 files changed, 37 insertions(+), 9 deletions(-)
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index 535c38b0b..ad24ed954 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -56,7 +56,7 @@ $fade-out-distance: 100px;
.list-item {
width: 5rem;
- min-height: 5rem;
+ height: 5rem;
margin: 0.5rem auto;
}
diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css
index ad7644c64..de7bc72d2 100644
--- a/src/components/backpack/backpack.css
+++ b/src/components/backpack/backpack.css
@@ -69,9 +69,17 @@
}
.backpack-item {
- min-width: 4rem;
- max-width: 6rem;
+ width: 4rem;
+ height: 4.5rem;
margin: 0 0.25rem;
+
+ /* Need to hide overflow because of background setting below */
+ overflow: hidden;
+}
+
+.backpack-item > div {
+ /* Need to set the background to get blend-mode below to work */
+ background: $ui-primary;
}
.backpack-item img {
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 7a2c1f4ce..ee20c444c 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -39,8 +39,24 @@
filter: drop-shadow(0px 0px 2px $ui-black-transparent);
}
+/* Outer/Inner chicanery is to prevent layouts when sprite image changes */
+.sprite-image-outer {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ transform: translateZ(0);
+}
+
+.sprite-image-inner {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
.sprite-image {
- margin: auto;
user-select: none;
pointer-events: none;
max-width: 32px;
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index ef5b85f19..3f9ba0494 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -37,11 +37,15 @@ const SpriteSelectorItem = props => (
<div className={styles.number}>{props.number}</div>
)}
{props.costumeURL ? (
- <img
- className={styles.spriteImage}
- draggable={false}
- src={props.costumeURL}
- />
+ <div className={styles.spriteImageOuter}>
+ <div className={styles.spriteImageInner}>
+ <img
+ className={styles.spriteImage}
+ draggable={false}
+ src={props.costumeURL}
+ />
+ </div>
+ </div>
) : null}
<div className={styles.spriteInfo}>
<div className={styles.spriteName}>{props.name}</div>
--
GitLab