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 = ( +
+
+ Start +
+ ); + } else { + startStopToggle = ( +
+
+ Stop +
+ ); + } return (
@@ -206,10 +247,7 @@ var ContainerDetailsSubheader = React.createClass({
Restart
-
-
- Stop -
+ {{startStopToggle}}
Terminal diff --git a/src/stores/ContainerStore.js b/src/stores/ContainerStore.js index 080684cec4..2761bcdc68 100644 --- a/src/stores/ContainerStore.js +++ b/src/stores/ContainerStore.js @@ -411,6 +411,16 @@ var ContainerStore = assign(Object.create(EventEmitter.prototype), { } }); }, + start: function (name, callback) { + var container = docker.client().getContainer(name); + container.start(err => { + if (err && err.statusCode !== 304) { + callback(err); + } else { + this.fetchContainer(name, callback); + } + }); + }, remove: function (name, callback) { if (_placeholders[name]) { delete _placeholders[name]; diff --git a/styles/right-panel.less b/styles/right-panel.less index e36251045f..adbe6ace5c 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -25,6 +25,10 @@ .action { display: inline-block; position: relative; + img { + width: 42px; + height: 42px; + } &.disabled { opacity: 0.3; } @@ -40,19 +44,18 @@ top: 45px; &.view { left: 7px; - //left: 0px; } &.restart { left: 2px; - //left: -18px; } &.stop { left: 7px; - //left: -18px; + } + &.start { + left: 7px; } &.terminal { left: -1px; - //left: -30px; } visibility: hidden; }