adds a simple publish status UI to show errors

2 files changed, 85 insertions, 21 deletions

diff --git a/public/editor/editor.js b/public/editor/editor.js
index a0873d6..08c09b0 100644
--- a/public/editor/editor.js
+++ b/public/editor/editor.js
@@ -31,7 +31,13 @@ $(function () {
   });
 
   $.post('/editor/test-login', {}, function(response) {
-    $('#publish_btn span').text(response.logged_in ? 'Publish' : 'Sign In');
+    if(response.logged_in) {
+      $('.publish-dropdown .action-publish').removeClass('hidden');
+      $('.publish-dropdown .action-signin').addClass('hidden');
+    } else {
+      $('.publish-dropdown .action-publish').addClass('hidden');
+      $('.publish-dropdown .action-signin').removeClass('hidden');      
+    }
   });
 
   $('#publish_btn').click(function(){
@@ -42,28 +48,43 @@ $(function () {
     }
   });
 
-  $('#--publish_btn').click(function(){
-    if($('#publish_btn span').text() == 'Publish') {
-
-      $.post('/editor/publish', {
-        name: $("#post-name").val(),
-        body: editor.serialize().content.value
-      }, function(response) {
-        if(response.location) {
-          reset_page().then(function(){
-            window.location = response.location;
-          });
-        }
-      });
+  $('#new_btn').click(function(){
+    if(confirm('This will discard your current post. Are you sure?')) {
+      reset_page();
+    }
+  });
 
-    } else {
-      var url = prompt("Enter your URL");
-      window.location = '/auth/start?me=' + encodeURIComponent(url) + '&redirect=/editor';
+  $('#signin-domain').on('keydown', function(e){
+    if(e.keyCode == 13) {
+      $('#signin-btn').click();
     }
   });
+  $('#signin-btn').click(function(){
+    window.location = '/auth/start?me=' + encodeURIComponent($('#signin-domain').val()) + '&redirect=/editor';
+  });
+  $('#publish-confirm').click(function(){
+    $('#publish-help').addClass('hidden');
+    $('#publish-in-progress').removeClass('hidden');
 
-  $('#new_btn').click(function(){
-    reset_page();
+    $.post('/editor/publish', {
+      name: $("#post-name").val(),
+      body: editor.serialize().content.value
+    }, function(response) {
+      if(response.location) {
+        reset_page().then(function(){
+          $('#publish-success-url').attr('href', response.location);
+          $('#publish-in-progress').addClass('hidden');
+          $('#publish-error-debug').html('').addClass('hidden');
+          $('#publish-error').addClass('hidden');
+          $('#publish-success').removeClass('hidden');
+        });
+      } else {
+        $('#publish-in-progress').addClass('hidden');
+        $('#publish-error-debug').html(response.response).removeClass('hidden');
+        $('#publish-error').removeClass('hidden');
+        $('#publish-success').addClass('hidden');
+      }
+    });    
   });
 
 });
diff --git a/public/editor/style.css b/public/editor/style.css
index 2f76cdb..8cb602f 100644
--- a/public/editor/style.css
+++ b/public/editor/style.css
@@ -57,7 +57,7 @@ img { border: 0; }
   clear: both;
 }
 
-.toolbar .btn {
+.btn {
   height: 38px;
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
@@ -73,10 +73,35 @@ img { border: 0; }
   vertical-align: middle;
   cursor: pointer;
 }
-.toolbar .btn:hover {
+.btn:hover {
   border-color: #61a7ae;
   color: #51a1a8;
 }
+.btn.btn-medium {
+  height: 30px;
+  padding: 0 16px;
+  font-size: 13px;
+}
+.btn.btn-small {
+  height: 26px;
+  padding: 0 16px;
+  font-size: 13px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+input.form-field-small {
+  height: 24px;
+  margin-top: 1px;
+  font-size: 13px;
+  color: #51a1a8;
+  padding: 0 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  border: 1px #93dee5 solid;
+}
 
 .publish-dropdown {
   position: absolute;
@@ -86,6 +111,9 @@ img { border: 0; }
   background: white;
   width: 280px;
   min-height: 60px;
+  font-family: sans-serif;
+  font-size: 14px;
+  line-height: 18px;
   border: 1px solid #dbdbdb;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
@@ -107,6 +135,21 @@ img { border: 0; }
   display: block;
   border: #dbdbdb 1px solid;
 }
+.publish-dropdown .dropdown-content {
+  padding: 9px;
+}
+.publish-dropdown input {
+  font-family: sans-serif;  
+}
+.publish-dropdown .helptext {
+  padding: 8px 4px 12px 4px;
+  color: #333;
+}
+pre#publish-error-debug {
+  overflow: scroll;
+  font-size: 11px;
+  line-height: 12px;
+}
 
 .hidden {
   display: none;