From ed545bad72cb4368cf09cf62844b77440c1fdd8e Mon Sep 17 00:00:00 2001
From: Dallon Feldner <dallonfdev@gmail.com>
Date: Tue, 11 Dec 2012 12:56:53 -0700
Subject: [PATCH] Made some usability changes to the initial deployment
 workflow

---
 lib/client/deploy.js                          |  1 +
 lib/resources/dashboard/deployments.html      | 74 +++++++++++------
 lib/resources/dashboard/js/deployments.js     | 80 ++++++++++---------
 .../dashboard/stylesheets/deployments.less    | 23 +++++-
 .../dashboard/stylesheets/layout.less         |  7 +-
 lib/resources/dashboard/stylesheets/style.css | 72 ++++++++---------
 .../dashboard/stylesheets/style.less          |  8 +-
 7 files changed, 158 insertions(+), 107 deletions(-)

diff --git a/lib/client/deploy.js b/lib/client/deploy.js
index 7117269..d3fcdd8 100644
--- a/lib/client/deploy.js
+++ b/lib/client/deploy.js
@@ -227,6 +227,7 @@ Deployment.prototype.getCurrentUser = function(fn) {
     jar: false
   }, function(err, res, user) {
     if (err) return fn(err);
+    if (res.statusCode === 404) return fn(new Error("Could not connect"));
     if (user) user = JSON.parse(user);  
     if (!user) return fn(new Error("Not authenticated"));
     fn(null, user);
diff --git a/lib/resources/dashboard/deployments.html b/lib/resources/dashboard/deployments.html
index da93a3e..32b54c2 100644
--- a/lib/resources/dashboard/deployments.html
+++ b/lib/resources/dashboard/deployments.html
@@ -1,9 +1,15 @@
 <div id="deployments">
-  <div class="well hide" id="deployments-connection-error">
-    <h3>Deployments</h3>
-    <div class="">
-      <p>Could not connect to <a target="_blank" href="http://cloud.deployd.com">cloud.deployd.com</a></p>
-      <a href="">Refresh</a>
+  <div class="modal hide" id="deployments-connection-error">
+    <div class="modal-header">
+      <h3>Deployments</h3>
+    </div>
+    <div class="modal-body">
+      <p>Could not connect to <a target="_blank" href="http://cloud.deployd.com">cloud.deployd.com</a>.</p>
+      
+    </div>
+    <div class="modal-footer">
+      <a href="" class="btn">Refresh</a>
+      <a href="/dashboard" class="cancel-btn">cancel</a>
     </div>
   </div>
   <div class="well hide" id="inner-deployments">
@@ -16,36 +22,40 @@
     
     <div class="clearfix"></div>
 
-    
-
-    <div id="deployments-empty" class="hide">
-
-      <hr />
-      
-      <p>Create your first Deployment to host your app on <a href="http://cloud.deployd.com">cloud.deployd.com</a>:</p>
-    </div>
-
     <div id="deployment-list-container">
 
       <ul class="component-list" id="deployment-list">
       </ul>
 
       <hr />
+
+      <div class="form-placeholder">
+      </div>
     </div>
 
-    <form class="form-inline" id="deploy-new-form">
-      <input type="text" class="input-large deployment-name" placeholder="new-deployment" />
-      <span class="help-inline">.deploydapp.com</span>
+  </div>
 
-      <button class="pull-right btn btn-success">
-        <i class="icon-plus icon-white"></i>
-        Add and Deploy
-      </button>
-      <br />
+  <div id="deployments-empty" class="modal hide">
+    <div class="modal-header clearfix">
+      <h3>
+        Create a Deployment 
+        <div class="header-link pull-right">
+          <span class="username">USERNAME</span>
+          | <a href="#" class="logout-btn">log out</a>
+        </div>
+      </h3>
 
-      <select id="existing-deployment-dropdown" class="empty hide">
-      </select>
-    </form>
+    </div>
+    <div class="modal-body">
+      <p>Create your first Deployment to host your app on <a href="http://cloud.deployd.com">cloud.deployd.com</a>:</p>
+      <hr />
+      <div class="form-placeholder">
+      </div>
+    </div>
+   <!--  <div class="modal-footer">
+      <a href="#" class="cancel-btn logout-btn">log out</a>
+      <a href="/dashboard" class="cancel-btn">cancel</a>
+    </div> -->
   </div>
 </div>
 
@@ -86,6 +96,20 @@
   </div>
 </div>
 
+<form class="form-inline hide" id="deploy-new-form">
+  <input type="text" class="input-large deployment-name" placeholder="new-deployment" />
+  <span class="help-inline">.deploydapp.com</span>
+
+  <button class="pull-right btn btn-success">
+    <i class="icon-plus icon-white"></i>
+    Add and Deploy
+  </button>
+  <br />
+
+  <select id="existing-deployment-dropdown" class="empty hide">
+  </select>
+</form>
+
 <script type="text/html" id="deployment-template">
   <li id="deployment-<%= deployment.appId %>" class="component-item <%= deployment.deploying ? 'deploying' : '' %>" data-index="<%= index %>">
     <div class="component-item-header">
diff --git a/lib/resources/dashboard/js/deployments.js b/lib/resources/dashboard/js/deployments.js
index 3439660..8878fba 100644
--- a/lib/resources/dashboard/js/deployments.js
+++ b/lib/resources/dashboard/js/deployments.js
@@ -12,7 +12,7 @@
   var dpdDeployments = dpd('__deployments');
   var deploymentTemplate = _.template($('#deployment-template').html());
   var $modal = $('#deployAuthModal').modal({
-    backdrop: 'static',
+    backdrop: false,
     keyboard: false,
     show: false
   });
@@ -27,7 +27,7 @@
   $('#deployment-list').on('click', '.deploy-btn', onClickDeployBtn);
   $('#deployment-list').on('click', '.remove-btn', onClickRemoveBtn);
 
-  $('#inner-deployments h3 .logout-btn').click(function() {
+  $('#deployments h3 .logout-btn').click(function() {
     onClickLogoutBtn();
     return false;
   });
@@ -215,14 +215,13 @@
   }
 
   function showLogin(error) {
+    renderDeployments();
     if (scope.user) {
       $modal.modal('hide');
-      $('#inner-deployments').show();
       $('#deployments h3 .username').text(scope.user.username);
       $('#deploy-new-form .deployment-name').focus();
     } else {
       $modal.modal('show');
-      $('#inner-deployments').hide();
       if (error) {
         $('#auth-error').show();
       } else {
@@ -233,40 +232,47 @@
   }
 
   function renderDeployments() {
-    if (scope.deployments === null || scope.deployments.length) {
-      $('#deployments-empty').hide();
-      $('#deployment-list-container').show();
+    if (scope.user) {
+     if (scope.deployments === null || scope.deployments.length) {
+       $('#deployments-empty').hide();
+       $('#inner-deployments').show();
+      $('#deploy-new-form').appendTo('#inner-deployments .form-placeholder').show();
+     } else {
+       $('#deployments-empty').show();
+       $('#inner-deployments').hide();
+       $('#deploy-new-form').appendTo('#deployments-empty .form-placeholder').show();
+       var $input = $('#deploy-new-form .deployment-name');
+       if (!$input.val()) $input.val(Context.appName);
+     }
+
+     if (scope.deployments) {
+       $('#deployment-list').empty();
+
+       // clean up orphaned tooltips
+       $('body > .tooltip').each(function() {
+         var $tooltip = $(this);
+         $tooltip.fadeOut(function() {
+           $tooltip.remove();
+         });
+       });
+
+       scope.deployments.forEach(function(d, i) {
+         $('#deployment-list').append(deploymentTemplate({
+           deployment: d,
+           index: i
+         }));
+
+         if (d.__deployed) {
+           showDeploymentTooltip(d);
+           d.__deployed = false;
+         }
+
+
+       });
+     }
     } else {
-      $('#deployments-empty').show();
-      $('#deployment-list-container').hide();
-      var $input = $('#deploy-new-form .deployment-name');
-      if (!$input.val()) $input.val(Context.appName);
-    }
-
-    if (scope.deployments) {
-      $('#deployment-list').empty();
-
-      // clean up orphaned tooltips
-      $('body > .tooltip').each(function() {
-        var $tooltip = $(this);
-        $tooltip.fadeOut(function() {
-          $tooltip.remove();
-        });
-      });
-
-      scope.deployments.forEach(function(d, i) {
-        $('#deployment-list').append(deploymentTemplate({
-          deployment: d,
-          index: i
-        }));
-
-        if (d.__deployed) {
-          showDeploymentTooltip(d);
-          d.__deployed = false;
-        }
-
-
-      });
+      $('#deployments-empty').hide();
+      $('#deployments-empty').hide();
     }
   }
 
diff --git a/lib/resources/dashboard/stylesheets/deployments.less b/lib/resources/dashboard/stylesheets/deployments.less
index 692f5e4..f2b4ee7 100644
--- a/lib/resources/dashboard/stylesheets/deployments.less
+++ b/lib/resources/dashboard/stylesheets/deployments.less
@@ -50,6 +50,10 @@
       color: #fff;
     }
 
+    hr {
+      border-top-color: #ccc; 
+    }
+
   }
 
   .component-item.deploying .component-item-header {
@@ -101,16 +105,25 @@
     }
   }
 
+
+
   #existing-deployment-dropdown {
     margin-top: 10px;
     color: #999;
 
-    option {
-      &:first-child {
-        color: #999;
-      }
+  }
 
+  #deployments-empty #existing-deployment-dropdown {
+    option {
+      color: @black;
+    }
+
+  }
+
+  #inner-deployments #existing-deployment-dropdown {
+    option {
       color: white;
+
     }
   }
 }
