Add notification that clipboard copy was successful

static/css/quay.css

@@ -72,6 +72,7 @@ p.editable:hover i {
   float: right;
   display: inline-block;
   font-size: 1.2em;
+  position: relative;
 }
 
 .repo .pull-command .pull-container {
@@ -94,6 +95,49 @@ p.editable:hover i {
   cursor: pointer;
 }
 
+.repo #copyClipboard.zeroclipboard-is-hover {
+  background: #428bca;
+  color: white;
+}
+
+.repo #clipboardCopied {
+   position: absolute;
+   right: 0px;
+   top: 40px;
+
+   font-size: 0.8em;
+
+   background: black;
+   color: white;
+   padding: 6px;
+   border-radius: 4px;
+
+ 
+    -webkit-animation: fadeOut ease-in-out 1;
+    -moz-animation: fadeOut ease-in-out 1;
+    -ms-animation: fadeOut ease-in-out 1;
+    -o-animation: fadeOut ease-in-out 1;
+    animation: fadeOut ease-in-out 1;
+
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    -ms-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+ 
+    -webkit-animation-duration: 4s;
+    -moz-animation-duration: 4s;
+    -ms-animation-duration: 4s;
+    -o-animation-duration: 4s;
+    animation-duration: 4s;
+}
+
+@-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-moz-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-ms-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+
 .repo .settings-cog {
   margin-left: 20px;
 }

static/js/controllers.js

@@ -45,6 +45,16 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
     $scope.currentTag = repo.tags[tag] || repo.tags['latest'];
 
       var clip = new ZeroClipboard($('#copyClipboard'),  { 'moviePath': 'static/js/ZeroClipboard.swf' });
+      clip.on('complete', function() {
+	  // Resets the animation.
+	  var elem = $('#clipboardCopied')[0];
+	  elem.style.display = 'none';
+
+	  // Show the notification.
+	  setTimeout(function() {
+	      elem.style.display = 'block';
+	  }, 1);
+      });
   }, function() {
     $scope.repo = null;
     $rootScope.title = 'Unknown Repository';

static/partials/view-repo.html

@@ -27,6 +27,10 @@
 	    </span>
 	  </div>
       </div>
+
+      <div id="clipboardCopied" style="display: none">
+	Copied to clipboard
+      </div>
     </div>
   </div>