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

Merge branch 'casper'

Browse source 
Conflicts:
	static/partials/view-repo.html
This commit is contained in:
yackob03 2013-10-11 21:54:57 -04:00
commit 0d2564e127
16 changed files with 464 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -2,3 +2,4 @@
venv
.elasticbeanstalk/
static/snapshots/
screenshots/screenshots/

24
initdb.py
View file

@ -52,12 +52,16 @@ def create_subtree(repo, structure, parent):
create_subtree(repo, subtree, new_image)
def __generate_repository(user, name, is_public, permissions, structure):
def __generate_repository(user, name, description, is_public, permissions, structure):
repo = model.create_repository(user.username, name, user)
if is_public:
model.set_repository_visibility(repo, 'public')
if description:
repo.description = description
repo.save()
for delegate, role in permissions:
model.set_user_repo_permission(delegate.username, user.username, name,
role)
@ -81,16 +85,18 @@ if __name__ == '__main__':
new_user_2.verified = True
new_user_2.save()
__generate_repository(new_user_1, 'simple', False, [], (4, [],
['latest', 'prod']))
__generate_repository(new_user_1, 'simple', 'Simple repository.', False,
[], (4, [], ['latest', 'prod']))
__generate_repository(new_user_1, 'complex', False, [],
__generate_repository(new_user_1, 'complex',
'Complex repository with many branches and tags.',
False, [(new_user_2, 'read')],
(2, [(3, [], 'v2.0'),
(1, [(1, [(1, [], ['latest', 'prod'])],
'staging'),
(1, [], None)], None)], None))
__generate_repository(new_user_1, 'horrific', False, [],
__generate_repository(new_user_1, 'horrific', None, False, [],
(2, [(3, [], 'v2.0'),
(1, [(1, [(1, [], ['latest', 'prod'])],
'staging'),
@ -100,8 +106,10 @@ if __name__ == '__main__':
(1, [(1, [], 'v5.0'), (1, [], 'v6.0')], None)],
None))
__generate_repository(new_user_2, 'publicrepo', True, [],
(10, [], 'latest'))
__generate_repository(new_user_2, 'publicrepo',
'Public repository pullable by the world.', True,
[], (10, [], 'latest'))
__generate_repository(new_user_1, 'shared', False,
__generate_repository(new_user_1, 'shared',
'Shared repository, another user can write.', False,
[(new_user_2, 'write')], (5, [], 'latest'))

11
screenshots/README.md Normal file
View file

@ -0,0 +1,11 @@
run with:
```
casperjs screenshots.js
```
debug run (i.e. hit localhost):
```
casperjs screenshots.js --d
```

67
screenshots/screenshots.js Normal file
View file

@ -0,0 +1,67 @@
var casper = require('casper').create({
viewportSize: {
width: 1070,
height: 768
},
verbose: true,
logLevel: "debug"
});
var options = casper.cli.options;
var isDebug = !!options['d'];
var rootUrl = isDebug ? 'http://localhost:5001/' : 'https://quay.io/';
var repo = isDebug ? 'complex' : 'r0';
var outputDir = "screenshots/";
casper.start(rootUrl);
casper.on("remote.message", function(msg, trace) {
this.echo("Message: " + msg, "DEBUG");
});
casper.on("page.error", function(msg, trace) {
this.echo("Page error: " + msg, "ERROR");
});
casper.then(function() {
this.capture(outputDir + 'landing.png');
});
casper.thenOpen(rootUrl + 'signin', function () {
this.fill('form', {
'username': 'devtable',
'password': isDebug ? 'password': 'C>K98%y"_=54x"<',
}, true);
});
casper.then(function() {
this.waitForText('Your Top Repositories');
});
casper.then(function() {
this.capture(outputDir + 'user-home.png');
});
casper.thenOpen(rootUrl + 'repository/devtable/' + repo, function() {
// Wait for the tree to initialize.
this.waitForSelector('.image-tree', function() {
// Wait for the tree's animation to finish.
this.wait(4000);
});
});
casper.then(function() {
this.capture(outputDir + 'repo-view.png');
});
casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '/admin', function() {
this.waitForSelector('.repo-access-state');
});
casper.then(function() {
this.capture(outputDir + 'repo-admin.png');
});
casper.run();

4
static/css/quay.css
View file

@ -1,3 +1,6 @@
* {
font-family: 'Droid Sans', sans-serif;
}
.plans .callout {
font-size: 2em;
@ -723,6 +726,7 @@ p.editable:hover i {
#image-history-container {
overflow: hidden;
min-height: 400px;
}
#image-history-container .node circle {

BIN
static/img/repo-admin.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
static/img/repo-view.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
static/img/user-home.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 KiB

2
static/js/controllers.js
View file

@ -199,6 +199,8 @@ function LandingCtrl($scope, $timeout, Restangular, UserService, KeyService) {
};
$scope.status = 'ready';
browserchrome.update();
}
function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {

8
static/js/graphing.js
View file

@ -65,12 +65,7 @@ ImageHistoryTree.prototype.draw = function(container) {
var boundingBox = document.getElementById(container).getBoundingClientRect();
document.getElementById(container).style.maxHeight = (viewportHeight - boundingBox.top) + 'px';
var leftMargin = 20;
if (width > document.getElementById(container).clientWidth) {
leftMargin = 120;
}
var margin = { top: 40, right: 20, bottom: 20, left: leftMargin };
var margin = { top: 40, right: 20, bottom: 20, left: 40 };
var m = [margin.top, margin.right, margin.bottom, margin.left];
var w = width - m[1] - m[3];
var h = height - m[0] - m[2];
@ -86,6 +81,7 @@ ImageHistoryTree.prototype.draw = function(container) {
var vis = d3.select("#" + container).append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.attr("class", "image-tree")
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

183
static/lib/browser-chrome.css Normal file
View file

@ -0,0 +1,183 @@
.browser-chrome-container * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.browser-chrome-container {
border: 2px solid #363532;
display: inline-block;
border-radius: 2px;
max-width: 100%;
height: auto;
}
.browser-chrome-header {
height: 40px;
padding: 2px;
overflow: hidden;
background-color: rgb(54,53,50);
background-image: linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
background-image: -o-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
background-image: -moz-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
background-image: -ms-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(54,53,50)),
color-stop(1, rgb(86,85,81))
);
}
.browser-chrome-header .user-icon-container {
float: right;
margin-right: 5px;
margin-top: 10px;
}
.browser-chrome-header .user-icon-container i {
color: #78bcf3;
}
.browser-chrome-header i {
color: white;
}
.browser-chrome-tab {
display: inline-block;
position: relative;
width: 200px;
height: 25px;
bottom: -13px;
left: 10px;
background-color: #f2f1f0;
vertical-align: middle;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.browser-chrome-tab-wrapper:before,
.browser-chrome-tab-wrapper:after {
content: "";
position: absolute;
background-color: #f2f1f0;
width: 10px;
height: 10px;
bottom: 0px;
}
.browser-chrome-tab-wrapper:before {
left: -10px;
}
.browser-chrome-tab-wrapper:after {
right: -10px;
}
.browser-chrome-tab:before,
.browser-chrome-tab:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
bottom: 0px;
background-color: rgb(54,53,50);
background-image: linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
background-image: -o-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
background-image: -moz-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
background-image: -ms-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(54,53,50)),
color-stop(1, rgb(70,69,65))
);
z-index: 1;
}
.browser-chrome-tab:before {
left: -20px;
}
.browser-chrome-tab:after {
right: -20px;
}
.browser-chrome-tab-content {
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
padding: 4px;
white-space: nowrap;
}
.browser-chrome-tab-content i {
color: #363532;
}
.browser-chrome-url-bar {
height: 35px;
background-color: #f2f1f0;
padding: 5px;
}
.browser-chrome-url-bar i {
color: #363532;
margin-right: 5px;
}
.browser-chrome-url-bar .left-controls {
width: 78px;
float: left;
padding-top: 2px;
}
.browser-chrome-url-bar .right-controls {
width: 26px;
float: right;
padding-top: 2px;
}
.browser-chrome-url-bar .right-controls i {
margin-left: 5px;
margin-right: 0;
}
.browser-chrome-url {
color: black;
background-color: white;
border-radius: 2px;
border: 1px solid #ada9a5;
padding: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.browser-chrome-url .protocol-https {
color: #079500;
}
.browser-chrome-url .protocol-https i {
color: #079500;
}
.browser-chrome-url i {
margin-right: 5px;
margin-left: 5px;
}

39
static/lib/browser-chrome.js Normal file
View file

@ -0,0 +1,39 @@
(function(browserchrome, $) {
var htmlTemplate = '<div class="browser-chrome-container"><div class="browser-chrome-header"><i class="icon-remove-sign"></i> <i class="icon-minus-sign"></i> <i class="icon-plus-sign"></i><div class="browser-chrome-tab"><div class="browser-chrome-tab-wrapper"><div class="browser-chrome-tab-content"><i class="icon-file-alt icon-large"></i> <span class="tab-title">Tab Title</span></div></div></div><div class="user-icon-container"><i class="icon-user icon-2x"></i></div></div><div class="browser-chrome-url-bar"><div class="left-controls"><i class="icon-arrow-left icon-large"></i> <i class="icon-arrow-right icon-large"></i> <i class="icon-rotate-right icon-large"></i> </div><div class="right-controls"> <i class="icon-reorder icon-large"></i></div><div class="browser-chrome-url"><span class="protocol-https" style="display: none"><i class="icon-lock"></i>https</span><span class="protocol-http"><i class="icon-file-alt"></i>http</span><span class="url-text">://google.com/</span></div></div></div>'
browserchrome.update = function() {
$('[data-screenshot-url]').each(function(index, element) {
var elem = $(element);
if (!elem.data('has-chrome')) {
// Create chrome
var createdHtml = $(htmlTemplate);
// Add the new chrome to the page where the image was
elem.replaceWith(createdHtml);
// Add the image to the new browser chrome html
createdHtml.append(elem);
// Set the tab title
var tabTitle = elem.attr('title') || elem.data('tab-title');
createdHtml.find('.tab-title').text(tabTitle);
// Pick the protocol and set the url
var url = elem.data('screenshot-url');
if (url.substring(0, 6) === 'https:') {
createdHtml.find('.protocol-http').hide();
createdHtml.find('.protocol-https').show();
url = url.substring(5);
} else {
createdHtml.find('.protocol-http').hide();
createdHtml.find('.protocol-https').show();
url = url.substring(4);
}
console.log('setting url to: ' + url);
createdHtml.find('.url-text').text(url);
elem.data('has-chrome', 'true');
}
});
};
}(window.browserchrome = window.browserchrome || {}, window.jQuery));

6
static/partials/landing.html
View file

@ -102,7 +102,7 @@
</div>
<div class="tour-section row">
<div class="col-md-7"><img src="//1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png" class="img-responsive"></div>
<div class="col-md-7"><img src="/static/img/user-home.png" title="User Home - Quay" data-screenshot-url="https://quay.io/" class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Customized for you</div>
<div class="tour-section-description">
@ -113,7 +113,7 @@
</div>
<div class="tour-section row">
<div class="col-md-7 col-md-push-5"><img src="//4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png" class="img-responsive"></div>
<div class="col-md-7 col-md-push-5"><img src="/static/img/repo-view.png" title="Repository View - Quay" data-screenshot-url="https://quay.io/repository/devtable/complex" class="img-responsive"></div>
<div class="col-md-5 col-md-pull-7">
<div class="tour-section-title">Useful views of respositories</div>
<div class="tour-section-description">
@ -123,7 +123,7 @@
</div>
<div class="tour-section row">
<div class="col-md-7"><img src="//4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png" class="img-responsive"></div>
<div class="col-md-7"><img src="/static/img/repo-admin.png" title="Repository Admin - Quay" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Share at your control</div>
<div class="tour-section-description">

3
templates/index.html
View file

@ -12,6 +12,8 @@
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/static/lib/browser-chrome.css">
<link rel="stylesheet" href="/static/css/quay.css">
@ -39,6 +41,7 @@
<script src="static/lib/typeahead.min.js"></script>
<script src="static/lib/d3-tip.js" charset="utf-8"></script>
<script src="static/lib/browser-chrome.js"></script>
<script src="static/js/app.js"></script>
<script src="static/js/controllers.js"></script>

BIN
test.db
View file

Binary file not shown.