From 76d9cbc14ffb2044b7cb8c0b126d7fd228b5b4f3 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Tue, 1 Oct 2013 16:42:20 -0400 Subject: [PATCH] Add spin.js-based throbber for all loading --- static/css/quay.css | 4 +++ static/js/app.js | 28 +++++++++++++++++ static/js/controllers.js | 53 +++++++++++++++++++++++---------- static/lib/spin.min.js | 1 + static/partials/repo-admin.html | 10 +++++-- static/partials/repo-list.html | 6 +++- static/partials/view-repo.html | 10 +++++-- templates/index.html | 1 + 8 files changed, 90 insertions(+), 23 deletions(-) create mode 100644 static/lib/spin.min.js diff --git a/static/css/quay.css b/static/css/quay.css index 3a694b173..4d7943e8b 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -1,3 +1,7 @@ +.loading { + padding: 20px; +} + .landing { position: relative; width: 100%; diff --git a/static/js/app.js b/static/js/app.js index 195c47a6c..9364c133e 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -1,3 +1,31 @@ +// Register any plugin code. +$.fn.spin = function(opts) { + this.each(function() { + var $this = $(this), + spinner = $this.data('spinner'); + + if (spinner) spinner.stop(); + if (opts !== false) { + options = { + color: $this.css('color') || '#000', + lines: 12, // The number of lines to draw + length: 7, // The length of each line + width: 4, // The line thickness + radius: 10, // The radius of the inner circle + speed: 1, // Rounds per second + trail: 100, // Afterglow percentage + shadow: false // Whether to render a shadow + }; + + opts = $.extend(options, opts); + spinner = new Spinner(opts).spin(this); + $this.data('spinner', spinner); + } + }); + return this; +}; + +// Start the application code itself. quayApp = angular.module('quay', ['restangular', 'angularMoment'], function($provide) { $provide.factory('UserService', ['Restangular', function(Restangular) { var userResponse = { diff --git a/static/js/controllers.js b/static/js/controllers.js index 4c2688c1e..2ccf35b5f 100644 --- a/static/js/controllers.js +++ b/static/js/controllers.js @@ -78,11 +78,6 @@ function HeaderCtrl($scope, UserService) { } function RepoListCtrl($scope, Restangular) { - var repositoryFetch = Restangular.all('repository/'); - repositoryFetch.getList().then(function(resp) { - $scope.repositories = resp.repositories; - }); - $scope.getCommentFirstLine = function(commentString) { return getMarkedDown(getFirstTextLine(commentString)); }; @@ -91,6 +86,16 @@ function RepoListCtrl($scope, Restangular) { if (!string) { return ''; } return getMarkedDown(string); }; + + $('.spin').spin(); + $scope.loading = true; + + // Load the list of repositories. + var repositoryFetch = Restangular.all('repository/'); + repositoryFetch.getList().then(function(resp) { + $scope.repositories = resp.repositories; + $scope.loading = false; + }); } function LandingCtrl($scope) { @@ -162,25 +167,31 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) { var name = $routeParams.name; var tag = $routeParams.tag || 'latest'; + $('.spin').spin(); + $scope.loading = true; + var repositoryFetch = Restangular.one('repository/' + namespace + '/' + name); repositoryFetch.get().then(function(repo) { $rootScope.title = namespace + '/' + name; $scope.repo = repo; $scope.currentTag = repo.tags[tag] || repo.tags['latest']; - var clip = new ZeroClipboard($('#copyClipboard'), { 'moviePath': 'static/lib/ZeroClipboard.swf' }); - clip.on('complete', function() { - // Resets the animation. - var elem = $('#clipboardCopied')[0]; - elem.style.display = 'none'; + var clip = new ZeroClipboard($('#copyClipboard'), { 'moviePath': 'static/lib/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); + }); - // Show the notification. - setTimeout(function() { - elem.style.display = 'block'; - }, 1); - }); + $scope.loading = false; }, function() { $scope.repo = null; + $scope.loading = false; $rootScope.title = 'Unknown Repository'; }); } @@ -189,7 +200,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) { var namespace = $routeParams.namespace; var name = $routeParams.name; - $('#userSearch').typeahead({ + $('#userSearch').typeahead({ name: 'users', remote: { url: '/api/users/%QUERY', @@ -311,11 +322,19 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) { $('#cannotchangeModal').modal({}); }); }; + + $('.spin').spin(); + $scope.loading = true; // Fetch the repository information. var repositoryFetch = Restangular.one('repository/' + namespace + '/' + name); repositoryFetch.get().then(function(repo) { $scope.repo = repo; + $scope.loading = !($scope.permissions && $scope.repo); + }, function() { + $scope.permissions = null; + $rootScope.title = 'Unknown Repository'; + $scope.loading = false; }); // Fetch the permissions. @@ -323,8 +342,10 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) { permissionsFetch.get().then(function(resp) { $rootScope.title = 'Settings - ' + namespace + '/' + name; $scope.permissions = resp.permissions; + $scope.loading = !($scope.permissions && $scope.repo); }, function() { $scope.permissions = null; $rootScope.title = 'Unknown Repository'; + $scope.loading = false; }); } \ No newline at end of file diff --git a/static/lib/spin.min.js b/static/lib/spin.min.js new file mode 100644 index 000000000..9e615027b --- /dev/null +++ b/static/lib/spin.min.js @@ -0,0 +1 @@ +(function(a,b,c){function O(a){H(arguments,function(b,d){a[b]===c&&(a[b]=d)});return a}function N(a){H(arguments,function(b,c){a[m][M(a,b)||b]=c});return a}function M(a,b){var d=a[m],f,g;if(d[b]!==c){return b}b=b.charAt(0).toUpperCase()+b.slice(1);for(g=0;g +
+
+
+ +
No repository found
-
+

@@ -14,7 +18,7 @@
User Access Permissions
- + diff --git a/static/partials/repo-list.html b/static/partials/repo-list.html index 4a81873d7..a57acccd3 100644 --- a/static/partials/repo-list.html +++ b/static/partials/repo-list.html @@ -1,4 +1,8 @@ -
+
+
+
+ +

Repositories

diff --git a/static/partials/view-repo.html b/static/partials/view-repo.html index a2fc7cd47..d2dc1b31a 100644 --- a/static/partials/view-repo.html +++ b/static/partials/view-repo.html @@ -1,8 +1,12 @@ -
+
No repository found
-
+
+
+
+ +

@@ -81,7 +85,7 @@