From 8168483d9805b2f40b149317d84e7068515590e7 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Mon, 9 Jan 2017 16:15:55 -0500
Subject: [PATCH] Use native SVG rendering for library thumbnails
Now possible because we send down the correct content type for SVG assets.
---
src/components/library-item/library-item.css | 9 +++++++++
src/components/library-item/library-item.jsx | 9 ++++++---
2 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index 4d90f6147..e3c051cab 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -1,8 +1,17 @@
.library-item {
cursor: pointer;
text-align: center;
+ width: 140px;
}
.library-item.is-selected {
background: #aaa;
border-radius: 6px;
}
+.library-item-image-container {
+ height: 140px;
+}
+.library-item-image {
+ align-self: center;
+ max-width: 100%;
+ max-height: 100%;
+}
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 3e47a2bee..a34ad206d 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -3,7 +3,6 @@ const bindAll = require('lodash.bindall');
const React = require('react');
const Box = require('../box/box.jsx');
-const CostumeCanvas = require('../costume-canvas/costume-canvas.jsx');
const styles = require('./library-item.css');
class LibraryItem extends React.Component {
@@ -25,10 +24,14 @@ class LibraryItem extends React.Component {
[styles.isSelected]: this.props.selected
})}
direction="column"
- width={140}
onClick={this.handleClick}
>
- <CostumeCanvas url={this.props.iconURL} />
+ <Box className={styles.libraryItemImageContainer}>
+ <img
+ className={styles.libraryItemImage}
+ src={this.props.iconURL}
+ />
+ </Box>
<p>{this.props.name}</p>
</Box>
);
--
GitLab