From cc517b051cbe7ca654769114e9dfd3a107f8f526 Mon Sep 17 00:00:00 2001 From: Samuel Cochran Date: Thu, 7 Jul 2011 11:40:53 +0800 Subject: [PATCH] Add actual links to format tabs so they can be opened in new tabs, per #13. --- public/javascripts/application.coffee | 1 + public/javascripts/application.js | 1 + public/stylesheets/application.css | 212 +++++++++++--------------- public/stylesheets/application.sass | 35 +++-- views/index.haml | 11 +- 5 files changed, 122 insertions(+), 138 deletions(-) diff --git a/public/javascripts/application.coffee b/public/javascripts/application.coffee index 4a915de..a2b6290 100644 --- a/public/javascripts/application.coffee +++ b/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() diff --git a/public/javascripts/application.js b/public/javascripts/application.js index c1c3bd3..53ea171 100644 --- a/public/javascripts/application.js +++ b/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(); diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 129a0a3..aaaf757 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -239,122 +239,96 @@ body > header { box-orient: vertical; -moz-box-flex: 1; -webkit-box-flex: 1; - box-flex: 1; - border-top: 1px solid white; -} -/* line 126, application.sass */ -#message > header { - overflow: hidden; - *zoom: 1; -} -/* line 128, application.sass */ -#message > header .metadata { - overflow: hidden; - *zoom: 1; - padding: 0.5em; -} -/* line 131, application.sass */ -#message > header .metadata dt, #message > header .metadata dd { - padding: 0.25em; -} -/* line 133, application.sass */ -#message > header .metadata dt { - float: left; - clear: left; - width: 8em; - margin-right: 0.5em; - text-align: right; - font-weight: bold; - color: #666666; - text-shadow: 0 1px 0 white; -} -/* line 142, application.sass */ -#message > header .metadata dd.subject { - font-weight: bold; -} -/* line 144, application.sass */ -#message > header .metadata .attachments { - display: none; -} -/* line 146, application.sass */ -#message > header .metadata .attachments ul { - display: inline; -} -/* line 148, application.sass */ -#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: 0.5em; -} -/* 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 .metadata .attachments ul li { - *display: inline; -} -/* line 152, application.sass */ -#message > header .views ul { - padding: 0 0.5em; - border-bottom: 1px solid #cccccc; -} -/* line 155, application.sass */ -#message > header .views .tab { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - padding: 0.5em; - border: 1px solid #cccccc; - background: #dddddd; - color: #333333; - border-width: 1px 1px 0 1px; - cursor: pointer; - text-shadow: 0 1px 0 #eeeeee; -} -/* 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 .tab { - *display: inline; -} -/* line 164, application.sass */ -#message > header .views .tab:not(.selected):hover { - background-color: #eeeeee; -} -/* line 166, application.sass */ -#message > header .views .tab.selected { - background: white; - color: black; - 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; - cursor: default; -} -/* 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; -} + box-flex: 1; } + #message > header { + overflow: hidden; + *zoom: 1; } + #message > header .metadata { + overflow: hidden; + *zoom: 1; + padding: 0.5em; + padding-top: 0; } + #message > header .metadata dt, #message > header .metadata dd { + padding: 0.25em; } + #message > header .metadata dt { + float: left; + clear: left; + width: 8em; + margin-right: 0.5em; + text-align: right; + font-weight: bold; + color: #666666; + 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: 0.5em; } + #message > header .metadata .attachments ul li { + *display: inline; } + #message > header .views ul { + padding: 0 0.5em; + border-bottom: 1px solid #cccccc; } + #message > header .views .tab { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; } + #message > header .views .tab { + *display: inline; } + #message > header .views .tab a { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + padding: 0.5em; + border: 1px solid #cccccc; + background: #dddddd; + color: #333333; + border-width: 1px 1px 0 1px; + cursor: pointer; + text-shadow: 0 1px 0 #eeeeee; + text-decoration: none; } + #message > header .views .tab a { + *display: inline; } + #message > header .views .tab:not(.selected):hover a { + background-color: #eeeeee; } + #message > header .views .tab.selected a { + background: white; + color: black; + 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; + cursor: default; } + #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; } + #message > header .views .action { + *display: inline; } + #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; } diff --git a/public/stylesheets/application.sass b/public/stylesheets/application.sass index cda0ff4..d37ae60 100644 --- a/public/stylesheets/application.sass +++ b/public/stylesheets/application.sass @@ -163,22 +163,25 @@ body > header border-bottom: 1px solid #ccc .tab +inline-block - padding: .5em - border: 1px solid #ccc - background: #ddd - color: #333 - border-width: 1px 1px 0 1px - cursor: pointer - +text-shadow(0 1px 0 #eeeeee) - .tab:not(.selected):hover - background-color: #eee - .tab.selected - background: #fff - color: #000 - height: 13px - +box-shadow(1px 1px 0 #ccc) - margin-bottom: -2px - cursor: default + a + +inline-block + padding: .5em + border: 1px solid #ccc + background: #ddd + color: #333 + border-width: 1px 1px 0 1px + cursor: pointer + +text-shadow(0 1px 0 #eeeeee) + text-decoration: none + &:not(.selected):hover a + background-color: #eee + &.selected a + background: #fff + color: #000 + height: 13px + +box-shadow(1px 1px 0 #ccc) + margin-bottom: -2px + cursor: default .action +inline-block float: right diff --git a/views/index.haml b/views/index.haml index 6b50ef9..b6af434 100644 --- a/views/index.haml +++ b/views/index.haml @@ -44,9 +44,14 @@ %ul %nav.views %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.format.tab.html.selected{'data-message-format' => 'html'} + %a{:href => '#'} HTML + %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