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

Create a common repo-list-view control and use it everywhere

Browse source 
This allows users to choose grid view or table view in all repo lists

Fixes #732
This commit is contained in:
Joseph Schorr 2015-12-28 16:29:17 -05:00
parent 16f16e8a15
commit 3da8814787
13 changed files with 115 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/css/directives/ui/repo-list-view.css Normal file
View file

@ -0,0 +1,4 @@
.repo-list-view .btn-group {
float: right;
margin-bottom: 10px;
}

2
static/directives/repo-list-grid.html
View file

@ -29,7 +29,7 @@
<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 }}
<span ng-show="!hideNamespaces">{{ repository.namespace }}/</span>{{ repository.name }}
</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

3
static/directives/repo-list-table.html
View file

@ -1,7 +1,8 @@
<div class="repo-list-table-element">
<div class="cor-loader" ng-if="isLoading"></div>
<div ng-if="orderedRepositories.length == 0 && !isLoading">
<div class="empty-primary-msg">You do not have any viewable repositories.</div>
<div class="empty-primary-msg" ng-if="namespaces.length != 1">You do not have any viewable repositories.</div>
<div class="empty-primary-msg" ng-if="namespaces.length == 1">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>

38
static/directives/repo-list-view.html Normal file
View file

@ -0,0 +1,38 @@
<div class="repo-list-view-element">
<!-- Toggle -->
<div class="repo-list-toggleb btn-group">
<i class="btn btn-default fa fa-th-large" ng-class="!showAsList ? 'active' : ''"
ng-click="setShowAsList(false)" title="Grid View" data-container="body" bs-tooltip></i>
<i class="btn btn-default fa fa-th-list" ng-class="showAsList ? 'active' : ''"
ng-click="setShowAsList(true)" title="List View" data-container="body" bs-tooltip></i>
</div>
<div ng-transclude/>
<!-- Table View -->
<div ng-if="showAsList">
<div class="repo-list-table" repositories-resources="resources" namespaces="namespaces"
star-toggled="starToggled({'repository': repository})">
</div>
</div>
<!-- Grid View -->
<div ng-if="!showAsList">
<!-- Starred Repository Listing -->
<div class="repo-list-grid" repositories-resource="starredRepositories"
starred="true"
star-toggled="starToggled({'repository': repository})"
ng-if="starredRepositories">
</div>
<!-- User and Org Repository Listings -->
<div ng-repeat="namespace in namespaces">
<div class="repo-list-grid" repositories-resource="namespace.repositories"
starred="false" namespace="namespace"
star-toggled="starToggled({'repository': repository})"
hide-title="namespaces.length == 1"
hide-namespaces="namespaces.length == 1">
</div>
</div>
</div>
</div>

3
static/js/directives/ui/repo-list-grid.js
View file

