Add clipboard copy support for the pull command

static/css/quay.css

@@ -11,6 +11,10 @@
     display: none;
 }
 
+p.editable {
+  display: inline-block;
+}
+
 p.editable .content:empty:after {
   display: inline-block;
   content: "(Click to add)";
@@ -67,19 +71,29 @@ p.editable:hover i {
 .repo .pull-command {
   float: right;
   display: inline-block;
-}
-
-.repo .pull-command {
   font-size: 1.2em;
 }
 
+.repo .pull-command .pull-container {
+    display: inline-block;
+    width: 300px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
 .repo .pull-command input {
+  cursor: default;
+  background: white;
   color: #666;
   padding: 4px;
   border: 1px solid #ddd;
   width: 300px;
 }
 
+.repo #copyClipboard {
+  cursor: pointer;
+}
+
 .repo .settings-cog {
   margin-left: 20px;
 }

static/js/app.js

@@ -45,4 +45,4 @@ quayApp.run(['$location', '$rootScope', function($location, $rootScope) {
       $rootScope.title = current.$$route.title;
     }
   });
-}]);
+}]);

static/js/controllers.js

@@ -43,6 +43,8 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
     $rootScope.title = namespace + '/' + name;
     $scope.repo = repo;
     $scope.currentTag = repo.tags[tag] || repo.tags['latest'];
+
+      var clip = new ZeroClipboard($('#copyClipboard'),  { 'moviePath': 'static/js/ZeroClipboard.swf' });
   }, function() {
     $scope.repo = null;
     $rootScope.title = 'Unknown Repository';

static/partials/view-repo.html

@@ -17,10 +17,20 @@
 
     <!-- Pull command -->
     <div class="pull-command">
-      Get this repository: <input type="text" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
+      Get this repository: 
+
+      <div class="pull-container">
+	  <div class="input-group">
+	    <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
+	    <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="pull-text">
+	      <i class="icon-copy"></i>
+	    </span>
+	  </div>
+      </div>
     </div>
   </div>
 
+
   <!-- Description -->
   <p ng-class="'description lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()"><span class="content">{{repo.description}}</span><i class="icon-edit"></i></p>
 

templates/index.html

@@ -21,6 +21,8 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
     <script src="static/lib/angular-moment.min.js"></script>
 
+    <script src="static/js/ZeroClipboard.min.js"></script>
+
     <script src="static/js/app.js"></script>
     <script src="static/js/controllers.js"></script>