styling compose box

8 files changed, 193 insertions, 76 deletions

diff --git a/bucky/app/router.js b/bucky/app/router.js
index 21abe97..4c94c19 100644
--- a/bucky/app/router.js
+++ b/bucky/app/router.js
@@ -235,19 +235,37 @@ module.exports = function(app){
   app.get("/mail/",
     middleware.ensureAuthenticated,
     function(req, res){
-      res.render("pages/mailbox", {title: "inbox" })
+      res.render("pages/mailbox", {title: "your inbox" })
+    }
+  )
+  app.get("/mail/compose",
+    middleware.ensureAuthenticated,
+    function(req, res){
+      res.render("pages/compose", {
+        title: "new message",
+        subject: fortune("subjects"),
+      })
     }
   )
   app.get("/mail/:box",
     middleware.ensureAuthenticated,
     function(req, res){
-      res.render("pages/mailbox", { title: util.sanitize(req.params.box) })
+      res.render("pages/mailbox", { title: "your " + util.sanitize(req.params.box) })
+    }
+  )
+  app.get("/mail/compose/:username",
+    middleware.ensureAuthenticated,
+    function(req, res){
+      res.render("pages/compose", {
+        title: "new message",
+        subject: fortune("subjects"),
+      })
     }
   )
-  app.get("/message/:id",
+  app.get("/mail/read/:id",
     middleware.ensureAuthenticated,
     function(req, res){
-      res.render("pages/message", { title: util.sanitize(req.params.box) })
+      res.render("pages/message", { title: "read message" })
     }
   )
   app.get("/api/mailbox/:box",
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 45b2ed0..9be7f20 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -449,6 +449,7 @@ pre br {
   font-size: 15px;
   margin-top: 10px;
 }
+#compose textarea,
 #thread_form textarea {
   width: 100%;
   height: 240px;
@@ -457,6 +458,17 @@ pre br {
   font-size: 15px;
   margin: 10px 0;
 }
+#compose textarea {
+  margin-left: 50px;
+}
+#compose input[name=subject] {
+  width: 300px;
+}
+#compose .buttons {
+  position: relative;
+  text-align: right;
+  left: 50px;
+}
 .inputs {
   display: flex;
   flex-direction: row;
@@ -608,8 +620,56 @@ pre br {
   border: 1px solid #ddd;
   box-shadow: 0 1px 1px rgba(0,0,0,0.1);
 }
-#thread_settings {
+
+/* SETTINGS */
+#thread_settings h2 {
+  font-size: 16px;
+  margin: 0;
+}
+#thread_settings .inner {
+  padding: 20px;
+  text-align: left;
+}
+#thread_controls {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+}
+#thread_controls > div {
+  max-width: 50%;
 }