@@ -141,7 +154,9 @@
       color: @textColor !important;
     }
   }
+}
 
+.modal {
   .cancel-btn {
     display: inline-block;
     margin-left: 8px;
diff --git a/lib/resources/dashboard/stylesheets/layout.less b/lib/resources/dashboard/stylesheets/layout.less
index 305fcbb..6cdbb9a 100644
--- a/lib/resources/dashboard/stylesheets/layout.less
+++ b/lib/resources/dashboard/stylesheets/layout.less
@@ -34,15 +34,20 @@ body {
     color: white;
     display: inline-block;
     margin: 0;
-    font-size: 11pt;
+    font-size: 16px;
     line-height: 38px;
 
+    > i {
+      margin-top: 2px;
+    }
+
     &:hover, &.active {
       background: rgba(255,255,255, 0.1);
       text-decoration: none;
     }
 
     .caret {
+      opacity: 1;
       border-top-color: white;
       margin-top: 18px;
     }
diff --git a/lib/resources/dashboard/stylesheets/style.css b/lib/resources/dashboard/stylesheets/style.css
index ffb251e..fabf763 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;
@@ -4077,15 +4071,19 @@ body {
   color: white;
   display: inline-block;
   margin: 0;
-  font-size: 11pt;
+  font-size: 16px;
   line-height: 38px;
 }
+#header .header-link > i {
+  margin-top: 2px;
+}
 #header .header-link:hover,
 #header .header-link.active {
   background: rgba(255, 255, 255, 0.1);
   text-decoration: none;
 }
 #header .header-link .caret {
+  opacity: 1;
   border-top-color: white;
   margin-top: 18px;
 }
