diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css index 07e57621bbbe2b115812827f22497a6398fb0e49..3fda3a2072ac38f93a346d3515d6c22744d0d4d6 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 692a347cd1eac1b8c33a56973c50bf0ca256d7c6..6b8733c1db116fd53c4a91970206e8596244cd6c 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 6fce08e8c89cc4c06b05761c25d13a591e869700..6a063a166edd3eedd74aeff3efc67874fda5f5e7 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 1e7fe027e54d69c1caead489e3bb5f9f6dde6fdf..8c8c9f96d8d00a3be9c9dc7a5b9136fb182a2405 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 aba3ed42415c51456610ea5a892ddaccd0927921..f2916f605010441b3f7c5985ff5045dae1d5861f 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 77cdf68237a57361bea28f13884676c54269cb79..9713613886c9caa437135a932fb4375be6db5b96 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 e2c5415d0ad04cc2f8d7e1ca23442fbe487d6b53..871dea85b1703aee39ad05020b93fab12463c625 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);