diff --git a/images/button-start.png b/images/button-start.png new file mode 100644 index 0000000000..29f6a9660a Binary files /dev/null and b/images/button-start.png differ diff --git a/images/button-start@2x.png b/images/button-start@2x.png new file mode 100644 index 0000000000..3501025c99 Binary files /dev/null and b/images/button-start@2x.png differ diff --git a/images/button-stop.png b/images/button-stop.png index 14f88011b8..462fcd0f1d 100644 Binary files a/images/button-stop.png and b/images/button-stop.png differ diff --git a/images/button-stop@2x.png b/images/button-stop@2x.png index 3d20f5315a..4ea22127f1 100644 Binary files a/images/button-stop@2x.png and b/images/button-stop@2x.png differ diff --git a/src/components/ContainerDetailsSubheader.react.js b/src/components/ContainerDetailsSubheader.react.js index 11f92f35b3..fa5670e4f7 100644 --- a/src/components/ContainerDetailsSubheader.react.js +++ b/src/components/ContainerDetailsSubheader.react.js @@ -54,12 +54,18 @@ var ContainerDetailsSubheader = React.createClass({ } return (this.props.container.State.Downloading || this.props.container.State.Restarting); }, - stopDisabled: function () { + disableStop: function () { if (!this.props.container) { return false; } return (this.props.container.State.Downloading || this.props.container.State.ExitCode); }, + disableStart: function () { + if (!this.props.container) { + return false; + } + return (this.props.container.State.Downloading || this.props.container.State.Running); + }, disableTerminal: function () { if (!this.props.container) { return false; @@ -110,12 +116,19 @@ var ContainerDetailsSubheader = React.createClass({ } }, handleStop: function () { - if (!this.stopDisabled()) { + if (!this.disableStop()) { metrics.track('Stopped Container'); ContainerStore.stop(this.props.container.Name, function () { }); } }, + handleStart: function () { + if (!this.disableStart()) { + metrics.track('Started Container'); + ContainerStore.start(this.props.container.Name, function () { + }); + } + }, handleTerminal: function () { if (!this.disableTerminal()) { metrics.track('Terminaled Into Container'); @@ -155,6 +168,14 @@ var ContainerDetailsSubheader = React.createClass({ var $action = $(this.getDOMNode()).find('.action .stop'); $action.css("visibility", "hidden"); }, + handleItemMouseEnterStart: function () { + var $action = $(this.getDOMNode()).find('.action .start'); + $action.css("visibility", "visible"); + }, + handleItemMouseLeaveStart: function () { + var $action = $(this.getDOMNode()).find('.action .start'); + $action.css("visibility", "hidden"); + }, handleItemMouseEnterTerminal: function () { var $action = $(this.getDOMNode()).find('.action .terminal'); $action.css("visibility", "visible"); @@ -174,7 +195,11 @@ var ContainerDetailsSubheader = React.createClass({ }); var stopActionClass = classNames({ action: true, - disabled: this.stopDisabled() + disabled: this.disableStop() + }); + var startActionClass = classNames({ + action: true, + disabled: this.disableStart() }); var terminalActionClass = classNames({ action: true, @@ -195,6 +220,22 @@ var ContainerDetailsSubheader = React.createClass({ 'active': this.state.currentRoute && (this.state.currentRoute.indexOf('containerSettings') >= 0), disabled: this.disableTab() }); + var startStopToggle; + if (this.disableStop()) { + startStopToggle = ( +