Add fade out animation for copy container id feedback

Signed-off-by: Clement Ho <ClemMakesApps@gmail.com>
docker · Jun 1, 2016 · 1b68613 · 1b68613
1 parent 458c3d6
commit 1b68613
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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;