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 (