From 458c3d687b1b2a8b86b69fa233c45224c47ef61b Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Tue, 31 May 2016 09:49:26 -0500
Subject: [PATCH 1/2] Add container ID and copy functionality

Signed-off-by: Clement Ho <ClemMakesApps@gmail.com>
---
 .../ContainerSettingsGeneral.react.js         | 41 ++++++++++++++++---
 styles/container-settings.less                | 24 +++++++++--
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js
index 8e8066e2ce..889e23e042 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
+      });
+    }, 3000);
+  },
+
   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 = (
       <a className="btn btn-action" onClick={this.handleSaveContainerName} disabled="disabled">Save</a>
@@ -171,14 +187,27 @@ var ContainerSettingsGeneral = React.createClass({
       );
     }
 
-    let rename = (
+    if (this.state.copiedId) {
+      clipboardStatus = (
+        <p><strong>Copied to Clipboard</strong></p>
+      );
+    }
+
+    let containerInfo = (
       <div className="settings-section">
-        <h3>Container Name</h3>
-        <div className="container-name">
+        <h3>Container Info</h3>
+        <div className="container-info-row">
+          <div className="label-id">ID</div>
+          <input type="text" className="line disabled" defaultValue={this.props.container.Id} disabled></input>
+          <a className="btn btn-action btn-copy" onClick={this.handleCopyContainerId}>Copy</a>
+          {clipboardStatus}
+        </div>
+        <div className="container-info-row">
+          <div className="label-name">NAME</div>
           <input id="input-container-name" type="text" className="line" placeholder="Container Name" defaultValue={this.props.container.Name} onChange={this.handleNameChange} onKeyUp={this.handleNameOnKeyUp}></input>
+          {btnSaveName}
           {willBeRenamedAs}
         </div>
-        {btnSaveName}
       </div>
     );
 
@@ -202,7 +231,7 @@ var ContainerSettingsGeneral = React.createClass({
 
     return (
       <div className="settings-panel">
-        {rename}
+        {containerInfo}
         <div className="settings-section">
           <h3>Environment Variables</h3>
           <div className="env-vars-labels">
diff --git a/styles/container-settings.less b/styles/container-settings.less
index 242c642f95..8a8153c0b4 100644
--- a/styles/container-settings.less
+++ b/styles/container-settings.less
@@ -61,12 +61,28 @@
     .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;
+      }
       p {
         font-weight: 300;
         margin-top: 5px;
@@ -75,6 +91,8 @@
         strong {
           font-weight: 500;
         }
+        margin-left: 75px;
+        padding-left: 10px;
       }
     }
     .env-vars-labels {

From 1b68613b5a159df1f86976b5beb6fc1d731c8848 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Wed, 1 Jun 2016 10:06:09 -0500
Subject: [PATCH 2/2] Add fade out animation for copy container id feedback

Signed-off-by: Clement Ho <ClemMakesApps@gmail.com>
---
 src/components/ContainerSettingsGeneral.react.js | 4 ++--
 styles/container-settings.less                   | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/ContainerSettingsGeneral.react.js b/src/components/ContainerSettingsGeneral.react.js
index 889e23e042..70cfa87815 100644
--- a/src/components/ContainerSettingsGeneral.react.js
+++ b/src/components/ContainerSettingsGeneral.react.js
@@ -72,7 +72,7 @@ var ContainerSettingsGeneral = React.createClass({
       _this.setState({ 
         copiedId: false
       });
-    }, 3000);
+    }, 5000);
   },
 
   handleSaveContainerName: function () {
@@ -189,7 +189,7 @@ var ContainerSettingsGeneral = React.createClass({
 
     if (this.state.copiedId) {
       clipboardStatus = (
-        <p><strong>Copied to Clipboard</strong></p>
+        <p className="fadeOut"><strong>Copied to Clipboard</strong></p>
       );
     }
 
diff --git a/styles/container-settings.less b/styles/container-settings.less
index 8a8153c0b4..9ebedeb440 100644
--- a/styles/container-settings.less
+++ b/styles/container-settings.less
@@ -83,6 +83,15 @@
       .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;