Add support for build status tags, which link to the Quay.io repo

static/css/quay.css

@@ -282,21 +282,6 @@ i.toggle-icon:hover {
   vertical-align: middle;
 }
 
-#copyClipboard {
-  cursor: pointer;
-}
-
-#copyClipboard.zeroclipboard-is-hover {
-  background: #428bca;
-  color: white;
-}
-
-#clipboardCopied.hovering {
-   position: absolute;
-   right: 0px;
-   top: 40px;
-}
-
 .content-container {
   padding-bottom: 70px;
 }
@@ -1651,7 +1636,38 @@ p.editable:hover i {
   margin-top: 28px;
 }
 
-#clipboardCopied {
+.copy-box-element {
+  position: relative;
+}
+
+.global-zeroclipboard-container embed {
+  cursor: pointer;
+}
+
+#copyClipboard.zeroclipboard-is-hover, .copy-box-element .zeroclipboard-is-hover {
+  background: #428bca;
+  color: white;
+  cursor: pointer !important;
+}
+
+#clipboardCopied.hovering, .copy-box-element .hovering {
+   position: absolute;
+   right: 0px;
+   top: 40px;
+   pointer-events: none;
+   z-index: 100;
+}
+
+.copy-box-element .id-container {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.copy-box-element input {
+  background-color: white !important;
+}
+
+#clipboardCopied, .clipboard-copied-message {
    font-size: 0.8em;
    display: inline-block;
    margin-right: 10px;
@@ -1662,7 +1678,7 @@ p.editable:hover i {
    border-radius: 4px;
 }
 
-#clipboardCopied.animated { 
+#clipboardCopied.animated, .clipboard-copied-message { 
     -webkit-animation: fadeOut 4s ease-in-out 0s 1 forwards;
     -moz-animation: fadeOut 4s ease-in-out 0s 1 forwards;
     -ms-animation: fadeOut 4s ease-in-out 0s 1 forwards;

static/directives/copy-box.html

@@ -0,0 +1,14 @@
+<div class="copy-box-element">
+  <div class="id-container">
+    <div class="input-group">
+      <input type="text" class="form-control" value="{{ value }}" readonly>
+      <span class="input-group-addon" title="Copy to Clipboard">
+        <i class="fa fa-copy"></i>
+      </span>
+    </div>
+  </div>
+
+  <div class="clipboard-copied-message" ng-class="hoveringMessage ? 'hovering' : ''" style="display: none">
+    Copied to clipboard
+  </div>
+</div>

static/js/app.js

@@ -963,6 +963,55 @@ quayApp.directive('repoCircle', function () {
 });
 
 
+quayApp.directive('copyBox', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/copy-box.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'value': '=value',
+      'hoveringMessage': '=hoveringMessage'
+    },
+    controller: function($scope, $element, $rootScope) {
+      var number = $rootScope.__copyBoxIdCounter || 0;
+      $rootScope.__copyBoxIdCounter = number + 1;
+      $scope.inputId = "copy-box-input-" + number;
+      
+      var button = $($element).find('.input-group-addon');
+      var input = $($element).find('input');
+
+      input.attr('id', $scope.inputId);
+      button.attr('data-clipboard-target', $scope.inputId);
+
+      var clip = new ZeroClipboard($(button),  { 'moviePath': 'static/lib/ZeroClipboard.swf' });  
+      clip.on('complete', function(e) {
+        var message = $(this.parentNode.parentNode.parentNode).find('.clipboard-copied-message')[0];
+
+        // Resets the animation.
+        var elem = message;
+        elem.style.display = 'none';
+        elem.classList.remove('animated');
+
+        // Show the notification.
+        setTimeout(function() {
+          elem.style.display = 'inline-block';
+          elem.classList.add('animated');
+        }, 10);
+
+        // Reset the notification.
+        setTimeout(function() {
+          elem.style.display = 'none';
+        }, 5000);
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
+
 quayApp.directive('userSetup', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -1162,6 +1162,30 @@ function RepoAdminCtrl($scope, Restangular, ApiService, KeyService, $routeParams
   $scope.githubRedirectUri = KeyService.githubRedirectUri;
   $scope.githubClientId = KeyService.githubClientId;
 
+  $scope.getBadgeFormat = function(format, repo) {
+    if (!repo) { return; }
+
+    var imageUrl = 'https://quay.io/repository/' + namespace + '/' + name + '/status';
+    if (!$scope.repo.is_public) {
+      imageUrl += '?token=' + $scope.repo.status_token;
+    }
+
+    var linkUrl = 'https://quay.io/repository/' + namespace + '/' + name;
+
+    switch (format) {
+      case 'svg':
+        return imageUrl;
+
+      case 'md':
+        return '[![Docker Repository on Quay.io](' + imageUrl + ')](' + linkUrl + ')';
+
+      case 'asciidoc':
+        return 'image:' + imageUrl + '["Docker Repository on Quay.io", link="' + linkUrl + '"]';
+    }
+
+    return '';
+  };
+
   $scope.buildEntityForPermission = function(name, permission, kind) {
     var key = name + ':' + kind;
     if ($scope.permissionCache[key]) {

static/partials/image-view.html

@@ -17,20 +17,7 @@
     <dl class="dl-normal">
       <dt>Full Image ID</dt>
       <dd>
-        <div>
-          <div class="id-container">
-            <div class="input-group">
-              <input id="full-id" type="text" class="form-control" value="{{ image.value.id }}" readonly>
-              <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="full-id">
-                <i class="fa fa-copy"></i>
-              </span>
-            </div>
-          </div>
-          
-          <div id="clipboardCopied" style="display: none">
-            Copied to clipboard
-          </div>
-        </div>
+        <div class="copy-box" value="image.value.id"></div>
       </dd>
       <dt>Created</dt>
       <dd am-time-ago="parseDate(image.value.created)"></dd>

static/partials/repo-admin.html

@@ -19,6 +19,7 @@
       <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#permissions">Permissions</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#trigger" ng-click="loadTriggers()">Build Triggers</a></li>
+        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#badge">Status Badge</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#webhook" ng-click="loadWebhooks()">Webhooks</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#publicprivate">Public/Private</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#delete">Delete</a></li>
@@ -34,6 +35,52 @@
         <div id="logs" class="tab-pane">
           <div class="logs-view" repository="repo" visible="logsShown"></div>
         </div>
+
+        <!-- Badge tab -->
+        <div id="badge" class="tab-pane">
+          <div class="panel panel-default">
+            <div class="panel-heading">Status Badge
+              <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Embeddable widget for displaying the status of the repository"></i>
+            </div>
+            <div class="panel-body">
+              <div class="alert alert-warning" ng-if="!repo.is_public">
+                Note: This repository is currently <b>private</b>. Publishing this badge will reveal the status information of your repository (and links may
+                not work for unregistered users).
+              </div>
+              
+              <!-- Status Image -->
+              <a ng-href="/repository/{{ repo.namespace }}/{{ repo.name }}" ng-if="repo && repo.name">
+                <img ng-src="/repository/{{ repo.namespace }}/{{ repo.name }}/status?token={{ repo.status_token }}" title="Docker Repository on Quay.io">
+              </a>
+
+              <!-- Embed formats -->
+              <table style="margin-top: 20px; width: 600px;">
+                <thead>
+                  <th style="width: 150px"></th>
+                  <th></th>
+                </thead>
+                <tr>
+                  <td>Image (SVG):</td>
+                  <td>
+                    <div class="copy-box" hovering-message="true" value="getBadgeFormat('svg', repo)"></div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>Markdown:</td>
+                  <td>
+                    <div class="copy-box" hovering-message="true" value="getBadgeFormat('md', repo)"></div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>AsciiDoc:</td>
+                  <td>
+                    <div class="copy-box" hovering-message="true" value="getBadgeFormat('asciidoc', repo)"></div>
+                  </td>
+                </tr>                
+              </table>
+            </div>
+          </div>
+        </div>
         
         <!-- Permissions tab -->
         <div id="permissions" class="tab-pane active">

static/partials/view-repo.html

@@ -68,7 +68,6 @@
             Copied to clipboard
           </div>
         </span>
-
       </div>
     </div>