- Fix zero clipboard integration to properly hide the clipboard controls when flash is not available.

- Hide the download .dockercfg link in Safari, since it doesn't work there anyway

static/css/quay.css

@@ -2257,6 +2257,14 @@ p.editable:hover i {
   position: relative;
 }
 
+.copy-box-element.disabled .input-group-addon {
+  display: none;
+}
+
+.copy-box-element.disabled input {
+  border-radius: 4px !important;
+}
+
 .global-zeroclipboard-container embed {
   cursor: pointer;
 }

static/directives/copy-box.html

@@ -1,4 +1,4 @@
-<div class="copy-box-element">
+<div class="copy-box-element" ng-class="disabled ? 'disabled' : ''">
   <div class="id-container">
     <div class="input-group">
       <input type="text" class="form-control" value="{{ value }}" readonly>

static/directives/docker-auth-dialog.html

@@ -19,7 +19,7 @@
            <i class="fa fa-download"></i>
            <a href="javascript:void(0)" ng-click="downloadCfg(shownRobot)">Download .dockercfg file</a>
          </span>
-         <div id="clipboardCopied" style="display: none">
+         <div class="clipboard-copied-message" style="display: none">
            Copied to clipboard
          </div>
          <button id="copyClipboard" type="button" class="btn btn-primary" data-clipboard-target="token-view">Copy to clipboard</button>

static/js/app.js

@@ -1,6 +1,42 @@
 var TEAM_PATTERN = '^[a-zA-Z][a-zA-Z0-9]+$';
 var ROBOT_PATTERN = '^[a-zA-Z][a-zA-Z0-9]{3,29}$';
 
+$.fn.clipboardCopy = function() { 
+  if (zeroClipboardSupported) {
+    (new ZeroClipboard($(this),  { 'moviePath': 'static/lib/ZeroClipboard.swf' }));
+    return true;
+  }
+
+  this.hide();
+  return false;
+};
+
+var zeroClipboardSupported = true;
+ZeroClipboard.on("error", function(e) {
+  zeroClipboardSupported = false;  
+});
+
+ZeroClipboard.on('aftercopy', function(e) {
+  var container = e.target.parentNode.parentNode.parentNode;
+  var message = $(container).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);
+});
+
 function getRestUrl(args) {
   var url = '';
   for (var i = 0; i < arguments.length; ++i) {
@@ -2106,6 +2142,8 @@ quayApp.directive('copyBox', function () {
       'hoveringMessage': '=hoveringMessage'
     },
     controller: function($scope, $element, $rootScope) {
+      $scope.disabled = false;
+
       var number = $rootScope.__copyBoxIdCounter || 0;
       $rootScope.__copyBoxIdCounter = number + 1;
       $scope.inputId = "copy-box-input-" + number;
@@ -2115,27 +2153,7 @@ quayApp.directive('copyBox', function () {
 
       input.attr('id', $scope.inputId);
       button.attr('data-clipboard-target', $scope.inputId);
-
+      $scope.disabled = !button.clipboardCopy();
-      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;
@@ -2367,7 +2385,13 @@ quayApp.directive('dockerAuthDialog', function (Config) {
     },
     controller: function($scope, $element) {     
       $scope.isDownloadSupported = function() {
-        try { return !!new Blob(); } catch(e){}
+        var isSafari = /^((?!chrome).)*safari/i.test(navigator.userAgent);
+        if (isSafari) {
+          // Doesn't work properly in Safari, sadly.
+          return false;
+        }
+
+        try { return !!new Blob(); } catch(e) {}
         return false;
       };
 

static/js/controllers.js

@@ -1,25 +1,3 @@
-$.fn.clipboardCopy = function() { 
-  var clip = new ZeroClipboard($(this),  { 'moviePath': 'static/lib/ZeroClipboard.swf' });  
-
-  clip.on('complete', function() {
-    // Resets the animation.
-    var elem = $('#clipboardCopied')[0];
-    if (!elem) {
-      return;
-    }
-
-    elem.style.display = 'none';
-    elem.classList.remove('animated');
-
-    // Show the notification.
-    setTimeout(function() {
-      if (!elem) { return; }
-      elem.style.display = 'inline-block';
-      elem.classList.add('animated');
-    }, 10);
-  });
-};
-
 function GuideCtrl() {
 }
 
@@ -733,8 +711,6 @@ function RepoCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiServi
 
       // Load the builds for this repository. If none are active it will cancel the poll.
       startBuildInfoTimer(repo);
-
-      $('#copyClipboard').clipboardCopy();
     });
   };
 
@@ -1901,9 +1877,6 @@ function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, I
 
       // Fetch the image's changes.
       fetchChanges();
-
-      $('#copyClipboard').clipboardCopy();
-
       return image;
     });
   };

static/partials/view-repo.html

@@ -58,16 +58,9 @@
         <span class="pull-command visible-md-inline">
           <div class="pull-container" data-title="Pull repository" bs-tooltip="tooltip.title">
             <div class="input-group">
-              <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull ' + Config.getDomain() + '/' + repo.namespace + '/' + repo.name }}" readonly>
+              <div class="copy-box" hovering-message="true" value="'docker pull ' + Config.getDomain() + '/' + repo.namespace + '/' + repo.name"></div>
-              <span id="copyClipboard" class="input-group-addon" data-title="Copy to Clipboard" data-clipboard-target="pull-text">
-                <i class="fa fa-copy"></i>
-              </span>
             </div>
           </div>
-          
-          <div id="clipboardCopied" class="hovering" style="display: none">
-            Copied to clipboard
-          </div>
         </span>
       </div>
     </div>