@@ -4113,11 +4111,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;
@@ -4208,11 +4203,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;
 }
@@ -4283,6 +4275,9 @@ body {
   padding: 20px;
   color: #fff;
 }
+#deployments #deployments-empty hr {
+  border-top-color: #ccc;
+}
 #deployments .component-item.deploying .component-item-header {
   box-shadow: inset 0 0 10px 0px #429e96;
   animation: deploying 0.5s infinite alternate;
@@ -4323,11 +4318,11 @@ body {
   margin-top: 10px;
   color: #999;
 }
-#deployments #existing-deployment-dropdown option {
-  color: white;
+#deployments #deployments-empty #existing-deployment-dropdown option {
+  color: #363535;
 }
-#deployments #existing-deployment-dropdown option:first-child {
-  color: #999;
+#deployments #inner-deployments #existing-deployment-dropdown option {
+  color: white;
 }
 #deployAuthModal .row {
   margin-top: 20px;
@@ -4344,7 +4339,7 @@ body {
 #deployAuthModal .form-vertical label {
   color: #666666 !important;
 }
-#deployAuthModal .cancel-btn {
+.modal .cancel-btn {
   display: inline-block;
   margin-left: 8px;
   vertical-align: middle;
@@ -4701,7 +4696,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;
@@ -4748,11 +4743,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;
@@ -4776,7 +4768,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,
@@ -5003,12 +4995,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 {
@@ -5016,8 +5008,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;
@@ -5118,7 +5110,9 @@ select {
 #dialog input,
 .modal input,
 #dialog textarea,
-.modal textarea {
+.modal textarea,
+#dialog select,
+.modal select {
   background-color: #ffffff;
   color: #666666;
 }
@@ -5735,6 +5729,8 @@ table input[type=number] {
 }
 .modal-header h3 {
   color: #363535;
+  line-height: 22px;
+  margin: 2px 0 2px 0;
 }
 #api table {
   margin-bottom: 0;
diff --git a/lib/resources/dashboard/stylesheets/style.less b/lib/resources/dashboard/stylesheets/style.less
index 6636fe1..611ff24 100644
--- a/lib/resources/dashboard/stylesheets/style.less
+++ b/lib/resources/dashboard/stylesheets/style.less
@@ -100,7 +100,7 @@ background-color: darken(@black, 10%);
 
 input, textarea, select {background: darken(@black, 10%); color: @white; border: solid 1px @black;}
 #dialog, .modal {
-  input, textarea {
+  input, textarea, select {
     background-color: #ffffff;
     color: @textColor; 
   }
@@ -787,7 +787,11 @@ table input {
 }
 
 .modal-header {
-  h3 {color: @black;}
+  h3 {
+    color: @black;
+    line-height: 22px;
+    margin: 2px 0 2px 0;
+  }
 }
 
 #api {