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

Start on UI for Quay

Browse source
This commit is contained in:
Joseph Schorr 2013-09-26 17:59:20 -04:00
parent 9278871381
commit 27ce5c00b2
10 changed files with 258 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

40
static/css/quay.css Normal file
View file

@ -0,0 +1,40 @@
.editable .glyphicon {
opacity: 0.2;
font-size: 85%;
margin-left: 10px;
display: inline-block;
transition: opacity 500ms ease-in-out;
}
.noteditable .glyphicon {
display: none;
}
p.editable .content:empty:after {
display: inline-block;
content: "(Click to add)";
color: #aaa;
}
p.editable:hover {
cursor: pointer;
}
p.editable:hover .glyphicon {
opacity: 1;
}
.tag-dropdown {
display: inline-block;
padding: 6px;
border: 1px solid #ddd;
margin-right: 15px;
margin-bottom: 5px;
}
.modal-body textarea {
width: 100%;
height: 150px;
border: 0px;
}

23
static/js/app.js
View file

@ -1,10 +1,23 @@
angular.module('quay', ['restangular']).
config(['$routeProvider', function($routeProvider) {
quayApp = angular.module('quay', ['restangular']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/repository/', {templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
when('/', {templateUrl: '/static/partials/landing.html', controller: LandingCtrl}).
when('/repository/:namespace/:name', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl}).
when('/repository/:namespace/:name/:tag', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl}).
when('/repository/', {title: 'Repositories', templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
when('/', {title: 'Quay', templateUrl: '/static/partials/landing.html', controller: LandingCtrl}).
otherwise({redirectTo: '/'});
//$locationProvider.html5Mode(true);
}]).
config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('/api/');
});
});
quayApp.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
if (current.$$route.title) {
$rootScope.title = current.$$route.title;
}
});
}]);

30
static/js/controllers.js
View file

@ -8,3 +8,33 @@ function RepoListCtrl($scope, Restangular) {
function LandingCtrl($scope) {
}
function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
$rootScope.title = 'Loading...';
$scope.editDescription = function() {
if (!$scope.repo.can_write) { return; }
$('#descriptionEdit')[0].value = $scope.repo.description || '';
$('#editModal').modal({});
};
$scope.saveDescription = function() {
$('#editModal').modal('hide');
$scope.repo.description = $('#descriptionEdit')[0].value;
$scope.repo.put();
};
var namespace = $routeParams.namespace;
var name = $routeParams.name;
var tag = $routeParams.tag || 'latest';
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'];
}, function() {
$scope.repo = null;
$rootScope.title = 'Unknown Repository';
});
}

4
static/partials/landing.html
View file

@ -1 +1,3 @@
<a ng-href="#/repository/">Repositories</a>
<div class="container">
<a ng-href="#/repository">Repositories</a>
</div>

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

@ -1,4 +1,6 @@
<h2>Repositories</h2>
<div ng-repeat="repository in repositories">
{{repository.namespace}}/{{repository.name}}
</div>
<div class="container">
<h3>Repositories</h3>
<div ng-repeat="repository in repositories">
<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
</div>
</div>

58
static/partials/view-repo.html Normal file
View file

@ -0,0 +1,58 @@
<div class="container" ng-hide="repo">
No repository found
</div>
<div class="container" ng-show="repo">
<!-- Repo Header -->
<div class="header">
<h3>
<span class="glyphicon glyphicon-hdd"></span> <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
</h3>
</div>
<!-- Description -->
<p ng-class="'lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()"><span class="content">{{repo.description}}</span><span class="glyphicon glyphicon-pencil"></span></p>
<!-- Tab bar -->
<ul class="nav nav-tabs">
<li>
<span class="tag-dropdown dropdown">
<span class="glyphicon glyphicon-bookmark"></span>
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentTag.name}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ng-repeat="tag in repo.tags">
<a href="{{ '#/repository/' + repo.namespace + '/' + repo.name + '/' + tag.name }}">{{tag.name}}</a>
</li>
</ul>
</span>
</li>
<li class="active"><a href="javascript:void(0)">Current Image</a></li>
<li><a href="javascript:void(0)">Image History</a></li>
</ul>
Loading...
<div id="current-image">
</div>
<!-- Modal edit for the description -->
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Edit Repository Description</h4>
</div>
<div class="modal-body">
<textarea id="descriptionEdit" placeholder="Enter description">{{ repo.description }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveDescription()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>