diff --git a/static/directives/repo-list-grid.html b/static/directives/repo-list-grid.html
new file mode 100644
index 000000000..92c9b9b6d
--- /dev/null
+++ b/static/directives/repo-list-grid.html
@@ -0,0 +1,59 @@
+<div class="resource-view" resource="repositories">
+ <div class="repo-listing">
+ <!-- Titles -->
+ <div ng-if="starred" class="repo-list-title">
+ <i class="fa fa-star"></i>
+ Starred
+ </div>
+ <div ng-if="!starred && user.username == namespace.username" class="repo-list-title">
+ <span class="avatar" size="24" hash="namespace.avatar"></span>
+ {{ namespace.username }}
+ </div>
+ <div ng-if="!starred && user.username != namespace.username" class="repo-list-title">
+ <span class="avatar" size="24" hash="namespace.avatar"></span>
+ <a href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>
+ </div>
+
+ <!-- Repositories -->
+ <div ng-if="repositories.length > 0">
+ <div class="row">
+ <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" ng-repeat="repository in repositories">
+ <div class="panel panel-default">
+ <div class="panel-body" ng-class="repository.is_starred ? 'starred' : ''">
+ <div class="row">
+ <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 repo-panel-title-row">
+ <span class="repo-icon repo-circle no-background" repo="repository"></span>
+ <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
+ data-repo="{{repository.namespace}}/{{ repository.name }}">
+ {{ repository.namespace }}/{{ repository.name }}
+ </a>
+ </div>
+ <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
+ <i ng-class="repository.is_starred ? 'starred fa fa-star' : 'fa fa-star-o'" class="star-icon" ng-click="toggleStar({repository: repository})"></i>
+ </div>
+ </div>
+ <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Empty Messages -->
+ <div ng-if="starred && repositories.length == 0">
+ <div class="empty-primary-msg">You haven't starred any repositories yet.</div>
+ <div class="empty-secondary-msg">Stars allow you to easily access your favorite repositories.</div>
+ </div>
+ <div ng-if="!starred && repositories.length == 0">
+ <div class="empty-primary-msg">This namespace doesn't have any viewable repositories.</div>
+ <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
+ </div>
+
+ <!-- HR -->
+ <div class="row">
+ <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+ <hr>
+ </div>
+ </div>
+
+ </div>
+</div>
diff --git a/static/js/app.js b/static/js/app.js
index 63eee0d6e..30eb7be92 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -6663,7 +6663,6 @@ quayApp.directive('tagSpecificImagesView', function () {
return directiveDefinitionObject;
});
-
quayApp.directive('fallbackSrc', function () {
return {
restrict: 'A',
diff --git a/static/js/controllers/repolist.js b/static/js/controllers/repolist.js
index 61b3db426..50243603e 100644
--- a/static/js/controllers/repolist.js
+++ b/static/js/controllers/repolist.js
@@ -47,9 +47,7 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
};
ApiService.createStar(data).then(function(result) {
updateReposAfterStar(repo);
- }, function(result) {
- // TODO(jzelinskie): have some kind of pop-up for star failure
- });
+ }, ApiService.errorDisplay('Could not star repository'));
};
var unstarRepo = function(repo) {
@@ -58,9 +56,7 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
};
ApiService.deleteStar(null, data).then(function(result) {
updateReposAfterUnstar(repo);
- }, function(result) {
- // TODO(jzelinskie): have some kind of pop-up for star failure
- });
+ }, ApiService.errorDisplay('Could not unstar repository'));
};
// Finds a repository within the list of namespaces attached to $scope.
diff --git a/static/js/directives/repo-list-grid.js b/static/js/directives/repo-list-grid.js
new file mode 100644
index 000000000..3f936e6f5
--- /dev/null
+++ b/static/js/directives/repo-list-grid.js
@@ -0,0 +1,14 @@
+quayApp.directive('repoListGrid', function() {
+ return {
+ templateUrl: '/static/directives/repo-list-grid.html',
+ priority: 0,
+ restrict: 'C',
+ scope: {
+ repositories: '=repositories',
+ starred: '=starred',
+ user: "=user",
+ namespace: '=namespace',
+ toggleStar: '&toggleStar'
+ },
+ };
+});
diff --git a/static/partials/repo-list.html b/static/partials/repo-list.html
index 4d53b515a..4671c579d 100644
--- a/static/partials/repo-list.html
+++ b/static/partials/repo-list.html
@@ -1,14 +1,22 @@
+<!-- The user is not logged in -->
<div ng-if="user.anonymous" class="container signin-container">
+
+ <!-- Sign In -->
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
- <div class="empty-primary-msg">You must be signed in to view repositories. </div>
+ <div class="empty-primary-msg">You must be signed in to view repositories.</div>
<div class="user-setup" redirect-url="redirectUrl"></div>
</div>
</div>
+
</div>
-</div>
+
+<!-- The user is logged in -->
<div class="row" ng-if="!user.anonymous">
+
+ <!-- Side Panel -->
<div class="repo-list-sidebar col-lg-3 col-lg-push-9 col-md-3 col-md-push-9 col-sm-4 col-sm-push-8 col-xs-12">
+ <!-- Create Repository Button -->
<div class="button-bar-right">
<a href="/new/">
<button class="btn btn-success">
@@ -17,6 +25,8 @@
</button>
</a>
</div>
+
+ <!-- Users Panel -->
<div class="panel panel-default">
<div class="panel-heading">
Users
@@ -28,6 +38,8 @@
</a>
</div>
</div>
+
+ <!-- Organizations Panel -->
<div class="panel panel-default">
<div class="panel-heading">
Organizations
@@ -46,95 +58,15 @@
</div>
</div>
+ <!-- Repository Listings -->
<div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-8 col-sm-pull-4 col-xs-12">
- <div class="resource-view" resource="starred_repositories">
- <div class="repo-listing">
- <div class="repo-list-title">
- <i class="fa fa-star"></i>
- Starred
- </div>
- <div>
- <div class="row">
- <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" ng-repeat="repository in starred_repositories.value">
- <div class="panel panel-default">
- <div class="panel-body starred">
- <div class="row">
- <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 repo-panel-title-row">
- <span class="repo-icon repo-circle no-background" repo="repository"></span>
- <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
- data-repo="{{repository.namespace}}/{{ repository.name }}" title="{{repository.namespace}}/{{repository.name}}">
- {{repository.namespace }}/{{ repository.name }}
- </a>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
- <i class="star-icon starred fa fa-star" ng-click="toggleStar(repository)"></i>
- </div>
- </div>
- <!-- The description automatically gets put in a <p> which adds margin that throws off our .repo-panel padding -->
- <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
- </div>
- </div>
- </div>
- </div>
- <div ng-show="starred_repositories.value.length == 0">
- <div class="empty-primary-msg">You haven't starred any repositories yet.</div>
- <div class="empty-secondary-msg">Stars allow you to easily access your favorite repositories.</div>
- </div>
- <div class="row">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <hr>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <!-- Starred Repository Listing -->
+ <div class="repo-list-grid" repositories="starred_repositories.value" starred="true" toggle-star="toggleStar(repository)"></div>
- <!-- Repo listings for User and Orgs -->
+ <!-- User and Org Repository Listings -->
<div ng-repeat="namespace in namespaces">
- <div class="resource-view" resource="namespace">
- <div class="repo-listing">
- <div class="repo-list-title" ng-show="user.username == namespace.username">
- <span class="avatar" size="24" hash="namespace.avatar"></span>
- {{ namespace.username }}
- </div>
- <div class="repo-list-title" ng-show="user.username != namespace.username">
- <span class="avatar" size="24" hash="namespace.avatar"></span>
- <a href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>
- </div>
- <div ng-show="namespace.repositories.value.length > 0">
- <div class="row">
- <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" ng-repeat="repository in namespace.repositories.value">
- <div class="panel panel-default">
- <div class="panel-body" ng-class="repository.is_starred ? 'starred' : ''">
- <div class="row">
- <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 repo-panel-title-row">
- <span class="repo-icon repo-circle no-background" repo="repository"></span>
- <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
- data-repo="{{repository.namespace}}/{{ repository.name }}">
- {{ repository.namespace }}/{{ repository.name }}
- </a>
- </div>
- <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
- <i ng-class="repository.is_starred ? 'starred fa fa-star' : 'fa fa-star-o'" class="star-icon" ng-click="toggleStar(repository)"></i>
- </div>
- </div>
- <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div ng-show="namespace.repositories.value.length == 0">
- <div class="empty-primary-msg">This namespace doesn't have any viewable repositories.</div>
- <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
- <hr>
- </div>
- </div>
+ <div class="repo-list-grid" repositories="namespace.repositories.value" starred="false" user="user" namespace="namespace" toggle-star="toggleStar(repository)"></div>
</div>
</div>
+
</div>