+#thread_fields {
+  text-align: left;
+}
+.thread_field,
+#thread_fields > div {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+}
+#thread_controls label {
+  margin-top: 4px;
+  padding-right: 5px;
+}
+#thread_fields input[type=text] {
+  font-size: 13px;
+  width: 200px;
+  transform: translateY(-2px);
+}
+#thread_settings .close_link {
+  position: absolute;
+  top: 23px;
+  right: 10px;
+}
+#thread_fields label {
+  display: block;
+  width: 80px;
+}
+.desktop button.thread_delete:hover {
+  background: #ff8288;
+}
+
+/* SEARCH */
 
 #search {
   padding: 5px;
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 03c7bc8..1419e81 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -3,23 +3,24 @@ var SiteRouter = Router.extend({
 	el: "body",
 	
 	routes: {
-		"/":                     'login',
-		"/index/:keyword":       'index',
-		"/index":                'index',
-		"/login":                'login',
-		"/signup":               'signup',
-		"/details/:id":          'details',
-		"/details/:id/settings": 'threadSettings',
-		"/post":                 'post',
-		"/post/:keyword":        'post',
-		"/search":               'search',
-		"/mail":                 'mailbox',
-		"/mail/:mailbox":        'mailbox',
-		"/mail/compose":         'compose',
-		"/message/:id":          'message',
-		"/comment/:id/edit":     'editComment',
-		"/profile":              'profile',
-		"/profile/:username":    'profile',
+		"/":                       'login',
+		"/index/:keyword":         'index',
+		"/index":                  'index',
+		"/login":                  'login',
+		"/signup":                 'signup',
+		"/details/:id":            'details',
+		"/details/:id/settings":   'threadSettings',
+		"/post":                   'post',
+		"/post/:keyword":          'post',
+		"/search":                 'search',
+		"/mail":                   'mailbox',
+		"/mail/:mailbox":          'mailbox',
+		"/mail/compose":           'compose',
+		"/mail/compose/:username": 'compose',
+		"/message/:id":            'message',
+		"/comment/:id/edit":       'editComment',
+		"/profile":                'profile',
+		"/profile/:username":      'profile',
 	},
 	
 	initialize: function(){
@@ -73,8 +74,9 @@ var SiteRouter = Router.extend({
     app.view.load(username || auth.user.username)
   },
   
-  compose: function(){
+  compose: function(username){
     app.view = new ComposeView ()
+    app.view.load(username)
   },
 
   search: function(){
diff --git a/public/assets/js/lib/views/mail/compose.js b/public/assets/js/lib/views/mail/compose.js
index 49f29f4..2c76b3f 100644
--- a/public/assets/js/lib/views/mail/compose.js
+++ b/public/assets/js/lib/views/mail/compose.js
@@ -1,3 +1,36 @@
 var ComposeView = FormView.extend({
+  
+  el: "#compose",
+  
+  events: {
+  },
+  
+  action: "",
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+  },
+  
+  load: function(username){
+    this.$("[name=username]").val(sanitize(username))
+    $("body").removeClass('loading')
+  },
+  
+  validate: function(){
+    var errors = []
+    var username = $("[name=username]").val()
+    var message = $("[name=message]").val()
+    if (! username || ! username.length) {
+      errors.push("Please enter who this message is going to.")
+    }
+    if (! message || ! message.length) {
+      errors.push("Please enter your message.")
+    }
+    return errors.length ? errors : null
+  },
 
-})
+  success: function(){
+    window.location.reload()
+  }
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/profile/profile.js b/public/assets/js/lib/views/profile/profile.js
index 2180532..34c8fba 100644
--- a/public/assets/js/lib/views/profile/profile.js
+++ b/public/assets/js/lib/views/profile/profile.js
@@ -18,7 +18,8 @@ var ProfileView = View.extend({
   populate: function(user){
     $("body").removeClass('loading')
     var $table = this.$("table")
-    this.$("img").attr("src", "/data/profile/" + sanitize(user.username) + ".jpg")
+    var username = sanitize(user.username)
+    this.$("img").attr("src", "/data/profile/" + username + ".jpg")
     var fields = "username realname phone location".split(" ").map((key) => {
       if (! user[key]) return;
       var t = this.template.replace(/{{key}}/, sanitize(key))
@@ -32,6 +33,14 @@ var ProfileView = View.extend({
                            .replace(/{{value}}/, date[0] + ' <small>' + date[1] + '</small>')
       $table.append(t)
     })
+
+    var fields = "message".split(" ").map((key) => {
+      if (! user[key]) return;
+      var t = this.template.replace(/{{key}}/, "&nbsp;")
+                           .replace(/{{value}}/, '<a href="/mail/compose/' + username + '">send ' + username + ' a message</a>')
+      $table.append(t)
+    })
+
   },
 
 })
diff --git a/views/pages/compose.ejs b/views/pages/compose.ejs
new file mode 100644
index 0000000..b50c279
--- /dev/null
+++ b/views/pages/compose.ejs
@@ -0,0 +1,36 @@
+<% include ../partials/header %>
+<div class="subtitle">
+  <a href='/'>&lt; Home</a> &middot;
+  <a href='/mail/'>Inbox</a>
+</div>
+
+<div id="content">
+
+<table id="compose">
+  <tr>
+    <td>
+      <form>
+        <div>
+          <label for="compose_to">to:</label>
+          <input id="compose_to" type='text' name='username'>
+        </div>
+        <div style="margin-top: 5px;">
+          <label for="compose_subject">subject:</label>
+          <input id="compose_subject" type='text' name='subject' value='<%= subject %>'>
+        </div>
+        <div>
+          <textarea name="message" placeholder="Enter your message"></textarea><br>
+        </div>
+        <div class="buttons">
+          <button id="save_as_draft" style="opacity: 0.5">SAVE DRAFT</button>
+          <input type="submit" value="SEND MESSAGE" />
+        </div>
+        <div class="errors"></div>
+      </form>
+    </td>
+  </tr>
+</table>
+
+</div>
+
+<% include ../partials/footer %>
diff --git a/views/pages/mailbox.ejs b/views/pages/mailbox.ejs
index e4e0302..9d6dc85 100644
--- a/views/pages/mailbox.ejs
+++ b/views/pages/mailbox.ejs
@@ -1,15 +1,23 @@
 <% include ../partials/header %>
-
+<div class="subtitle">
+  <a href='/'>&lt; Home</a> &middot;
+  <a href='/mail/compose'>New Message</a>
+</div>
 <div id="content">
+  
+  <div id="nomessages">
+    <h3>No messages</h3>
+  </div>
 
   <table id="messages" class="ledger">
+    <tr><td></td></tr>
     <script class="template" type="text/html">
       <tr class='row'>
         <td>
           {{to}} <a href="/profile/{{username}}">{{username}}</a> &middot;
         </td>
         <td class="ivory">
-          <a href="/message/{{id}}">{{subject}}</a>
+          <a href="/mail/read/{{id}}">{{subject}}</a>
         </td>
         <td class="{{date_class}}">
           {{date}} <small>{{time}}</small>
diff --git a/views/partials/settings.ejs b/views/partials/settings.ejs
index d36cf6c..b174546 100644
--- a/views/partials/settings.ejs
+++ b/views/partials/settings.ejs
@@ -61,52 +61,3 @@
     </div>
   </div>
 </div>
-
-<style>
-  #thread_settings h2 {
-    font-size: 16px;
-    margin: 0;
-  }
-  #thread_settings .inner {
-    padding: 20px;
-    text-align: left;
-  }
-  #thread_controls {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: row;
-  }
-  #thread_controls > div {
-    max-width: 50%;
-  }
-  #thread_fields {
-    text-align: left;
-  }
-  .thread_field,
-  #thread_fields > div {
-    display: flex;
-    flex-direction: row;
-    margin-top: 5px;
-  }
-  #thread_controls label {
-    margin-top: 4px;
-    padding-right: 5px;
-  }
-  #thread_fields input[type=text] {
-    font-size: 13px;
-    width: 200px;
-    transform: translateY(-2px);
-  }
-  #thread_settings .close_link {
-    position: absolute;
-    top: 23px;
-    right: 10px;
-  }
-  #thread_fields label {
-    display: block;
-    width: 80px;
-  }
-  .desktop button.thread_delete:hover {
-    background: #ff8288;
-  }
-</style>
\ No newline at end of file