diff --git a/static/css/quay.css b/static/css/quay.css index 409ebad1c..5610c1fea 100644 --- a/static/css/quay.css +++ b/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; } diff --git a/static/js/controllers.js b/static/js/controllers.js index f99c4fb9c..365b695e6 100644 --- a/static/js/controllers.js +++ b/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'; diff --git a/static/partials/view-repo.html b/static/partials/view-repo.html index 4b4932bd5..de81596f5 100644 --- a/static/partials/view-repo.html +++ b/static/partials/view-repo.html @@ -27,6 +27,10 @@ + +