diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js index 8e8066e2ce..70cfa87815 100644 --- a/src/components/ContainerSettingsGeneral.react.js +++ b/src/components/ContainerSettingsGeneral.react.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React from 'react/addons'; import metrics from '../utils/MetricsUtil'; -import electron from 'electron'; +import electron, { clipboard } from 'electron'; const remote = electron.remote; const dialog = remote.dialog; import ContainerUtil from '../utils/ContainerUtil'; @@ -26,6 +26,7 @@ var ContainerSettingsGeneral = React.createClass({ return { slugName: null, nameError: null, + copiedId: false, env: env }; }, @@ -60,6 +61,20 @@ var ContainerSettingsGeneral = React.createClass({ } }, + handleCopyContainerId: function() { + clipboard.writeText(this.props.container.Id); + this.setState({ + copiedId: true + }); + + var _this = this; + setTimeout(function() { + _this.setState({ + copiedId: false + }); + }, 5000); + }, + handleSaveContainerName: function () { var newName = this.state.slugName; if (newName === this.props.container.Name) { @@ -154,6 +169,7 @@ var ContainerSettingsGeneral = React.createClass({ return false; } + var clipboardStatus; var willBeRenamedAs; var btnSaveName = ( Save @@ -171,14 +187,27 @@ var ContainerSettingsGeneral = React.createClass({ ); } - let rename = ( + if (this.state.copiedId) { + clipboardStatus = ( +

Copied to Clipboard

+ ); + } + + let containerInfo = (
-

Container Name

-
+

Container Info

+
+
ID
+ + Copy + {clipboardStatus} +
+
+
NAME
+ {btnSaveName} {willBeRenamedAs}
- {btnSaveName}
); @@ -202,7 +231,7 @@ var ContainerSettingsGeneral = React.createClass({ return (
- {rename} + {containerInfo}

Environment Variables

diff --git a/styles/container-settings.less b/styles/container-settings.less index 242c642f95..9ebedeb440 100644 --- a/styles/container-settings.less +++ b/styles/container-settings.less @@ -61,12 +61,37 @@ .settings-section { margin-bottom: 4rem; } - .container-name { - margin-bottom: 2rem; + .container-info-row { + margin-bottom: 5px; + .label-id, .label-name { + .env-vars-labels; + display: inline-block; + width: 5%; + min-width: 75px; + } + a { + margin-left: 10px; + } input { - width: 100%; + width: 55%; max-width: 500px; } + .btn-copy { + border: none; + margin-left: 11px; + } + .disabled { + border-bottom: none; + } + .fadeOut { + animation: fade-out 5s ease-in-out forwards; + } + @keyframes fade-out { + 0% { opacity: 0; } + 10% { opacity: 1; } + 85% { opacity: 1; } + 100% { opacity: 0; } + } p { font-weight: 300; margin-top: 5px; @@ -75,6 +100,8 @@ strong { font-weight: 500; } + margin-left: 75px; + padding-left: 10px; } } .env-vars-labels {