@ -13,7 +13,8 @@ angular.module('quay').directive('repoListGrid', function () {
starred: '=starred',
namespace: '=namespace',
starToggled: '&starToggled',
hideTitle: '=hideTitle'
hideTitle: '=hideTitle',
hideNamespaces: '=hideNamespaces'
},
controller: function($scope, $element, UserService) {
$scope.isOrganization = function(namespace) {

5
static/js/directives/ui/repo-list-table.js
View file

@ -10,7 +10,8 @@ angular.module('quay').directive('repoListTable', function () {
restrict: 'C',
scope: {
'repositoriesResources': '=repositoriesResources',
'namespaces': '=namespaces'
'namespaces': '=namespaces',
'starToggled': '&starToggled'
},
controller: function($scope, $element, $filter) {
var orderBy = $filter('orderBy');
@ -59,7 +60,7 @@ angular.module('quay').directive('repoListTable', function () {
$scope.getAvatarData = function(namespace) {
var found = {};
$scope.namespaces.forEach(function(current) {
if (current.name == namespace) {
if (current.name == namespace || current.username == namespace) {
found = current.avatar;
}
});

38
static/js/directives/ui/repo-list-view.js Normal file
View file

@ -0,0 +1,38 @@
/**
* An element that displays a list (grid or table) of repositories.
*/
angular.module('quay').directive('repoListView', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/static/directives/repo-list-view.html',
replace: false,
transclude: true,
restrict: 'C',
scope: {
namespaces: '=namespaces',
starredRepositories: '=starredRepositories',
starToggled: '&starToggled',
},
controller: function($scope, $element, CookieService) {
$scope.resources = [];
$scope.showAsList = CookieService.get('quay.repoview') == 'list';
$scope.$watch('namespaces', function(namespaces) {
if (!namespaces) { return; }
$scope.resources = [];
namespaces.forEach(function(namespace) {
if (namespace && namespace.repositories) {
$scope.resources.push(namespace.repositories);
}
});
}, true);
$scope.setShowAsList = function(value) {
$scope.showAsList = value;
CookieService.putPermanent('quay.repoview', value ? 'list' : 'grid');
};
}
};
return directiveDefinitionObject;
});

7
static/js/pages/org-view.js
View file

@ -13,6 +13,7 @@
function OrgViewCtrl($scope, $routeParams, $timeout, ApiService, UIService, AvatarService) {
var orgname = $routeParams.orgname;
$scope.namespace = orgname;
$scope.showLogsCounter = 0;
$scope.showApplicationsCounter = 0;
$scope.showInvoicesCounter = 0;
@ -31,10 +32,12 @@
var loadRepositories = function() {
var options = {
'namespace': orgname,
'public': true
'public': true,
'last_modified': true,
'popularity': true
};
$scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
$scope.organization.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
return resp.repositories;
});
};

8
static/js/pages/repo-list.js
View file

@ -11,14 +11,13 @@
}]);
function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, CookieService, Features) {
function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, Features) {
$scope.namespace = null;
$scope.page = 1;
$scope.publicPageCount = null;
$scope.allRepositories = {};
$scope.loading = true;
$scope.resources = [];
$scope.showAsList = CookieService.get('quay.repoview') == 'list';
$scope.Features = Features;
// When loading the UserService, if the user is logged in, create a list of
@ -46,11 +45,6 @@
}
});
$scope.setShowAsList = function(value) {
$scope.showAsList = value;
CookieService.putPermanent('quay.repoview', value ? 'list' : 'grid');
};
$scope.isOrganization = function(namespace) {
return !!UserService.getOrganization(namespace);
};

7
static/js/pages/user-view.js
View file

@ -19,6 +19,7 @@
$scope.changeEmailInfo = {};
$scope.changePasswordInfo = {};
$scope.hasSingleSignin = ExternalLoginService.hasSingleSignin();
$scope.context = {};
UserService.updateUserIn($scope);
@ -26,16 +27,18 @@
var options = {
'public': true,
'namespace': username,
'last_modified': true,
'popularity': true
};
$scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
$scope.context.viewuser.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
return resp.repositories;
});
};
var loadUser = function() {
$scope.userResource = ApiService.getUserInformationAsResource({'username': username}).get(function(user) {
$scope.viewuser = user;
$scope.context.viewuser = user;
// Load the repositories.
$timeout(function() {

15
static/partials/org-view.html
View file

@ -17,12 +17,7 @@
</div>
<div class="co-main-content-panel" ng-if="user.anonymous || !isMember">
<div class="repo-list-grid"
repositories-resource="repositoriesResource"
starred="false"
namespace="namespace"
hide-title="true">
</div>
<div class="repo-list-view" namespaces="[organization]"></div>
</div>
<div class="cor-tab-panel" ng-if="!user.anonymous && isMember">
@ -65,13 +60,7 @@
<div class="cor-tab-content">
<!-- Repositories -->
<div id="repos" class="tab-pane active">
<h3>Repositories</h3>
<div class="repo-list-grid"
repositories-resource="repositoriesResource"
starred="false"
namespace="namespace"
hide-title="true">
</div>
<div class="repo-list-view" namespaces="[organization]"><h3>Repositories</h3></div>
</div>
<!-- Teams -->

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

@ -59,33 +59,9 @@
<div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-12">
<div class="repo-list-panel co-main-content-panel">
<div class="repo-list-toggleb btn-group">
<i class="btn btn-default fa fa-th-large" ng-class="!showAsList ? 'active' : ''"
ng-click="setShowAsList(false)" title="Grid View" data-container="body" bs-tooltip></i>
<i class="btn btn-default fa fa-th-list" ng-class="showAsList ? 'active' : ''"
ng-click="setShowAsList(true)" title="List View" data-container="body" bs-tooltip></i>
</div>
<!-- Table View -->
<div ng-if="showAsList">
<div class="repo-list-table" repositories-resources="resources" namespaces="namespaces"></div>
</div>
<!-- Grid View -->
<div ng-if="!showAsList">
<!-- Starred Repository Listing -->
<div class="repo-list-grid" repositories-resource="starred_repositories"
starred="true"
star-toggled="starToggled(repository)">
</div>
<!-- User and Org Repository Listings -->
<div ng-repeat="namespace in namespaces">
<div class="repo-list-grid" repositories-resource="namespace.repositories"
starred="false" user="user" namespace="namespace"
star-toggled="starToggled(repository)">
</div>
</div>
<div class="repo-list-view" namespaces="namespaces"
star-toggled="starToggled(repository)"
starred-repositories="starred_repositories">
</div>
</div>
</div>

32
static/partials/user-view.html
View file

@ -5,27 +5,23 @@
<div class="cor-title">
<span class="cor-title-link"></span>
<span class="cor-title-content">
<span class="avatar" size="32" data="viewuser.avatar"></span>
<span class="user-name">{{ viewuser.username }}</span>
<span class="avatar" size="32" data="context.viewuser.avatar"></span>
<span class="user-name">{{ context.viewuser.username }}</span>
</span>
<span class="cor-title-action" ng-if="viewuser.is_me">
<a href="/new/?namespace={{ viewuser.username }}">
<span class="cor-title-action" ng-if="context.viewuser.is_me">
<a href="/new/?namespace={{ context.viewuser.username }}">
<i class="fa fa-plus" data-title="Create new repository"></i>
Create New Repository
</a>
</span>
</div>
<div class="co-main-content-panel user-repo-list" ng-if="!viewuser.is_me">
<div class="repo-list-grid"
repositories-resource="repositoriesResource"
starred="false"
namespace="namespace"
hide-title="true"></div>
<div class="co-main-content-panel user-repo-list" ng-if="!context.viewuser.is_me">
<div class="repo-list-view" namespaces="[context.viewuser]"></div>
</div>
<div class="cor-tab-panel" ng-if="viewuser.is_me">
<div class="cor-tabs" quay-show="viewuser.is_me">
<div class="cor-tab-panel" ng-if="context.viewuser.is_me">
<div class="cor-tabs" quay-show="context.viewuser.is_me">
<span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
<i class="fa fa-hdd-o"></i>
</span>
@ -56,13 +52,7 @@
<div class="cor-tab-content">
<!-- Repositories -->
<div id="repos" class="tab-pane active">
<h3>Repositories</h3>
<div class="repo-list-grid"
repositories-resource="repositoriesResource"
starred="false"
namespace="namespace"
hide-title="true">
</div>
<div class="repo-list-view" namespaces="[context.viewuser]"><h3>Repositories</h3></div>
</div>
<!-- Robot Accounts -->
@ -119,7 +109,7 @@
<table class="col-md-6">
<tr>
<td>Current E-mail Address:</td>
<td>{{ viewuser.email }}</td>
<td>{{ context.viewuser.email }}</td>
</tr>
<tr>
<td>New E-mail Address:</td>
@ -133,7 +123,7 @@
</div>
<button class="btn btn-primary"
ng-disabled="changeEmailForm.$invalid || changeEmail.email == viewuser.email"
ng-disabled="changeEmailForm.$invalid || changeEmail.email == context.viewuser.email"
type="submit">
Change E-mail Address
</button>