diff --git a/package-lock.json b/package-lock.json index da57deb21..a4fe65224 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "Kitematic", - "version": "0.17.4", + "version": "0.17.5", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -10411,6 +10411,11 @@ } } }, + "rekcod": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/rekcod/-/rekcod-2.1.1.tgz", + "integrity": "sha512-2SSgAX3d24FrPWkzPA7tN8kpELHKd/TWv1TnhISIJDRqQ7SCduEwKOriGAt+L/Ws4Aq0BIbL39CLyHvsOQ9/Nw==" + }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", diff --git a/package.json b/package.json index 316a51bfa..37df57435 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react-bootstrap": "0.20.3", "react-retina-image": "1.3.3", "react-router": "0.13.6", + "rekcod": "^2.1.1", "request": "^2.88.0", "request-progress": "0.3.1", "rimraf": "2.6.2", diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js index 70cfa8781..1c5448036 100644 --- a/src/components/ContainerSettingsGeneral.react.js +++ b/src/components/ContainerSettingsGeneral.react.js @@ -7,6 +7,7 @@ const dialog = remote.dialog; import ContainerUtil from '../utils/ContainerUtil'; import containerActions from '../actions/ContainerActions'; import util from '../utils/Util'; +import rekcod from 'rekcod'; var ContainerSettingsGeneral = React.createClass({ mixins: [React.addons.LinkedStateMixin], @@ -27,6 +28,7 @@ var ContainerSettingsGeneral = React.createClass({ slugName: null, nameError: null, copiedId: false, + copiedRunCmd: false, env: env }; }, @@ -63,16 +65,14 @@ var ContainerSettingsGeneral = React.createClass({ handleCopyContainerId: function() { clipboard.writeText(this.props.container.Id); - this.setState({ - copiedId: true - }); + this.setState({copiedId: true}); + setTimeout(() => this.setState({copiedId: false}), 5000); + }, - var _this = this; - setTimeout(function() { - _this.setState({ - copiedId: false - }); - }, 5000); + handleCopyDockerRunCmd: function (cmd) { + clipboard.writeText(cmd); + this.setState({copiedRunCmd: true}); + setTimeout(() => this.setState({copiedRunCmd: false}), 5000); }, handleSaveContainerName: function () { @@ -169,11 +169,15 @@ var ContainerSettingsGeneral = React.createClass({ return false; } - var clipboardStatus; - var willBeRenamedAs; - var btnSaveName = ( + const runCmd = rekcod.translate(this.props.container).command; + + let idCopiedToClipboard; + let runCmdCopiedToClipboard; + let willBeRenamedAs; + let btnSaveName = ( Save ); + if (this.state.slugName) { willBeRenamedAs = (

Will be renamed as: {this.state.slugName}

@@ -188,11 +192,17 @@ var ContainerSettingsGeneral = React.createClass({ } if (this.state.copiedId) { - clipboardStatus = ( + idCopiedToClipboard = (

Copied to Clipboard

); } + if (this.state.copiedRunCmd) { + runCmdCopiedToClipboard = ( +

Copied to Clipboard

+ ); + } + let containerInfo = (

Container Info

@@ -200,7 +210,7 @@ var ContainerSettingsGeneral = React.createClass({
ID
Copy - {clipboardStatus} + {idCopiedToClipboard}
NAME
@@ -208,6 +218,12 @@ var ContainerSettingsGeneral = React.createClass({ {btnSaveName} {willBeRenamedAs}
+
+
COMMAND
+ + this.handleCopyDockerRunCmd(runCmd)}>Copy + {runCmdCopiedToClipboard} +
); diff --git a/styles/container-settings.less b/styles/container-settings.less index 2641a3bda..8d7bd2851 100644 --- a/styles/container-settings.less +++ b/styles/container-settings.less @@ -63,6 +63,8 @@ } .container-info-row { margin-bottom: 5px; + display: flex; + align-items: baseline; .label-id, .label-name, .label-hostname { .env-vars-labels; display: inline-block; @@ -75,7 +77,7 @@ a { margin-left: 10px; } - input { + input, textarea { width: 55%; max-width: 500px; } diff --git a/styles/theme.less b/styles/theme.less index ec2f459c4..15d62bfe8 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -32,7 +32,7 @@ a { outline: 0 !important; } -input[type="text"] { +input[type="text"], textarea { &.line { border: 0; border-bottom: 1px solid @gray-lightest;