diff --git a/src/components/green-flag/green-flag.jsx b/src/components/green-flag/green-flag.jsx index d3c00d70c0b..8e0c12d593c 100644 --- a/src/components/green-flag/green-flag.jsx +++ b/src/components/green-flag/green-flag.jsx @@ -3,6 +3,7 @@ const greenFlagIcon = require('./green-flag.svg'); const GreenFlagComponent = function (props) { const { + active, onClick, title, ...componentProps @@ -15,7 +16,9 @@ const GreenFlagComponent = function (props) { position: 'absolute', top: 380, right: 440, - width: 50 + width: 50, + // @todo Get real design here + filter: active ? 'saturate(200%) brightness(150%)' : 'none' }} title={title} onClick={onClick} @@ -25,11 +28,13 @@ const GreenFlagComponent = function (props) { }; GreenFlagComponent.propTypes = { + active: React.PropTypes.bool, onClick: React.PropTypes.func, title: React.PropTypes.string }; GreenFlagComponent.defaultProps = { + active: false, title: 'Go' }; diff --git a/src/components/stop-all/stop-all.jsx b/src/components/stop-all/stop-all.jsx index a1208f7d3f5..0facbe40c5c 100644 --- a/src/components/stop-all/stop-all.jsx +++ b/src/components/stop-all/stop-all.jsx @@ -3,6 +3,7 @@ const stopAllIcon = require('./stop-all.svg'); const StopAllComponent = function (props) { const { + active, onClick, title, ...componentProps @@ -15,7 +16,9 @@ const StopAllComponent = function (props) { position: 'absolute', top: 380, right: 380, - width: 50 + width: 50, + // @todo Get real design here + filter: active ? 'saturate(200%) brightness(150%)' : 'none' }} title={title} onClick={onClick} @@ -25,11 +28,13 @@ const StopAllComponent = function (props) { }; StopAllComponent.propTypes = { + active: React.PropTypes.bool, onClick: React.PropTypes.func, title: React.PropTypes.string }; StopAllComponent.defaultProps = { + active: false, title: 'Stop' }; diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index f1bb945f426..f0ac707e9b2 100644 --- a/src/containers/blocks.jsx +++ b/src/containers/blocks.jsx @@ -12,8 +12,8 @@ class Blocks extends React.Component { bindAll(this, [ 'attachVM', 'detachVM', - 'onStackGlowOn', - 'onStackGlowOff', + 'onScriptGlowOn', + 'onScriptGlowOff', 'onBlockGlowOn', 'onBlockGlowOff', 'onVisualReport', @@ -36,25 +36,25 @@ class Blocks extends React.Component { .getFlyout() .getWorkspace() .addChangeListener(this.props.vm.flyoutBlockListener); - this.props.vm.on('STACK_GLOW_ON', this.onStackGlowOn); - this.props.vm.on('STACK_GLOW_OFF', this.onStackGlowOff); + this.props.vm.on('SCRIPT_GLOW_ON', this.onScriptGlowOn); + this.props.vm.on('SCRIPT_GLOW_OFF', this.onScriptGlowOff); this.props.vm.on('BLOCK_GLOW_ON', this.onBlockGlowOn); this.props.vm.on('BLOCK_GLOW_OFF', this.onBlockGlowOff); this.props.vm.on('VISUAL_REPORT', this.onVisualReport); this.props.vm.on('workspaceUpdate', this.onWorkspaceUpdate); } detachVM () { - this.props.vm.off('STACK_GLOW_ON', this.onStackGlowOn); - this.props.vm.off('STACK_GLOW_OFF', this.onStackGlowOff); + this.props.vm.off('SCRIPT_GLOW_ON', this.onScriptGlowOn); + this.props.vm.off('SCRIPT_GLOW_OFF', this.onScriptGlowOff); this.props.vm.off('BLOCK_GLOW_ON', this.onBlockGlowOn); this.props.vm.off('BLOCK_GLOW_OFF', this.onBlockGlowOff); this.props.vm.off('VISUAL_REPORT', this.onVisualReport); this.props.vm.off('workspaceUpdate', this.onWorkspaceUpdate); } - onStackGlowOn (data) { + onScriptGlowOn (data) { this.workspace.glowStack(data.id, true); } - onStackGlowOff (data) { + onScriptGlowOff (data) { this.workspace.glowStack(data.id, false); } onBlockGlowOn (data) { diff --git a/src/containers/green-flag.jsx b/src/containers/green-flag.jsx index 83cb0c5bda4..a1736bfd5ab 100644 --- a/src/containers/green-flag.jsx +++ b/src/containers/green-flag.jsx @@ -8,7 +8,26 @@ const GreenFlagComponent = require('../components/green-flag/green-flag.jsx'); class GreenFlag extends React.Component { constructor (props) { super(props); - bindAll(this, ['handleClick']); + bindAll(this, [ + 'handleClick', + 'onProjectRunStart', + 'onProjectRunStop' + ]); + this.state = {projectRunning: false}; + } + componentDidMount () { + this.props.vm.on('PROJECT_RUN_START', this.onProjectRunStart); + this.props.vm.on('PROJECT_RUN_STOP', this.onProjectRunStop); + } + componentWillUnmount () { + this.props.vm.off('PROJECT_RUN_START', this.onProjectRunStart); + this.props.vm.off('PROJECT_RUN_STOP', this.onProjectRunStop); + } + onProjectRunStart () { + this.setState({projectRunning: true}); + } + onProjectRunStop () { + this.setState({projectRunning: false}); } handleClick (e) { e.preventDefault(); @@ -21,6 +40,7 @@ class GreenFlag extends React.Component { } = this.props; return ( diff --git a/src/containers/stop-all.jsx b/src/containers/stop-all.jsx index 2cd2baa16ab..f318f98c0d3 100644 --- a/src/containers/stop-all.jsx +++ b/src/containers/stop-all.jsx @@ -7,7 +7,26 @@ const StopAllComponent = require('../components/stop-all/stop-all.jsx'); class StopAll extends React.Component { constructor (props) { super(props); - bindAll(this, ['handleClick']); + bindAll(this, [ + 'handleClick', + 'onProjectRunStart', + 'onProjectRunStop' + ]); + this.state = {projectRunning: false}; + } + componentDidMount () { + this.props.vm.on('PROJECT_RUN_START', this.onProjectRunStart); + this.props.vm.on('PROJECT_RUN_STOP', this.onProjectRunStop); + } + componentWillUnmount () { + this.props.vm.off('PROJECT_RUN_START', this.onProjectRunStart); + this.props.vm.off('PROJECT_RUN_STOP', this.onProjectRunStop); + } + onProjectRunStart () { + this.setState({projectRunning: true}); + } + onProjectRunStop () { + this.setState({projectRunning: false}); } handleClick (e) { e.preventDefault(); @@ -20,6 +39,7 @@ class StopAll extends React.Component { } = this.props; return (