Add actual links to format tabs so they can be opened in new tabs, per #13.

public/javascripts/application.coffee

@@ -82,6 +82,7 @@ class MailCatcher
           $el = $(el)
           format = $el.attr 'data-message-format'
           if $.inArray(format, message.formats) >= 0
+            $el.find('a').attr('href', '/messages/' + id + '.' + format)
             $el.show()
           else
             $el.hide()

public/javascripts/application.js

@@ -99,6 +99,7 @@
             $el = $(el);
             format = $el.attr('data-message-format');
             if ($.inArray(format, message.formats) >= 0) {
+              $el.find('a').attr('href', '/messages/' + id + '.' + format);
               return $el.show();
             } else {
               return $el.hide();

public/stylesheets/application.css

@@ -239,122 +239,96 @@ body > header {
   box-orient: vertical;
   -moz-box-flex: 1;
   -webkit-box-flex: 1;
-  box-flex: 1;
+  box-flex: 1; }
-  border-top: 1px solid white;
+  #message > header {
-}
+    overflow: hidden;
-/* line 126, application.sass */
+    *zoom: 1; }
-#message > header {
+    #message > header .metadata {
-  overflow: hidden;
+      overflow: hidden;
-  *zoom: 1;
+      *zoom: 1;
-}
+      padding: 0.5em;
-/* line 128, application.sass */
+      padding-top: 0; }
-#message > header .metadata {
+      #message > header .metadata dt, #message > header .metadata dd {
-  overflow: hidden;
+        padding: 0.25em; }
-  *zoom: 1;
+      #message > header .metadata dt {
-  padding: 0.5em;
+        float: left;
-}
+        clear: left;
-/* line 131, application.sass */
+        width: 8em;
-#message > header .metadata dt, #message > header .metadata dd {
+        margin-right: 0.5em;
-  padding: 0.25em;
+        text-align: right;
-}
+        font-weight: bold;
-/* line 133, application.sass */
+        color: #666666;
-#message > header .metadata dt {
+        text-shadow: 0 1px 0 white; }
-  float: left;
+      #message > header .metadata dd.subject {
-  clear: left;
+        font-weight: bold; }
-  width: 8em;
+      #message > header .metadata .attachments {
-  margin-right: 0.5em;
+        display: none; }
-  text-align: right;
+        #message > header .metadata .attachments ul {
-  font-weight: bold;
+          display: inline; }
-  color: #666666;
+          #message > header .metadata .attachments ul li {
-  text-shadow: 0 1px 0 white;
+            display: -moz-inline-box;
-}
+            -moz-box-orient: vertical;
-/* line 142, application.sass */
+            display: inline-block;
-#message > header .metadata dd.subject {
+            vertical-align: middle;
-  font-weight: bold;
+            *vertical-align: auto;
-}
+            margin-right: 0.5em; }
-/* line 144, application.sass */
+            #message > header .metadata .attachments ul li {
-#message > header .metadata .attachments {
+              *display: inline; }
-  display: none;
+    #message > header .views ul {
-}
+      padding: 0 0.5em;
-/* line 146, application.sass */
+      border-bottom: 1px solid #cccccc; }
-#message > header .metadata .attachments ul {
+    #message > header .views .tab {
-  display: inline;
+      display: -moz-inline-box;
-}
+      -moz-box-orient: vertical;
-/* line 148, application.sass */
+      display: inline-block;
-#message > header .metadata .attachments ul li {
+      vertical-align: middle;
-  display: -moz-inline-box;
+      *vertical-align: auto; }
-  -moz-box-orient: vertical;
+      #message > header .views .tab {
-  display: inline-block;
+        *display: inline; }
-  vertical-align: middle;
+      #message > header .views .tab a {
-  *vertical-align: auto;
+        display: -moz-inline-box;
-  margin-right: 0.5em;
+        -moz-box-orient: vertical;
-}
+        display: inline-block;
-/* line 7, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
+        vertical-align: middle;
-#message > header .metadata .attachments ul li {
+        *vertical-align: auto;
-  *display: inline;
+        padding: 0.5em;
-}
+        border: 1px solid #cccccc;
-/* line 152, application.sass */
+        background: #dddddd;
-#message > header .views ul {
+        color: #333333;
-  padding: 0 0.5em;
+        border-width: 1px 1px 0 1px;
-  border-bottom: 1px solid #cccccc;
+        cursor: pointer;
-}
+        text-shadow: 0 1px 0 #eeeeee;
-/* line 155, application.sass */
+        text-decoration: none; }
-#message > header .views .tab {
+        #message > header .views .tab a {
-  display: -moz-inline-box;
+          *display: inline; }
-  -moz-box-orient: vertical;
+      #message > header .views .tab:not(.selected):hover a {
-  display: inline-block;
+        background-color: #eeeeee; }
-  vertical-align: middle;
+      #message > header .views .tab.selected a {
-  *vertical-align: auto;
+        background: white;
-  padding: 0.5em;
+        color: black;
-  border: 1px solid #cccccc;
+        height: 13px;
-  background: #dddddd;
+        -moz-box-shadow: 1px 1px 0 #cccccc;
-  color: #333333;
+        -webkit-box-shadow: 1px 1px 0 #cccccc;
-  border-width: 1px 1px 0 1px;
+        -o-box-shadow: 1px 1px 0 #cccccc;
-  cursor: pointer;
+        box-shadow: 1px 1px 0 #cccccc;
-  text-shadow: 0 1px 0 #eeeeee;
+        margin-bottom: -2px;
-}
+        cursor: default; }
-/* line 7, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
+    #message > header .views .action {
-#message > header .views .tab {
+      display: -moz-inline-box;
-  *display: inline;
+      -moz-box-orient: vertical;
-}
+      display: inline-block;
-/* line 164, application.sass */
+      vertical-align: middle;
-#message > header .views .tab:not(.selected):hover {
+      *vertical-align: auto;
-  background-color: #eeeeee;
+      float: right;
-}
+      margin: 0 0.25em; }
-/* line 166, application.sass */
+      #message > header .views .action {
-#message > header .views .tab.selected {
+        *display: inline; }
-  background: white;
+  #message .body {
-  color: black;
+    display: -moz-box;
-  height: 13px;
+    display: -webkit-box;
-  -moz-box-shadow: 1px 1px 0 #cccccc;
+    display: box;
-  -webkit-box-shadow: 1px 1px 0 #cccccc;
+    -moz-box-flex: 1;
-  -o-box-shadow: 1px 1px 0 #cccccc;
+    -webkit-box-flex: 1;
-  box-shadow: 1px 1px 0 #cccccc;
+    box-flex: 1;
-  margin-bottom: -2px;
+    width: 100%;
-  cursor: default;
+    background: white; }
-}
-/* line 173, application.sass */
-#message > header .views .action {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: middle;
-  *vertical-align: auto;
-  float: right;
-  margin: 0 0.25em;
-}
-/* line 7, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
-#message > header .views .action {
-  *display: inline;
-}
-/* line 177, application.sass */
-#message .body {
-  display: -moz-box;
-  display: -webkit-box;
-  display: box;
-  -moz-box-flex: 1;
-  -webkit-box-flex: 1;
-  box-flex: 1;
-  width: 100%;
-  background: white;
-}

