vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add repo-list-grid directive

Browse source
This commit is contained in:
Jimmy Zelinskie 2015-01-12 17:43:36 -05:00
parent 5f2bff43e7
commit 3da0228aaa
5 changed files with 95 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
static/directives/repo-list-grid.html Normal file
View file

@ -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>

1
static/js/app.js
View file

@ -6663,7 +6663,6 @@ quayApp.directive('tagSpecificImagesView', function () {
return directiveDefinitionObject;
});
quayApp.directive('fallbackSrc', function () {
return {
restrict: 'A',

8
static/js/controllers/repolist.js
View file

@ -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.

14
static/js/directives/repo-list-grid.js Normal file
View file

@ -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'
},
};
});

108
static/partials/repo-list.html
View file

@ -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>