From d38d21c78866972c42a6f26e9727ee25548e087a Mon Sep 17 00:00:00 2001 From: Dallon Feldner Date: Tue, 4 Dec 2012 07:54:47 -0700 Subject: [PATCH] Usability improvements to dashboard deployment --- lib/client/deploy.js | 18 ++++- lib/resources/dashboard/deployments.html | 10 ++- lib/resources/dashboard/index.ejs | 18 +++-- lib/resources/dashboard/js/deployments.js | 47 +++++++++---- lib/resources/dashboard/js/header.js | 2 +- .../dashboard/stylesheets/layout.less | 16 ++++- lib/resources/dashboard/stylesheets/style.css | 67 ++++++++++--------- .../dashboard/stylesheets/style.less | 11 +++ lib/resources/internal-deployments.js | 2 +- 9 files changed, 125 insertions(+), 66 deletions(-) diff --git a/lib/client/deploy.js b/lib/client/deploy.js index b1eaef9..13f94da 100644 --- a/lib/client/deploy.js +++ b/lib/client/deploy.js @@ -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); }); diff --git a/lib/resources/dashboard/deployments.html b/lib/resources/dashboard/deployments.html index 953d75c..21c741a 100644 --- a/lib/resources/dashboard/deployments.html +++ b/lib/resources/dashboard/deployments.html @@ -6,10 +6,12 @@
-

+

+

Create your first Deployment to host your app on deploydapp.com:

+
@@ -30,10 +32,6 @@
diff --git a/lib/resources/dashboard/index.ejs b/lib/resources/dashboard/index.ejs index fed5fd9..5099f53 100644 --- a/lib/resources/dashboard/index.ejs +++ b/lib/resources/dashboard/index.ejs @@ -17,13 +17,15 @@
diff --git a/lib/resources/dashboard/js/deployments.js b/lib/resources/dashboard/js/deployments.js index 41d9457..53aa96e 100644 --- a/lib/resources/dashboard/js/deployments.js +++ b/lib/resources/dashboard/js/deployments.js @@ -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(""); + $dropdown.append(''); scope.onlineDeployments.forEach(function(o) { - $dropdown.append(""); + $dropdown.append('"); }); } else { $dropdown.hide(); diff --git a/lib/resources/dashboard/js/header.js b/lib/resources/dashboard/js/header.js index ec65ccb..0d0b1ed 100644 --- a/lib/resources/dashboard/js/header.js +++ b/lib/resources/dashboard/js/header.js @@ -21,7 +21,7 @@ $(document).ready(function() { dialog = ui.dialog(subdomain, $('Deployed to ' + url + '!')); } - dialog.show().closable()//.hide(2000); + dialog.show().closable().hide(2000); }); e.preventDefault(); }); diff --git a/lib/resources/dashboard/stylesheets/layout.less b/lib/resources/dashboard/stylesheets/layout.less index 7eac315..99a882a 100644 --- a/lib/resources/dashboard/stylesheets/layout.less +++ b/lib/resources/dashboard/stylesheets/layout.less @@ -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; } diff --git a/lib/resources/dashboard/stylesheets/style.css b/lib/resources/dashboard/stylesheets/style.css index 2cb3ef7..5bd4ec0 100644 --- a/lib/resources/dashboard/stylesheets/style.css +++ b/lib/resources/dashboard/stylesheets/style.css @@ -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; } diff --git a/lib/resources/dashboard/stylesheets/style.less b/lib/resources/dashboard/stylesheets/style.less index c80c143..d100f23 100644 --- a/lib/resources/dashboard/stylesheets/style.less +++ b/lib/resources/dashboard/stylesheets/style.less @@ -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;} diff --git a/lib/resources/internal-deployments.js b/lib/resources/internal-deployments.js index 2131358..f16c434 100644 --- a/lib/resources/internal-deployments.js +++ b/lib/resources/internal-deployments.js @@ -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"; }