changeset 7162:3a3d9c8432ed

HTML email templates: don't use link color for non-links The link color should only be used for actual hyperlinks. Using it for anything else is very confusing for users. For text like repository names, branch names, etc. introduce a new style 'data_style' that is normal text with a grey background and border.
author Thomas De Schampheleire <thomas.de_schampheleire@nokia.com>
date Tue, 06 Feb 2018 20:53:54 +0100
parents d9fc7312177e
children 51906236eed3
files kallithea/model/notification.py kallithea/templates/email_templates/changeset_comment.html kallithea/templates/email_templates/pull_request.html kallithea/templates/email_templates/pull_request_comment.html kallithea/templates/email_templates/registration.html kallithea/tests/models/test_dump_html_mails.ref.html
diffstat 6 files changed, 53 insertions(+), 52 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/model/notification.py	Sat Feb 03 22:29:41 2018 +0100
+++ b/kallithea/model/notification.py	Tue Feb 06 20:53:54 2018 +0100
@@ -338,6 +338,7 @@
             _kwargs.update({
                 "default_style": "%(sans_style)s;font-weight:200;font-size:14px;line-height:17px;color:%(color_text)s" % _kwargs,
                 "comment_style": "%(monospace_style)s;white-space:pre-wrap" % _kwargs,
+                "data_style": "border:%(color_border)s 1px solid;background:%(color_background_grey)s" % _kwargs,
                 "emph_style": "font-weight:600;color:%(color_emph)s" % _kwargs,
                 "link_style": "color:%(color_link)s;text-decoration:none" % _kwargs,
                 })
--- a/kallithea/templates/email_templates/changeset_comment.html	Sat Feb 03 22:29:41 2018 +0100
+++ b/kallithea/templates/email_templates/changeset_comment.html	Tue Feb 06 20:53:54 2018 +0100
@@ -21,13 +21,13 @@
                 <a style="${link_style}"
                    href="${cs_target_repo}">${cs_target_repo}</a>
                 ${_('branch')}
-                <span style="color:${color_link}">${branch}</span>:
+                <span style="${data_style}">${branch}</span>:
             </div>
             <div>
                 "<a style="${link_style}"
                    href="${cs_url}">${h.shorter(message, 60, firstline=True)}</a>"
                 ${_('by')}
-                <span style="color:${color_link}">${cs_author.full_name_and_username}</span>.
+                <span style="${data_style}">${cs_author.full_name_and_username}</span>.
             </div>
         </td>
     </tr>
--- a/kallithea/templates/email_templates/pull_request.html	Sat Feb 03 22:29:41 2018 +0100
+++ b/kallithea/templates/email_templates/pull_request.html	Tue Feb 06 20:53:54 2018 +0100
@@ -13,19 +13,19 @@
                 <a style="${link_style}"
                    href="${pr_source_repo}">${pr_source_repo}</a>
                 ${_('at')}
-                <span style="color:${color_link}">${pr_source_branch}</span>
+                <span style="${data_style}">${pr_source_branch}</span>
                 ${_('to')}
                 <a style="${link_style}"
                    href="${pr_target_repo}">${pr_target_repo}</a>
                 ${_('at')}
-                <span style="color:${color_link}">${pr_target_branch}</span>:
+                <span style="${data_style}">${pr_target_branch}</span>
             </div>
             <div>
                 <a style="${link_style}"
                    href="${pr_url}">${pr_nice_id}</a>
                 "<span style="color:${color_link}">${pr_title}</span>"
                 ${_('by')}
-                <span style="color:${color_link}">${pr_owner.full_name_and_username}</span>.
+                <span style="${data_style}">${pr_owner.full_name_and_username}</span>.
             </div>
         </td>
     </tr>
--- a/kallithea/templates/email_templates/pull_request_comment.html	Sat Feb 03 22:29:41 2018 +0100
+++ b/kallithea/templates/email_templates/pull_request_comment.html	Tue Feb 06 20:53:54 2018 +0100
@@ -21,19 +21,19 @@
                 <a style="${link_style}"
                    href="${pr_source_repo}">${pr_source_repo}</a>
                 ${_('branch')}
-                <span style="color:${color_link}">${pr_source_branch}</span>
+                <span style="${data_style}">${pr_source_branch}</span>
                 ${_('to')}
                 <a style="${link_style}"
                    href="${pr_target_repo}">${pr_target_repo}</a>
                 ${_('branch')}
