Reorganized Actionmailer inline CSS code. Use sensible default path for mailer s…

…tylesheets. Module is small enough to live in initializer.

Reorganized Actionmailer inline CSS code. Use sensible default path for mailer s…
…tylesheets. Module is small enough to live in initializer.
Nathan Broadbent
1 parent 7a0a865f
Showing 6 changed files with 82 additions and 76 deletions Show diff stats
config/initializers/actionmailer_inline_css.rb
config/initializers/inline_css.rb
lib/inline_css.rb
public/stylesheets/email.css
public/stylesheets/mailers/mailer.css
spec/mailers/mailer_spec.rb
@@ -0,0 +1,18 @@
+#
+# ActionMailer module for inline css in html emails
+#
+module ActionMailer::InlineCss
+  def render(*args)
+    if (template = args.first[:template]) && template.mime_type.html?
+      premailer = Premailer.new(super, :with_html_string => true,
+                                          :css => default_params[:css] ||
+                                                  ["#{Rails.root}/public/stylesheets/mailers/#{mailer_name}.css"])
+      premailer.to_inline_css
+    else
+      super
+    end
+  end
+end
+
+ActionMailer::Base.send :include, ActionMailer::InlineCss
+
@@ -1,2 +0,0 @@
-require 'inline_css'
-
@@ -1,18 +0,0 @@
-#
-# module for ActionMailer to inline css in html emails
-#
-module InlineCss
-  def render(*args)
-    if (template = args.first[:template]) && template.mime_type.html?
-      premailer = Premailer.new(super,
-                                  :with_html_string => true,
-                                  :css => [Rails.root.join("public/stylesheets/email.css").to_s])
-      premailer.to_inline_css
-    else
-      super
-    end
-  end
-end
-
-ActionMailer::Base.send :include, InlineCss
-
@@ -1,55 +0,0 @@
-td.header {
-  padding: 10px 20px 8px 20px;
-  height: 70px;
-  background-color: #11112f;
-  text-align: left;
-  border-bottom: 1px solid #ccccee;
-}
-  td.header a {
-    display: block;
-    height: 31px;
-    width: 88px;
-    margin-top: 4px;
-  }
-    /* Style 'Errbit' logo alt text if image cannot be loaded. */
-    td.header a img {
-      border: none;
-      color: #E3E3E3;
-      font-family: helvetica;
-      font-size: 30px;
-      font-weight: bold;
-      min-height: 31px;
-      text-shadow: 0 1px 0 #EEEEFF;
-    }
-
-td.section, td.content, td.footer {
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  background-color: #ffffff;
-  text-align: left;
-}
-td.section {
-  padding: 0;
-  border-bottom: 1px solid #dddddd;
-}
-td.content {
-  padding: 20px 20px 10px 20px;
-  line-height: 1.3em;
-}
-td.footer {
-  padding: 10px 20px 20px 20px;
-  font-size: 11px;
-  font-weight: bold;
-  color: #666666;
-}
-
-a.bold, span.bold { font-weight: bold; }
-
-p { margin: 0 0 15px 0; }
-p.heading {
-  color: #6a6a6a;
-  margin-bottom: 4px;
-}
-p.monospace, p.backtrace { font-family: monospace; }
-p.backtrace { margin-bottom: 2px; }
-
@@ -0,0 +1,55 @@
+td.header {
+  padding: 10px 20px 8px 20px;
+  height: 70px;
+  background-color: #11112f;
+  text-align: left;
+  border-bottom: 1px solid #ccccee;
+}
+  td.header a {
+    display: block;
+    height: 31px;
+    width: 88px;
+    margin-top: 4px;
+  }
+    /* Style 'Errbit' logo alt text if image cannot be loaded. */
+    td.header a img {
+      border: none;
+      color: #E3E3E3;
+      font-family: helvetica;
+      font-size: 30px;
+      font-weight: bold;
+      min-height: 31px;
+      text-shadow: 0 1px 0 #EEEEFF;
+    }
+
+td.section, td.content, td.footer {
+  font-family: Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  background-color: #ffffff;
+  text-align: left;
+}
+td.section {
+  padding: 0;
+  border-bottom: 1px solid #dddddd;
+}
+td.content {
+  padding: 20px 20px 10px 20px;
+  line-height: 1.3em;
+}
+td.footer {
+  padding: 10px 20px 20px 20px;
+  font-size: 11px;
+  font-weight: bold;
+  color: #666666;
+}
+
+a.bold, span.bold { font-weight: bold; }
+
+p { margin: 0 0 15px 0; }
+p.heading {
+  color: #6a6a6a;
+  margin-bottom: 4px;
+}
+p.monospace, p.backtrace { font-family: monospace; }
+p.backtrace { margin-bottom: 2px; }
+
@@ -5,11 +5,19 @@ describe Mailer do
     include EmailSpec::Helpers
     include EmailSpec::Matchers
-    it "should html-escape the notice's message for the html part" do
+    before do
       @notice = Factory(:notice, :message => "class < ActionController::Base")
       @email = Mailer.err_notification(@notice)
+    end
+
+    it "should html-escape the notice's message for the html part" do
       @email.should have_body_text("class &lt; ActionController::Base")
     end