public/stylesheets/application.sass

@@ -163,22 +163,25 @@ body > header
         border-bottom: 1px solid #ccc
       .tab
         +inline-block
-        padding: .5em
+        a
-        border: 1px solid #ccc
+          +inline-block
-        background: #ddd
+          padding: .5em
-        color: #333
+          border: 1px solid #ccc
-        border-width: 1px 1px 0 1px
+          background: #ddd
-        cursor: pointer
+          color: #333
-        +text-shadow(0 1px 0 #eeeeee)
+          border-width: 1px 1px 0 1px
-      .tab:not(.selected):hover
+          cursor: pointer
-        background-color: #eee
+          +text-shadow(0 1px 0 #eeeeee)
-      .tab.selected
+          text-decoration: none
-        background: #fff
+        &:not(.selected):hover a
-        color: #000
+          background-color: #eee
-        height: 13px
+        &.selected a
-        +box-shadow(1px 1px 0 #ccc)
+          background: #fff
-        margin-bottom: -2px
+          color: #000
-        cursor: default
+          height: 13px
+          +box-shadow(1px 1px 0 #ccc)
+          margin-bottom: -2px
+          cursor: default
       .action
         +inline-block
         float: right

views/index.haml

@@ -44,9 +44,14 @@
             %ul
         %nav.views
           %ul
-            %li.format.tab.html.selected{'data-message-format' => 'html'} HTML
+            %li.format.tab.html.selected{'data-message-format' => 'html'}
-            %li.format.tab.plain{'data-message-format' => 'plain'} Plain Text
+              %a{:href => '#'} HTML
-            %li.format.tab.source{'data-message-format' => 'source'} Source
+            %li.format.tab.plain{'data-message-format' => 'plain'}
+              %a{:href => '#'}Plain Text
+            %li.format.tab.source{'data-message-format' => 'source'}
+              %a{:href => '#'}Source
+            %li.tab.fractal
+              %a{:href => '#'}Fractal Analysis
             %li.action.download
               %a.button{:href => '#'}
                 %span Download