-                <span style="color:${color_link}">${pr_target_branch}</span>:
+                <span style="${data_style}">${pr_target_branch}</span>:
             </div>
             <div>
                 <a style="${link_style}"
                    href="${pr_url}">${pr_nice_id}</a>
                 "<span style="color:${color_link}">${pr_title}</span>"
                 ${_('by')}
-                <span style="color:${color_link}">${pr_owner.full_name_and_username}</span>.
+                <span style="${data_style}">${pr_owner.full_name_and_username}</span>.
             </div>
         </td>
     </tr>
--- a/kallithea/templates/email_templates/registration.html	Sat Feb 03 22:29:41 2018 +0100
+++ b/kallithea/templates/email_templates/registration.html	Tue Feb 06 20:53:54 2018 +0100
@@ -10,7 +10,7 @@
         <td>
             ${_('Username')}:
         </td>
-        <td style="color:${color_link}">
+        <td style="${data_style}">
             ${new_username}
         </td>
     </tr>
@@ -21,7 +21,7 @@
         <td>
             ${_('Full Name')}:
         </td>
-        <td style="color:${color_link}">
+        <td style="${data_style}">
             ${new_full_name}
         </td>
     </tr>
@@ -32,7 +32,7 @@
         <td>
             ${_('Email')}:
         </td>
-        <td style="color:${color_link}">
+        <td style="${data_style}">
             ${new_email}
         </td>
     </tr>
--- a/kallithea/tests/models/test_dump_html_mails.ref.html	Sat Feb 03 22:29:41 2018 +0100
+++ b/kallithea/tests/models/test_dump_html_mails.ref.html	Tue Feb 06 20:53:54 2018 +0100
@@ -114,13 +114,13 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://example.com/repo_target">http://example.com/repo_target</a>
                 branch
-                <span style="color:#395fa0">brunch</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
             </div>
             <div>
                 "<a style="color:#395fa0;text-decoration:none"
                    href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -273,13 +273,13 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://example.com/repo_target">http://example.com/repo_target</a>
                 branch
-                <span style="color:#395fa0">brunch</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
             </div>
             <div>
                 "<a style="color:#395fa0;text-decoration:none"
                    href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -450,13 +450,13 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://example.com/repo_target">http://example.com/repo_target</a>
                 branch
-                <span style="color:#395fa0">brunch</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
             </div>
             <div>
                 "<a style="color:#395fa0;text-decoration:none"
                    href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -627,13 +627,13 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://example.com/repo_target">http://example.com/repo_target</a>
                 branch
-                <span style="color:#395fa0">brunch</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
             </div>
             <div>
                 "<a style="color:#395fa0;text-decoration:none"
                    href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -815,7 +815,7 @@
         <td>
             Username:
         </td>
-        <td style="color:#395fa0">
+        <td style="border:#ddd 1px solid;background:#f9f9f9">
             newbie
         </td>
     </tr>
@@ -826,7 +826,7 @@
         <td>
             Full Name:
         </td>
-        <td style="color:#395fa0">
+        <td style="border:#ddd 1px solid;background:#f9f9f9">
             New Full Name
         </td>
     </tr>
@@ -837,7 +837,7 @@
         <td>
             Email:
         </td>
-        <td style="color:#395fa0">
+        <td style="border:#ddd 1px solid;background:#f9f9f9">
             new@email.com
         </td>
     </tr>
@@ -960,19 +960,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 at
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 at
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -1149,19 +1149,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 at
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 at
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -1368,19 +1368,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -1533,19 +1533,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -1716,19 +1716,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -1899,19 +1899,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -2081,19 +2081,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -2263,19 +2263,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -2451,19 +2451,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>
@@ -2639,19 +2639,19 @@
                 <a style="color:#395fa0;text-decoration:none"
                    href="https://dev.org/repo">https://dev.org/repo</a>
                 branch
-                <span style="color:#395fa0">devbranch</span>
+                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
                 to
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://mainline.com/repo">http://mainline.com/repo</a>
                 branch
-                <span style="color:#395fa0">trunk</span>:
+                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
             </div>
             <div>
                 <a style="color:#395fa0;text-decoration:none"
                    href="http://pr.org/7">#7</a>
                 "<span style="color:#395fa0">The Title</span>"
                 by
-                <span style="color:#395fa0">u2 u3 (u2)</span>.
+                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
             </div>
         </td>
     </tr>