Usability improvements to dashboard deployment

This commit is contained in:
Dallon Feldner
2012-12-04 07:54:47 -07:00
parent b363e3b5f5
commit d38d21c788
9 changed files with 125 additions and 66 deletions

View File

@@ -211,7 +211,6 @@ Deployment.prototype.getOnlineDeployments = function(fn) {
var deployment = this;
var sid = deployment.getConfig('sid');
request.cookie('sid=' + sid);
var meIdQ = q.fcall(function() {
@@ -227,6 +226,7 @@ Deployment.prototype.getOnlineDeployments = function(fn) {
jar: false
}, function(err, res, user) {
if (err) return d.reject(err);
user = JSON.parse(user);
if (!user) return d.reject(new Error("Not logged in"));
d.resolve(user.id);
});
@@ -239,8 +239,13 @@ Deployment.prototype.getOnlineDeployments = function(fn) {
var d = q.defer();
request({
url: deployment.api + "/apps",
qs: {owner: meId},
url: deployment.api + "/apps?" +
JSON.stringify({
$or: [
{owner: meId},
{collaborators: meId}
]
}),
headers: {
'Accept': 'application/json'
}
@@ -250,6 +255,13 @@ Deployment.prototype.getOnlineDeployments = function(fn) {
deployments = JSON.parse(deployments);
}
var config = deployment.getConfig();
deployments = deployments.filter(function(d) {
console.log(d);
return !config[d.name + '.deploydapp.com'];
});
d.resolve(deployments);
});

View File

@@ -6,10 +6,12 @@
</h3>
<div id="deployments-empty" class="hide">
<p>
<hr />
<p>Create your first Deployment to host your app on <a href="http://deploydapp.com">deploydapp.com</a>:</p>
<!-- <p>
A <strong>Deployment</strong> is an instance of your app hosted on <a href="http://deploydapp.com">deploydapp.com</a>.
</p>
<hr />
<hr /> -->
</div>
<div id="deployment-list-container">
@@ -30,10 +32,6 @@
<br />
<select id="existing-deployment-dropdown" class="empty hide">
<option>or add an existing deployment...</option>
<option>my-awesome-app-demo</option>
<option>diamond-shovel</option>
<option>ostream</option>
</select>
</form>
</div>

View File

@@ -17,13 +17,15 @@
</script>
<div id="header">
<h1>
<a href="http://www.deployd.com" target="_blank"><img class="dpd-logo" src="/dashboard/img/dpd-logo-scaled.png" width="24" height="24" alt="Deployd" /></a>
<a class="header-link" href="http://www.deployd.com" target="_blank">
<img class="dpd-logo" src="/dashboard/img/dpd-logo-scaled.png" width="24" height="24" alt="Deployd" /></a>
<a href="#" class="header-link" id="open-btn" target="_blank"><{= context.appName }> </a>
<!-- <h1>
<{= context.appName }>
</h1>
<div class="seperator">&nbsp;</div>
<div class="btn-group dropdown" id="deploy-btn-group">
<a href="#" class="btn dropdown-toggle" id="deploy-btn"><i class="icon-upload"></i> Deploy <span class="caret hide"></span></a>
</h1> -->
<!-- <div class="seperator">&nbsp;</div> -->
<div class="dropdown" id="deploy-btn-group">
<a href="#" class="header-link dropdown-toggle" id="deploy-btn"><i class="icon-white icon-upload"></i> Deploy <span class="caret hide"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="deploy-btn">
<!-- <li><a href="#">Push to <strong>myapp-production</strong></a></li> -->
<!-- <li><a href="#">Push to <strong>myapp-staging</strong></a></li> -->
@@ -31,10 +33,6 @@
<li><a href="/dashboard/deployments">Add new deployment...</a></li>
</ul>
</div>
<div class="btn-group" id="open-btn-group">
<a class="btn" href="#" id="open-btn" target="_blank"><i class="icon-eye-open"></i> Open </a>
<!-- <button class="btn dropdown-toggle"><span class="caret"></span></button> -->
</div>
</div>
<div id="body-container">
<div id="resource-sidebar-container">

View File

@@ -1,4 +1,4 @@
/* globals refreshHeaderDeployments:true */
/*globals refreshHeaderDeployments:true */
(function() {
@@ -35,6 +35,7 @@
deployNew();
return false;
});
$('#existing-deployment-dropdown').change(onSelectExistingDeployment);
function loadDeployments() {
dpdDeployments.get(function(deployments, error) {
@@ -63,13 +64,17 @@
});
}
function deployNew() {
var name = $('#deploy-new-form .deployment-name').val();
name = name || Context.appName;
function deployNew(name, fn) {
if (!name) {
name = $('#deploy-new-form .deployment-name').val();
name = name || Context.appName;
}
for (var i = 0; i < scope.deployments.length; i++) {
if (scope.deployments[i].name === name) {
return alert("You already have a deployment called \"" + name + "\"");
alert("You already have a deployment called \"" + name + "\"");
if (typeof fn === 'function') fn();
return;
}
}
@@ -78,11 +83,11 @@
name: name
};
scope.deployments.push(deployment);
deploy(deployment);
deploy(deployment, fn);
}
}
function deploy(deployment) {
function deploy(deployment, fn) {
deployment.deploying = true;
dpdDeployments.post({
subdomain: deployment.name
@@ -90,16 +95,19 @@
deployment.deploying = false;
if (error) {
alert(JSON.stringify(error));
alert("Error while deploying: " + error.message);
if (!deployment.id) remove(deployment);
} else {
Object.keys(result).forEach(function(k) {
deployment[k] = result[k];
});
}
if (typeof fn == 'function') fn();
refreshHeaderDeployments();
renderDeployments();
loadOnlineDeployments();
});
renderDeployments();
@@ -111,6 +119,7 @@
scope.deployments.splice(index, 1);
renderDeployments();
loadOnlineDeployments();
refreshHeaderDeployments();
});
}
@@ -165,7 +174,21 @@
}, function(res, err) {
scope.isAuthenticated = !err;
showLogin(true);
loadOnlineDeployments();
if (scope.isAuthenticated) loadOnlineDeployments();
});
return false;
}
function onSelectExistingDeployment(e) {
var $dropdown = $(this);
var name = $dropdown.val();
if (name === "__") return true;
$dropdown.attr('disabled', true);
deployNew(name, function() {
$dropdown.removeAttr('disabled');
$dropdown.val("__");
});
}
@@ -210,9 +233,9 @@
var $dropdown = $('#existing-deployment-dropdown');
if (scope.onlineDeployments && scope.onlineDeployments.length) {
$dropdown.show().empty();
$dropdown.append("<option>or add an existing deployment...</option>");
$dropdown.append('<option value="__">or add an existing deployment...</option>');
scope.onlineDeployments.forEach(function(o) {
$dropdown.append("<option>" + o.name + "</option>");
$dropdown.append('<option value="' + o.name + '">' + o.name + "</option>");
});
} else {
$dropdown.hide();

View File

@@ -21,7 +21,7 @@ $(document).ready(function() {
dialog = ui.dialog(subdomain, $('<span>Deployed to <a target="_blank" href="http://' + url + '">' + url + '</a>!</span>'));
}
dialog.show().closable()//.hide(2000);
dialog.show().closable().hide(2000);
});
e.preventDefault();
});