+
+    it "should inline css" do
+      @email.should have_body_text '<td class="header" style="'
+      # ('style' attribute is not present unless premailer works.)
+    end
   end
 end
@@ -0,0 +1,18 @@		@@ -0,0 +1,18 @@
	1	+#
	2	+# ActionMailer module for inline css in html emails
	3	+#
	4	+module ActionMailer::InlineCss
	5	+ def render(*args)
	6	+ if (template = args.first[:template]) && template.mime_type.html?
	7	+ premailer = Premailer.new(super, :with_html_string => true,
	8	+ :css => default_params[:css] \|\|
	9	+ ["#{Rails.root}/public/stylesheets/mailers/#{mailer_name}.css"])
	10	+ premailer.to_inline_css
	11	+ else
	12	+ super
	13	+ end
	14	+ end
	15	+end
	16	+
	17	+ActionMailer::Base.send :include, ActionMailer::InlineCss
	18	+
	@@ -1,18 +0,0 @@	@@ -1,18 +0,0 @@
1	-#
2	-# module for ActionMailer to inline css in html emails
3	-#
4	-module InlineCss
5	- def render(*args)
6	- if (template = args.first[:template]) && template.mime_type.html?
7	- premailer = Premailer.new(super,
8	- :with_html_string => true,
9	- :css => [Rails.root.join("public/stylesheets/email.css").to_s])
10	- premailer.to_inline_css
11	- else
12	- super
13	- end
14	- end
15	-end
16	-
17	-ActionMailer::Base.send :include, InlineCss
18	-
	@@ -1,55 +0,0 @@	@@ -1,55 +0,0 @@
1	-td.header {
2	- padding: 10px 20px 8px 20px;
3	- height: 70px;
4	- background-color: #11112f;
5	- text-align: left;
6	- border-bottom: 1px solid #ccccee;
7	-}
8	- td.header a {
9	- display: block;
10	- height: 31px;
11	- width: 88px;
12	- margin-top: 4px;
13	- }
14	- /* Style 'Errbit' logo alt text if image cannot be loaded. */
15	- td.header a img {
16	- border: none;
17	- color: #E3E3E3;
18	- font-family: helvetica;
19	- font-size: 30px;
20	- font-weight: bold;
21	- min-height: 31px;
22	- text-shadow: 0 1px 0 #EEEEFF;
23	- }
24	-
25	-td.section, td.content, td.footer {
26	- font-family: Helvetica,Arial,sans-serif;
27	- font-size: 14px;
28	- background-color: #ffffff;
29	- text-align: left;
30	-}
31	-td.section {
32	- padding: 0;
33	- border-bottom: 1px solid #dddddd;
34	-}
35	-td.content {
36	- padding: 20px 20px 10px 20px;
37	- line-height: 1.3em;
38	-}
39	-td.footer {
40	- padding: 10px 20px 20px 20px;
41	- font-size: 11px;
42	- font-weight: bold;
43	- color: #666666;
44	-}
45	-
46	-a.bold, span.bold { font-weight: bold; }
47	-
48	-p { margin: 0 0 15px 0; }
49	-p.heading {
50	- color: #6a6a6a;
51	- margin-bottom: 4px;
52	-}
53	-p.monospace, p.backtrace { font-family: monospace; }
54	-p.backtrace { margin-bottom: 2px; }
55	-
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+td.header {
	2	+ padding: 10px 20px 8px 20px;
	3	+ height: 70px;
	4	+ background-color: #11112f;
	5	+ text-align: left;
	6	+ border-bottom: 1px solid #ccccee;
	7	+}
	8	+ td.header a {
	9	+ display: block;
	10	+ height: 31px;
	11	+ width: 88px;
	12	+ margin-top: 4px;
	13	+ }
	14	+ /* Style 'Errbit' logo alt text if image cannot be loaded. */
	15	+ td.header a img {
	16	+ border: none;
	17	+ color: #E3E3E3;
	18	+ font-family: helvetica;
	19	+ font-size: 30px;
	20	+ font-weight: bold;
	21	+ min-height: 31px;
	22	+ text-shadow: 0 1px 0 #EEEEFF;
	23	+ }
	24	+
	25	+td.section, td.content, td.footer {
	26	+ font-family: Helvetica,Arial,sans-serif;
	27	+ font-size: 14px;
	28	+ background-color: #ffffff;
	29	+ text-align: left;
	30	+}
	31	+td.section {
	32	+ padding: 0;
	33	+ border-bottom: 1px solid #dddddd;
	34	+}
	35	+td.content {
	36	+ padding: 20px 20px 10px 20px;
	37	+ line-height: 1.3em;
	38	+}
	39	+td.footer {
	40	+ padding: 10px 20px 20px 20px;
	41	+ font-size: 11px;
	42	+ font-weight: bold;
	43	+ color: #666666;
	44	+}
	45	+
	46	+a.bold, span.bold { font-weight: bold; }
	47	+
	48	+p { margin: 0 0 15px 0; }
	49	+p.heading {
	50	+ color: #6a6a6a;
	51	+ margin-bottom: 4px;
	52	+}
	53	+p.monospace, p.backtrace { font-family: monospace; }
	54	+p.backtrace { margin-bottom: 2px; }
	55	+