mailcatcher 0.3.2 → 0.4.0

data/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2010 Samuel Cochran
+Copyright (c) 2010-2011 Samuel Cochran
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -6,34 +6,44 @@ MailCatcher runs a super simple SMTP server which catches any message sent to it
 
 ![MailCatcher screenshot](http://puu.sh/2fZR)
 
-## How
-
-1. `gem install mailcatcher`
-2. `mailcatcher`
-3. Go to http://localhost:1080/
-4. Send mail through smtp://localhost:1025
-
 ## Features
 
 * Catches all mail and stores it for display.
 * Shows HTML, Plain Text and Source version of messages, as applicable.
-* Download original email to view in your native mail client(s).
 * Rewrites HTML enabling display of embedded, inline images/etc and open links in a new window. (currently very basic)
 * Lists attachments and allows separate downloading of parts.
-* Written super-simply in EventMachine, easy to dig in and change.
+* Download original email to view in your native mail client(s).
 * Command line options to override the default SMTP/HTTP IP and port settings.
 * Mail appears instantly if your browser supports [WebSockets][websockets].
-* Daemonizable to run in the background.
+* Runs as a daemon run in the background.
+* Sendmail-analogue command, `catchmail`, makes [using mailcatcher from PHP][withphp] a lot easier.
+* Written super-simply in EventMachine, easy to dig in and change.
 
-## Caveats
+## How
 
-* Mail processing is fairly basic but easily modified. If something doesn't work for you, fork and fix it or file an issue and let me know. Include the whole message you're having problems with.
-* The interface is very basic and has not been tested on many browsers yet.
+1. `gem install mailcatcher`
+2. `mailcatcher`
+3. Go to http://localhost:1080/
+4. Send mail through smtp://localhost:1025
+
+The brave can get the source from [the GitHub repository][mailcatcher-github].
+
+## RVM
+
+Under RVM your mailcatcher command may only available under the ruby you install mailcatcher into. To prevent this, and to prevent gem conflicts, install mailcatcher into a dedicated gemset and create wrapper scripts:
+
+    rvm default@mailcatcher --create gem install mailcatcher
+    rvm wrapper default@mailcatcher --no-prefix mailcatcher catchmail
 
 ## API
 
 A fairly RESTful URL schema means you can download a list of messages in JSON from `/messages`, each message's metadata with `/messages/:id.json`, and then the pertinent parts with `/messages/:id.html` and `/messages/:id.plain` for the default HTML and plain text version, `/messages/:id/:cid` for individual attachments by CID, or the whole message with `/messages/:id.source`.
 
+## Caveats
+
+* Mail processing is fairly basic but easily modified. If something doesn't work for you, fork and fix it or file an issue and let me know. Include the whole message you're having problems with.
+* The interface is very basic and has not been tested on many browsers yet.
+
 ## TODO
 
 * Growl support.
@@ -46,12 +56,18 @@ A fairly RESTful URL schema means you can download a list of messages in JSON fr
 
 MailCatcher is just a mishmash of other people's hard work. Thank you so much to the people who have built the wonderful guts on which this project relies.
 
+Thanks also to [The Frontier Group][tfg] for giving me the idea, being great guinea pigs and letting me steal pieces of time to keep the project alive.
+
 ## Copyright
 
-Copyright (c) 2010 Samuel Cochran. See LICENSE for details.
+Copyright © 2010-2011 Samuel Cochran. See [LICENSE][license] for details.
 
 ## Dreams
 
-For dream catching, try [this](http://goo.gl/kgbh).
+For dream catching, try [this](http://goo.gl/kgbh). OR [THIS](http://www.nyanicorn.com), OMG.
 
-  [websockets]: http://www.whatwg.org/specs/web-socket-protocol/
+  [license]: https://github.com/sj26/mailcatcher/blob/master/LICENSE
+  [mailcatcher-github]: https://github.com/sj26/mailcatcher
+  [tfg]: http://www.thefrontiergroup.com.au
+  [websockets]: http://www.whatwg.org/specs/web-socket-protocol/
+  [withphp]: http://webschuur.com/publications/blogs/2011-05-29-catchmail_for_drupal_and_other_phpapplications_the_simple_version

data/lib/mail_catcher.rb

@@ -17,7 +17,7 @@ module MailCatcher
     :http_ip => '127.0.0.1',
     :http_port => '1080',
     :verbose => false,
-    :daemon => false,
+    :daemon => true,
   }
   
   def self.parse! arguments=ARGV, defaults=@@defaults
@@ -45,8 +45,8 @@ module MailCatcher
           options[:http_port] = port
         end
 
-        parser.on('-d', '--daemon', 'Run as a daemon') do
-          options[:daemon] = true
+        parser.on('-f', '--foreground', 'Run in the foreground') do
+          options[:daemon] = false
         end
 
         parser.on('-v', '--verbose', 'Be more verbose') do
@@ -68,22 +68,54 @@ module MailCatcher
     options ||= parse!
     
     puts "Starting MailCatcher"
-    puts "==> smtp://#{options[:smtp_ip]}:#{options[:smtp_port]}"
-    puts "==> http://#{options[:http_ip]}:#{options[:http_port]}"
 
     Thin::Logging.silent = true
     
+    # One EventMachine loop...
     EventMachine.run do
-      EventMachine.start_server options[:smtp_ip], options[:smtp_port], Smtp
+      # TODO: DRY this up
       
-      Thin::Server.start options[:http_ip], options[:http_port], Web
+      # Set up an SMTP server to run within EventMachine
+      rescue_port options[:smtp_port] do
+        EventMachine.start_server options[:smtp_ip], options[:smtp_port], Smtp
+        puts "==> smtp://#{options[:smtp_ip]}:#{options[:smtp_port]}"
+      end
+      
+      # Let Thin set itself up inside our EventMachine loop
+      # (Skinny/WebSockets just works on the inside)
+      rescue_port options[:http_port] do
+        Thin::Server.start options[:http_ip], options[:http_port], Web
+        puts "==> http://#{options[:http_ip]}:#{options[:http_port]}"
+      end
       
+      # Daemonize, if we should, but only after the servers have started.
       if options[:daemon]
-        # Make sure the servers start before daemonizing.
         EventMachine.next_tick do
-          Daemons.daemonize :app_name => "mailcatcher"
+          puts "*** MailCatcher now runs as a daemon by default. Go to the web interface to quit."
+          Process.daemon
         end
       end
     end
   end
+  
+  def self.quit!
+    EventMachine.next_tick { EventMachine.stop_event_loop }
+  end
+
+protected 
+
+  def self.rescue_port port
+    begin
+      yield
+      
+    # XXX: EventMachine only spits out RuntimeError with a string description
+    rescue RuntimeError
+      if $!.to_s =~ /\bno acceptor\b/
+        puts "~~> ERROR: Something's using port #{port}. Are you already running MailCatcher?"
+        exit -1
+      else
+        raise
+      end
+    end
+  end
 end

data/lib/mail_catcher/mail.rb

@@ -69,7 +69,7 @@ module MailCatcher::Mail
     end
     
     def messages
-      @@messages_query ||= db.prepare "SELECT id, sender, recipients, subject, size, created_at FROM message ORDER BY created_at DESC"
+      @@messages_query ||= db.prepare "SELECT id, sender, recipients, subject, size, created_at FROM message ORDER BY created_at ASC"
       @@messages_query.execute.map do |row|
         Hash[row.fields.zip(row)].tap do |message|
           message["recipients"] &&= ActiveSupport::JSON.decode message["recipients"]
@@ -142,5 +142,13 @@ module MailCatcher::Mail
         part["cid"] == cid
       end
     end
+    
+    def delete!
+      @@delete_messages_query ||= db.prepare 'DELETE FROM message'
+      @@delete_message_parts_query ||= db.prepare 'DELETE FROM message_part'
+      
+      @@delete_messages_query.execute and
+      @@delete_message_parts_query.execute
+    end
   end
 end

data/lib/mail_catcher/web.rb

@@ -17,6 +17,11 @@ module MailCatcher
       haml :index
     end
   
+    delete '/' do
+      MailCatcher.quit!
+      status 204
+    end
+  
     get '/messages' do
       if request.websocket?
         request.websocket!(
@@ -32,6 +37,11 @@ module MailCatcher
       end
     end
   
+    delete '/messages' do
+      MailCatcher::Mail.delete!
+      status 204
+    end
+    
     get '/messages/:id.json' do
       id = params[:id].to_i
       if message = MailCatcher::Mail.message(id)
@@ -109,7 +119,7 @@ module MailCatcher
         not_found
       end
     end
-  
+    
     not_found do
       "<html><body><h1>No Dice</h1><p>The message you were looking for does not exist, or doesn't have content of this type.</p></body></html>"
     end

data/public/javascripts/application.js

@@ -3,11 +3,40 @@
   var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
   MailCatcher = (function() {
     function MailCatcher() {
-      $('#mail tr').live('click', __bind(function(e) {
+      $('#messages tr').live('click', __bind(function(e) {
         return this.loadMessage($(e.currentTarget).attr('data-message-id'));
       }, this));
-      $('#message .actions ul li.tab').live('click', __bind(function(e) {
-        return this.loadMessageBody($('#mail tr.selected').attr('data-message-id'), $(e.currentTarget).attr('data-message-format'));
+      $('#message .views .tab').live('click', __bind(function(e) {
+        return this.loadMessageBody($('#messages tr.selected').attr('data-message-id'), $(e.currentTarget).attr('data-message-format'));
+      }, this));
+      $('nav.app .clear a').live('click', __bind(function(e) {
+        if (confirm("You will lose all your received messages.\n\nAre you sure you want to clear all messages?")) {
+          return $.ajax({
+            url: '/messages',
+            type: 'DELETE',
+            success: function() {
+              $('#messages tbody, #message .metadata dd').empty();
+              $('#message .metadata .attachments').hide();
+              return $('#message iframe').attr('src', 'about:blank');
+            },
+            error: function() {
+              return alert('Error while quitting.');
+            }
+          });
+        }
+      }, this));
+      $('nav.app .quit a').live('click', __bind(function(e) {
+        if (confirm("You will lose all your received messages.\n\nAre you sure you want to quit?")) {
+          return $.ajax({
+            type: 'DELETE',
+            success: function() {
+              return location.replace($('body > header h1 a').attr('href'));
+            },
+            error: function() {
+              return alert('Error while quitting.');
+            }
+          });
+        }
       }, this));
       this.refresh();
       this.subscribe();
@@ -29,25 +58,25 @@
       if (message.id != null) {
         message = message.id;
       }
-      return $("#mail tbody tr[data-message-id=\"" + message + "\"]").length > 0;
+      return $("#messages tbody tr[data-message-id=\"" + message + "\"]").length > 0;
     };
     MailCatcher.prototype.addMessage = function(message) {
-      return $('#mail tbody').append($('<tr />').attr('data-message-id', message.id.toString()).append($('<td/>').text(message.sender)).append($('<td/>').text((message.recipients || []).join(', '))).append($('<td/>').text(message.subject)).append($('<td/>').text(this.formatDate(message.created_at))));
+      return $('#messages tbody').append($('<tr />').attr('data-message-id', message.id.toString()).append($('<td/>').text(message.sender)).append($('<td/>').text((message.recipients || []).join(', '))).append($('<td/>').text(message.subject)).append($('<td/>').text(this.formatDate(message.created_at))));
     };
     MailCatcher.prototype.loadMessage = function(id) {
       if ((id != null ? id.id : void 0) != null) {
         id = id.id;
       }
-      id || (id = $('#mail tr.selected').attr('data-message-id'));
+      id || (id = $('#messages tr.selected').attr('data-message-id'));
       if (id != null) {
-        $('#mail tbody tr:not([data-message-id="' + id + '"])').removeClass('selected');
-        $('#mail tbody tr[data-message-id="' + id + '"]').addClass('selected');
+        $('#messages tbody tr:not([data-message-id="' + id + '"])').removeClass('selected');
+        $('#messages tbody tr[data-message-id="' + id + '"]').addClass('selected');
         return $.getJSON('/messages/' + id + '.json', __bind(function(message) {
-          $('#message .received span').text(this.formatDate(message.created_at));
-          $('#message .from span').text(message.sender);
-          $('#message .to span').text((message.recipients || []).join(', '));
-          $('#message .subject span').text(message.subject);
-          $('#message .actions ul li.format').each(function(i, el) {
+          $('#message .metadata dd.created_at').text(this.formatDate(message.created_at));
+          $('#message .metadata dd.from').text(message.sender);
+          $('#message .metadata dd.to').text((message.recipients || []).join(', '));
+          $('#message .metadata dd.subject').text(message.subject);
+          $('#message .views .tab.format').each(function(i, el) {
             var $el, format;
             $el = $(el);
             format = $el.attr('data-message-format');
@@ -57,30 +86,30 @@
               return $el.hide();
             }
           });
-          if ($("#message .actions ul li.tab.selected:not(:visible)").length) {
-            $("#message .actions ul li.tab.selected").removeClass("selected");
-            $("#message .actions ul li.tab:visible:first").addClass("selected");
+          if ($("#message .views .tab.selected:not(:visible)").length) {
+            $("#message .views .tab.selected").removeClass("selected");
+            $("#message .views .tab:visible:first").addClass("selected");
           }
           if (message.attachments.length) {
-            $('#message .metadata .attachments ul').empty();
+            $('#message .metadata dd.attachments ul').empty();
             $.each(message.attachments, function(i, attachment) {
-              return $('#message .metadata .attachments ul').append($('<li>').append($('<a>').attr('href', attachment['href']).addClass(attachment['type'].split('/', 1)[0]).addClass(attachment['type'].replace('/', '-')).text(attachment['filename'])));
+              return $('#message .metadata dd.attachments ul').append($('<li>').append($('<a>').attr('href', attachment['href']).addClass(attachment['type'].split('/', 1)[0]).addClass(attachment['type'].replace('/', '-')).text(attachment['filename'])));
             });
             $('#message .metadata .attachments').show();
           } else {
             $('#message .metadata .attachments').hide();
           }
-          $('#message .actions ul li.download a').attr('href', "/messages/" + id + ".eml");
+          $('#message .actions .download a').attr('href', "/messages/" + id + ".eml");
           return this.loadMessageBody();
         }, this));
       }
     };
     MailCatcher.prototype.loadMessageBody = function(id, format) {
-      id || (id = $('#mail tr.selected').attr('data-message-id'));
-      format || (format = $('#message .actions ul li.format.selected').attr('data-message-format'));
+      id || (id = $('#messages tr.selected').attr('data-message-id'));
+      format || (format = $('#message .views .tab.format.selected').attr('data-message-format'));
       format || (format = 'html');
-      $("#message .actions ul li.tab[data-message-format=\"" + format + "\"]:not(.selected)").addClass('selected');
-      $("#message .actions ul li.tab:not([data-message-format=\"" + format + "\"]).selected").removeClass('selected');
+      $("#message .views .tab[data-message-format=\"" + format + "\"]:not(.selected)").addClass('selected');
+      $("#message .views .tab:not([data-message-format=\"" + format + "\"]).selected").removeClass('selected');
       if (id != null) {
         return $('#message iframe').attr("src", "/messages/" + id + "." + format);
       }

data/public/stylesheets/application.css

@@ -1,186 +1,247 @@
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0px;
-  padding: 0px;
-  border: 0px;
-  outline: 0px;
-  font-weight: inherit;
-  font-style: inherit;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
   font-size: 100%;
-  font-family: inherit;
+  font: inherit;
   vertical-align: baseline; }
 
 body {
-  line-height: 1;
-  background: #eee;
-  color: #000;
-  font-size: 12px;
-  font-family: Helvetica, Arial, sans-serif; }
+  line-height: 1; }
 
 ol, ul {
   list-style: none; }
 
 table {
-  border-collapse: separate;
-  border-spacing: 0px; }
+  border-collapse: collapse;
+  border-spacing: 0; }
 
 caption, th, td {
   text-align: left;
-  font-weight: normal; }
+  font-weight: normal;
+  vertical-align: middle; }
+
+q, blockquote {
+  quotes: none; }
+  q:before, q:after, blockquote:before, blockquote:after {
+    content: "";
+    content: none; }
+
+a img {
+  border: none; }
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
 
 html, body {
   width: 100%;
   height: 100%; }
 
 body {
-  display: -webkit-box;
   display: -moz-box;
+  display: -webkit-box;
   display: box;
-  -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
-  box-orient: vertical; }
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  background: #eee;
+  color: #000;
+  font-size: 12px;
+  font-family: Helvetica, sans-serif; }
+  body body {
+    font-size: 75%;
+    line-height: 2em; }
+  body html > body {
+    font-size: 12px; }
+
+body > header {
+  overflow: hidden;
+  *zoom: 1;
+  border-bottom: 1px solid #ccc; }
+  body > header h1 {
+    float: left;
+    padding: 6px;
+    font-size: 18px;
+    font-weight: bold; }
+    body > header h1 a {
+      color: black;
+      text-decoration: none;
+      text-shadow: 0 1px 0 white;
+      -moz-transition-property: 0.1s ease;
+      -webkit-transition-property: 0.1s ease;
+      -o-transition-property: 0.1s ease;
+      transition-property: 0.1s ease;
+      -moz-transition-duration: 1s;
+      -webkit-transition-duration: 1s;
+      -o-transition-duration: 1s;
+      transition-duration: 1s; }
+      body > header h1 a:hover {
+        color: #4183C4; }
+  body > header nav {
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #fff; }
+    body > header nav.project {
+      float: left; }
+    body > header nav.app {
+      float: right; }
+    body > header nav li {
+      display: inline; }
+      body > header nav li a {
+        display: inline-block;
+        float: left;
+        padding: 9px;
+        border-left: 1px solid #fff;
+        border-right: 1px solid #ccc;
+        background: #eee;
+        color: #666;
+        font-weight: bold;
+        text-decoration: none;
+        text-shadow: 0 1px 0 white; }
+        body > header nav li a:hover {
+          background: #fff; }
+        body > header nav li a:active {
+          margin: 1px -1px -1px 1px;
+          -moz-box-shadow: none;
+          -webkit-box-shadow: none;
+          -o-box-shadow: none;
+          box-shadow: none; }
+
+#messages {
+  width: 100%;
+  height: 10em;
+  overflow: auto;
+  background: #fff;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #ccc; }
+  #messages table {
+    width: 100%; }
+    #messages table thead tr {
+      background: #eee;
+      color: #333; }
+      #messages table thead tr th {
+        padding: .25em;
+        font-weight: bold;
+        color: #666;
+        text-shadow: 0 1px 0 white; }
+    #messages table tbody tr:nth-child(even) {
+      background: #f0f0f0; }
+    #messages table tbody tr.selected {
+      background: Highlight;
+      color: HighlightText; }
+    #messages table tbody tr td {
+      padding: .25em; }
 
 #message {
-  display: -webkit-box;
   display: -moz-box;
+  display: -webkit-box;
   display: box;
-  -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
+  -webkit-box-orient: vertical;
   box-orient: vertical;
-  -webkit-box-flex: 1;
   -moz-box-flex: 1;
-  box-flex: 1; }
-
-#message iframe {
-  display: -webkit-box;
-  display: -moz-box;
-  display: box;
   -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  box-flex: 1; }
-
-#mail {
-  height: 10em;
-  overflow: auto;
-  background: #fff;
-  border-bottom: 1px solid #ccc; }
-
-#mail table {
-  width: 100%; }
-
-#mail table thead tr {
-  background: #eee;
-  color: #333; }
-
-#mail table thead tr th {
-  padding: .25em;
-  font-weight: bold;
-  color: #666;
-  -moz-text-shadow: 0 1px 0 #fff;
-  -webkit-text-shadow: 0 1px 0 #fff;
-  text-shadow: 0 1px 0 #fff; }
-
-#mail table tbody tr:nth-child(even) {
-  background: #f0f0f0;
-  color: #333; }
-
-#mail table tbody tr.selected {
-  background: Highlight;
-  color: HighlightText; }
-
-#mail table tbody tr td {
-  padding: .25em; }
-
-#message .metadata {
-  padding: 1em; }
-
-#message .metadata div {
-  padding: .25em; }
-
-#message .metadata div label {
-  display: inline-block;
-  width: 8em;
-  margin-right: .5em;
-  text-align: right;
-  font-weight: bold;
-  color: #666;
-  -moz-text-shadow: 0 1px 0 #fff;
-  -webkit-text-shadow: 0 1px 0 #fff;
-  text-shadow: 0 1px 0 #fff; }
-
-#message .metadata .subject span {
-  font-weight: bold; }
-
-#message .metadata .attachments {
-  display: none; }
-
-#message .metadata .attachments ul {
-  display: inline; }
-
-#message .metadata .attachments ul li {
-  display: inline-block;
-  margin-right: .5em; }
-
-#message .actions ul {
-  border-bottom: 1px solid #999;
-  padding: 0 .5em; }
-
-#message .actions ul li.tab {
-  display: inline-block;
-  padding: .5em;
-  border: 1px solid #999;
-  background: #ddd;
-  color: #333;
-  border-width: 1px 1px 0 1px;
-  cursor: pointer;
-  -moz-text-shadow: 0 1px 0 #eee;
-  -webkit-text-shadow: 0 1px 0 #eee;
-  text-shadow: 0 1px 0 #eee; }
-
-#message .actions ul li.tab:not(.selected):hover {
-  background-color: #ddd; }
-
-#message .actions ul li.tab.selected {
-  background: #fff;
-  color: #000;
-  height: 13px;
-  -moz-box-shadow: 1px 1px 0 #ccc;
-  -webkit-box-shadow: 1px 1px 0 #ccc;
-  box-shadow: 1px 1px 0 #ccc;
-  margin-bottom: -2px; }
-
-#message .actions ul li.button {
-  display: inline-block;
-  float: right;
-  margin: 0 .25em; }
-
-#message .actions ul li.button a {
-  display: inline-block;
-  padding: .25em .5em;
-  border: 1px solid #999;
-  background: #ddd;
-  color: #333;
-  text-decoration: none;
-  -moz-text-shadow: 1px 1px 0 #eee;
-  -webkit-text-shadow: 1px 1px 0 #eee;
-  text-shadow: 1px 1px 0 #eee;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: 1px 1px 0 #ccc; }
-
-#message .actions ul li.button a:hover {
-  background: #fff;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none; }
-
-#message .actions ul li.button a:active {
-  margin: 1px -1px -1px 1px;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none; }
-
-#message .body {
-  width: 100%;
-  min-height: 20em;
-  height: 100%;
-  background: #fff; }
+  box-flex: 1;
+  border-top: 1px solid #fff; }
+  #message > header {
+    overflow: hidden;
+    *zoom: 1; }
+    #message > header .metadata {
+      overflow: hidden;
+      *zoom: 1;
+      padding: .5em; }
+      #message > header .metadata dt, #message > header .metadata dd {
+        padding: .25em; }
+      #message > header .metadata dt {
+        float: left;
+        clear: left;
+        width: 8em;
+        margin-right: .5em;
+        text-align: right;
+        font-weight: bold;
+        color: #666;
+        text-shadow: 0 1px 0 white; }
+      #message > header .metadata dd.subject {
+        font-weight: bold; }
+      #message > header .metadata .attachments {
+        display: none; }
+        #message > header .metadata .attachments ul {
+          display: inline; }
+          #message > header .metadata .attachments ul li {
+            display: -moz-inline-box;
+            -moz-box-orient: vertical;
+            display: inline-block;
+            vertical-align: middle;
+            *vertical-align: auto;
+            margin-right: .5em; }
+            #message > header .metadata .attachments ul li {
+              *display: inline; }
+    #message > header .views ul {
+      padding: 0 .5em;
+      border-bottom: 1px solid #999; }
+    #message > header .views .tab {
+      display: inline-block;
+      padding: .5em;
+      border: 1px solid #999;
+      background: #ddd;
+      color: #333;
+      border-width: 1px 1px 0 1px;
+      cursor: pointer;
+      text-shadow: 0 1px 0 #eeeeee; }
+    #message > header .views .tab:not(.selected):hover {
+      background-color: #ddd; }
+    #message > header .views .tab.selected {
+      background: #fff;
+      color: #000;
+      height: 13px;
+      -moz-box-shadow: 1px 1px 0 #cccccc;
+      -webkit-box-shadow: 1px 1px 0 #cccccc;
+      -o-box-shadow: 1px 1px 0 #cccccc;
+      box-shadow: 1px 1px 0 #cccccc;
+      margin-bottom: -2px; }
+    #message > header .views .button {
+      display: inline-block;
+      float: right;
+      margin: 0 .25em; }
+      #message > header .views .button a {
+        display: inline-block;
+        padding: .25em .5em;
+        border: 1px solid #999;
+        background: #ddd;
+        color: #333;
+        text-decoration: none;
+        text-shadow: 1px 1px 0 #eeeeee;
+        -moz-box-shadow: 1px 1px 0 #cccccc;
+        -webkit-box-shadow: 1px 1px 0 #cccccc;
+        -o-box-shadow: 1px 1px 0 #cccccc;
+        box-shadow: 1px 1px 0 #cccccc; }
+        #message > header .views .button a:hover {
+          background: #fff;
+          text-shadow: none; }
+        #message > header .views .button a:active {
+          margin: 1px -1px -1px 1px;
+          -moz-box-shadow: none;
+          -webkit-box-shadow: none;
+          -o-box-shadow: none;
+          box-shadow: none; }
+  #message .body {
+    display: -moz-box;
+    display: -webkit-box;
+    display: box;
+    -moz-box-flex: 1;
+    -webkit-box-flex: 1;
+    box-flex: 1;
+    width: 100%;
+    background: #fff; }

