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);
--
GitLab