View File

@@ -24,9 +24,23 @@ body {
.box-orient(horizontal);
.box-align(center);
.header-link {
padding: 0px 8px;
border-left: @grayDarker 1px solid;
color: white;
display: inline-block;
margin: 0;
font-size: 11pt;
line-height: 38px;
&:hover {
background: rgba(255,255,255, 0.1);
text-decoration: none;
}
}
.dpd-logo {
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
}

View File

@@ -125,11 +125,8 @@ textarea {
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@@ -1995,7 +1992,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
@@ -2108,7 +2105,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#429e96', endColorstr='#428f9e', GradientType=0);
border-color: #428f9e #428f9e #2b5e68;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary:hover,
.btn-primary:active,
@@ -2133,7 +2130,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7f1c', endColorstr='#cc5a01', GradientType=0);
border-color: #cc5a01 #cc5a01 #803801;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-warning:hover,
.btn-warning:active,
@@ -2158,7 +2155,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b0e0c', endColorstr='#8b0e0c', GradientType=0);
border-color: #8b0e0c #8b0e0c #450706;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-danger:hover,
.btn-danger:active,
@@ -2183,7 +2180,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#668731', endColorstr='#82ac3f', GradientType=0);
border-color: #82ac3f #82ac3f #58742a;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-success:hover,
.btn-success:active,
@@ -2208,7 +2205,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#429e96', endColorstr='#59bab1', GradientType=0);
border-color: #59bab1 #59bab1 #3a8c85;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-info:hover,
.btn-info:active,
@@ -2233,7 +2230,7 @@ table .span24 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-inverse:hover,
.btn-inverse:active,
@@ -2849,7 +2846,7 @@ input[type="submit"].btn.btn-mini {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363535', endColorstr='#363535', GradientType=0);
border-color: #363535 #363535 #0f0f0f;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
@@ -3764,11 +3761,8 @@ a.thumbnail:hover {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: width 0.6s ease;
@@ -4068,9 +4062,21 @@ body {
-ms-box-align: center;
-o-box-align: center;
}
#header .header-link {
padding: 0px 8px;
border-left: #222222 1px solid;
color: white;
display: inline-block;
margin: 0;
font-size: 11pt;
line-height: 38px;
}
#header .header-link:hover {
background: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
#header .dpd-logo {
vertical-align: middle;
margin-right: 8px;
margin-top: -2px;
}
#header .seperator {
@@ -4093,11 +4099,8 @@ body {
min-height: 100%;
width: 100%;
min-width: 1000px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-flex: 1;
@@ -4188,11 +4191,8 @@ body {
display: -ms-box;
display: -o-box;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@@ -4664,7 +4664,7 @@ li.L9 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
@@ -4711,11 +4711,8 @@ li.L9 {
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
@@ -4739,7 +4736,7 @@ li.L9 {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#429e96', endColorstr='#428f9e', GradientType=0);
border-color: #428f9e #428f9e #2b5e68;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.confirmation .actions button.ok:hover,
.confirmation .actions button.ok:active,
@@ -4966,12 +4963,12 @@ li.L9 {
-moz-backface-visibility: hidden;
}
.card .back {
-webkit-transform: rotatey(180deg);
-moz-transform: rotatey(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.card.flipped .wrapper {
-webkit-transform: rotatey(180deg);
-moz-transform: rotatey(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
/* sideflip effect */
.card.sideflip .wrapper {
@@ -4979,8 +4976,8 @@ li.L9 {
-moz-transform-origin: right center;
}
.card.sideflip.flipped .wrapper {
-webkit-transform: translatex(-100%) rotatey(180deg);
-moz-transform: translatex(-100%) rotatey(180deg);
-webkit-transform: translateX(-100%) rotateY(180deg);
-moz-transform: translateX(-100%) rotateY(180deg);
}
body {
background: url(../img/outlets.png) #030202;
@@ -5085,6 +5082,12 @@ select {
background-color: #ffffff;
color: #666666;
}
select:disabled {
background: #1c1c1c;
color: #ffffff;
border: solid 1px #363535;
opacity: 0.6;
}
label {
color: #ffffff !important;
}

View File

@@ -33,6 +33,10 @@ h3 {
font-family: @baseFontFamily;
text-transform: none;
font-weight: normal;
i {
// margin-top: 2px;
}
}
line-height: 15px;
margin: 2px 0 22px 0;
@@ -102,6 +106,13 @@ input, textarea, select {background: darken(@black, 10%); color: @white; border:
}
}
select:disabled {
background: darken(@black, 10%);
color: @white;
border: solid 1px @black;
opacity: 0.6;
}
label {color: @white !important;}

View File

@@ -107,7 +107,7 @@ InternalDeployments.prototype.deploy = function(ctx, next) {
var packageQ = authQ.then(function(ok) {
if (ok) {
q.ninvoke(d, 'package', self.packageFile);
return q.ninvoke(d, 'package', self.packageFile);
} else {
throw "Not authenticated";
}