From ecaee9877eddb2e67e84ce2016a60de74394f353 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Tue, 15 Aug 2017 10:30:27 -0400
Subject: [PATCH] Add green flag and stop buttons to blocks example

Add class name props to the components, and fix positioning for the green flag to be reusable.
---
 src/components/green-flag/green-flag.css |  3 +--
 src/components/green-flag/green-flag.jsx | 13 +++++++++----
 src/components/gui/gui.css               |  4 ++++
 src/components/gui/gui.jsx               |  5 ++++-
 src/components/stop-all/stop-all.jsx     | 13 +++++++++----
 src/examples/blocks-only.css             | 14 ++++++++++++--
 src/examples/blocks-only.jsx             |  8 +++++++-
 7 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css
index 07e57621b..3fda3a207 100644
--- a/src/components/green-flag/green-flag.css
+++ b/src/components/green-flag/green-flag.css
@@ -2,10 +2,9 @@
     width: 1.1rem;
     height: 1.1rem;
     opacity: 0.5;
-    margin: 0.25rem 0.6rem;
     user-select: none;
     cursor: pointer;
-    transition: opacity 0.2s ease-out; /* @todo: standardize with var */ 
+    transition: opacity 0.2s ease-out; /* @todo: standardize with var */
 }
 
 .green-flag.is-active,
diff --git a/src/components/green-flag/green-flag.jsx b/src/components/green-flag/green-flag.jsx
index 692a347cd..6b8733c1d 100644
--- a/src/components/green-flag/green-flag.jsx
+++ b/src/components/green-flag/green-flag.jsx
@@ -8,16 +8,20 @@ import styles from './green-flag.css';
 const GreenFlagComponent = function (props) {
     const {
         active,
+        className,
         onClick,
         title,
         ...componentProps
     } = props;
     return (
         <img
-            className={classNames({
-                [styles.greenFlag]: true,
-                [styles.isActive]: active
-            })}
+            className={classNames(
+                className,
+                styles.greenFlag,
+                {
+                    [styles.isActive]: active
+                }
+            )}
             src={greenFlagIcon}
             title={title}
             onClick={onClick}
@@ -27,6 +31,7 @@ const GreenFlagComponent = function (props) {
 };
 GreenFlagComponent.propTypes = {
     active: PropTypes.bool,
+    className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.string
 };
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 6fce08e8c..6a063a166 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -101,6 +101,10 @@
     position: relative;
 }
 
+.green-flag {
+    margin: 0.25rem 0.6rem;
+}
+
 .stage-and-target-wrapper {
     /*
         Makes rows for children:
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 1e7fe027e..8c8c9f96d 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -90,7 +90,10 @@ const GUIComponent = props => {
 
                     <Box className={styles.stageAndTargetWrapper}>
                         <Box className={styles.stageMenuWrapper}>
-                            <GreenFlag vm={vm} />
+                            <GreenFlag
+                                className={styles.greenFlag}
+                                vm={vm}
+                            />
                             <StopAll vm={vm} />
                         </Box>
                         <Box className={styles.stageWrapper}>
diff --git a/src/components/stop-all/stop-all.jsx b/src/components/stop-all/stop-all.jsx
index aba3ed424..f2916f605 100644
--- a/src/components/stop-all/stop-all.jsx
+++ b/src/components/stop-all/stop-all.jsx
@@ -8,16 +8,20 @@ import styles from './stop-all.css';
 const StopAllComponent = function (props) {
     const {
         active,
+        className,
         onClick,
         title,
         ...componentProps
     } = props;
     return (
         <img
-            className={classNames({
-                [styles.stopAll]: true,
-                [styles.isActive]: active
-            })}
+            className={classNames(
+                className,
+                styles.stopAll,
+                {
+                    [styles.isActive]: active
+                }
+            )}
             src={stopAllIcon}
             title={title}
             onClick={onClick}
@@ -28,6 +32,7 @@ const StopAllComponent = function (props) {
 
 StopAllComponent.propTypes = {
     active: PropTypes.bool,
+    className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     title: PropTypes.string
 };
diff --git a/src/examples/blocks-only.css b/src/examples/blocks-only.css
index 77cdf6823..971361388 100644
--- a/src/examples/blocks-only.css
+++ b/src/examples/blocks-only.css
@@ -1,3 +1,13 @@
-.app {
-    
+.green-flag {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    right: 50px;
+}
+
+.stop-all {
+    position: absolute;
+    z-index: 2;
+    top: 10px;
+    right: 15px;
 }
diff --git a/src/examples/blocks-only.jsx b/src/examples/blocks-only.jsx
index e2c5415d0..871dea85b 100644
--- a/src/examples/blocks-only.jsx
+++ b/src/examples/blocks-only.jsx
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 
 import AppStateHOC from '../lib/app-state-hoc.jsx';
+import GreenFlag from '../containers/green-flag.jsx';
+import StopAll from '../containers/stop-all.jsx';
 import Blocks from '../containers/blocks.jsx';
 import GUI from '../containers/gui.jsx';
 import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
@@ -10,7 +12,10 @@ import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
 import styles from './blocks-only.css';
 
 const mapStateToProps = (state) => ({vm: state.vm});
+
 const VMBlocks = connect(mapStateToProps)(Blocks);
+const VMGreenFlag = connect(mapStateToProps)(GreenFlag);
+const VMStopAll = connect(mapStateToProps)(StopAll);
 
 const BlocksOnly = props => (
     <GUI {...props}>
@@ -20,13 +25,14 @@ const BlocksOnly = props => (
                 media: `static/blocks-media/`
             }}
         />
+        <VMGreenFlag className={styles.greenFlag} />
+        <VMStopAll className={styles.stopAll} />
     </GUI>
 );
 
 const App = AppStateHOC(ProjectLoaderHOC(BlocksOnly));
 
 const appTarget = document.createElement('div');
-appTarget.className = styles.app;
 document.body.appendChild(appTarget);
 
 ReactDOM.render(<App />, appTarget);