data/views/index.haml

@@ -7,7 +7,16 @@
     %script{:src => "/javascripts/date.js"}
     %script{:src => "/javascripts/application.js"}
   %body
-    #mail
+    %header
+      %h1
+        %a{:href => "http://mailcatcher.me", :target => '_blank'} MailCatcher
+      %nav.app
+        %ul
+          %li.clear
+            %a{:href => '#', :title => 'Clear all messages'} Clear
+          %li.quit
+            %a{:href => '#', :title => 'Quit MailCatcher'} Quit
+    %nav#messages
       %table
         %thead
           %tr
@@ -16,29 +25,26 @@
             %th Subject
             %th Received
         %tbody
-    #message
-      .metadata
-        .received
-          %label Received
-          %span
-        .from
-          %label From
-          %span
-        .to
-          %label To
-          %span
-        .subject
-          %label Subject
-          %span
-        .attachments
-          %label Attachments
+    %article#message
+      %header
+        %dl.metadata
+          %dt.created_at Received
+          %dd.created_at
+          %dt.from From
+          %dd.from
+          %dt.to To
+          %dd.to
+          %dt.subject Subject
+          %dd.subject
+          %dt.attachments Attachments
+          %dd.attachments
+            %ul
+        %nav.views
           %ul
-      .actions
-        %ul
-          %li.format.tab.html.selected{'data-message-format' => 'html'} HTML
-          %li.format.tab.plain{'data-message-format' => 'plain'} Plain Text
-          %li.format.tab.source{'data-message-format' => 'source'} Source
-          %li.button.download
-            %a{:href => '#'}
-              %span Download
+            %li.format.tab.html.selected{'data-message-format' => 'html'} HTML
+            %li.format.tab.plain{'data-message-format' => 'plain'} Plain Text
+            %li.format.tab.source{'data-message-format' => 'source'} Source
+            %li.button.download
+              %a{:href => '#'}
+                %span Download
       %iframe.body

metadata

@@ -2,7 +2,7 @@
 name: mailcatcher
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors: 
 - Samuel Cochran
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-05-29 00:00:00 Z
+date: 2011-05-31 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: activesupport
@@ -123,16 +123,27 @@ dependencies:
   type: :development
   version_requirements: *id010
 - !ruby/object:Gem::Dependency 
-  name: coffee-script
+  name: compass
   prerelease: false
   requirement: &id011 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
       - !ruby/object:Gem::Version 
-        version: "2.2"
+        version: 0.11.1
   type: :development
   version_requirements: *id011
+- !ruby/object:Gem::Dependency 
+  name: coffee-script
+  prerelease: false
+  requirement: &id012 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        version: "2.2"
+  type: :development
+  version_requirements: *id012
 description: "    MailCatcher runs a super simple SMTP server which catches any\n    message sent to it to display in a web interface. Run\n    mailcatcher, set your favourite app to deliver to\n    smtp://127.0.0.1:1025 instead of your default SMTP server,\n    then check out http://127.0.0.1:1080 to see the mail.\n"
 email: sj26@sj26.com
 executables: