Merge pull request #181 from vohndernet/add-sketch-thumbnail

Added sketch thumbnail
uclaacm · Jan 24, 2020 · c27ccf1 · c27ccf1
2 parents 83c4823 + 03bf31e
commit c27ccf1
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/TextEditor/components/TextEditor.js b/src/components/TextEditor/components/TextEditor.js
@@ -10,7 +10,7 @@ import ViewportAwareButton from "../../common/ViewportAwareButton.js";
 import DropdownButtonContainer from "../../common/containers/DropdownButtonContainer";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
-
+import { SketchThumbnailArray } from "../../Sketches/constants";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 let CodeMirror = null;
@@ -114,9 +114,15 @@ class TextEditor extends React.Component {
   renderDropdown = () => <DropdownButtonContainer />;
 
   renderBanner = () => {
+    let thumbnail = SketchThumbnailArray[this.props.thumbnail];
     return (
       <div className="code-section-banner">
         <OpenPanelButtonContainer />
+        <img
+          className="program-sketch-thumbnail"
+          src={`${process.env.PUBLIC_URL}/img/sketch-thumbnails/${thumbnail}.svg`}
+          alt="sketch thumbnail"
+        />
         {this.renderDropdown()}
         <div style={{ marginLeft: "auto", marginRight: ".5rem" }}>
           <EditorRadio

diff --git a/src/styles/Editor.scss b/src/styles/Editor.scss
@@ -24,6 +24,19 @@
   }
 }
 
+.program-sketch-thumbnail {
+  position: relative;
+  left: 6px;
+  height: 50px;
+  width: 50px;
+  padding: 4px;
+  border-radius: 25px;
+  @include themify($themes) {
+    background-color: themed("cardBackground")
+}
+}
+
+
 .code-section-banner {
   display: flex;
   flex-direction: row;
@@ -49,6 +62,8 @@
 }
 
 .editor-language-dropdown {
+  position: relative;
+  left: 6px;
   flex: 0 1 auto;
 }