Mercurial > kallithea
changeset 7163:51906236eed3
HTML email templates: restrict amount of visible hyperlinks
Users report that some HTML email templates are confusing due to the large
number of hyperlinks in them. They typically click the first thing they see
that looks clickable without actually reading what they are clicking on,
expecting that it all points to the same thing.
In pullrequest invitations, the pullrequest and changeset URLs should be
clickable, but the source and target repository should not: this is not what
you typically want to see when taking action on this mail.
Similarly in comment emails, the corresponding repository should not be
clickable.
Unfortunately, even if we remove the <a> hyperlink tags on these repository
URLs, most mail clients will still recognize the text as being URLs
and make them clickable anyway. Worse, they will do so in a different
styling than the other links.
Therefore, do add <a> tags in the HTML, but make use of styling like that of
data_style, i.e. regular text color, grey background with dark grey border.
The links _will_ thus be clickable but it will not be as inviting as before,
thus removing confusion.
| author | Thomas De Schampheleire <thomas.de_schampheleire@nokia.com> |
|---|---|
| date | Tue, 06 Feb 2018 21:28:13 +0100 |
| parents | 3a3d9c8432ed |
| children | ae81bcb8a93d |
| 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/tests/models/test_dump_html_mails.ref.html |
| diffstat | 5 files changed, 30 insertions(+), 29 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/model/notification.py Tue Feb 06 20:53:54 2018 +0100 +++ b/kallithea/model/notification.py Tue Feb 06 21:28:13 2018 +0100 @@ -341,6 +341,7 @@ "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, + "link_text_style": "color:%(color_text)s;text-decoration:none;border:%(color_border)s 1px solid;background:%(color_background_grey)s" % _kwargs, }) log.debug('rendering tmpl %s with kwargs %s', base, _kwargs)
--- a/kallithea/templates/email_templates/changeset_comment.html Tue Feb 06 20:53:54 2018 +0100 +++ b/kallithea/templates/email_templates/changeset_comment.html Tue Feb 06 21:28:13 2018 +0100 @@ -18,7 +18,7 @@ <td> <div> ${_('Changeset on')} - <a style="${link_style}" + <a style="${link_text_style}" href="${cs_target_repo}">${cs_target_repo}</a> ${_('branch')} <span style="${data_style}">${branch}</span>:
--- a/kallithea/templates/email_templates/pull_request.html Tue Feb 06 20:53:54 2018 +0100 +++ b/kallithea/templates/email_templates/pull_request.html Tue Feb 06 21:28:13 2018 +0100 @@ -10,12 +10,12 @@ <td> <div> ${_('Pull request from')} - <a style="${link_style}" + <a style="${link_text_style}" href="${pr_source_repo}">${pr_source_repo}</a> ${_('at')} <span style="${data_style}">${pr_source_branch}</span> ${_('to')} - <a style="${link_style}" + <a style="${link_text_style}" href="${pr_target_repo}">${pr_target_repo}</a> ${_('at')} <span style="${data_style}">${pr_target_branch}</span>
--- a/kallithea/templates/email_templates/pull_request_comment.html Tue Feb 06 20:53:54 2018 +0100 +++ b/kallithea/templates/email_templates/pull_request_comment.html Tue Feb 06 21:28:13 2018 +0100 @@ -18,12 +18,12 @@ <td> <div> ${_('Pull request from')} - <a style="${link_style}" + <a style="${link_text_style}" href="${pr_source_repo}">${pr_source_repo}</a> ${_('branch')} <span style="${data_style}">${pr_source_branch}</span> ${_('to')} - <a style="${link_style}" + <a style="${link_text_style}" href="${pr_target_repo}">${pr_target_repo}</a> ${_('branch')} <span style="${data_style}">${pr_target_branch}</span>:
--- a/kallithea/tests/models/test_dump_html_mails.ref.html Tue Feb 06 20:53:54 2018 +0100 +++ b/kallithea/tests/models/test_dump_html_mails.ref.html Tue Feb 06 21:28:13 2018 +0100 @@ -111,7 +111,7 @@ <td> <div> Changeset on - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://example.com/repo_target">http://example.com/repo_target</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>: @@ -270,7 +270,7 @@ <td> <div> Changeset on - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://example.com/repo_target">http://example.com/repo_target</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>: @@ -447,7 +447,7 @@ <td> <div> Changeset on - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://example.com/repo_target">http://example.com/repo_target</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>: @@ -624,7 +624,7 @@ <td> <div> Changeset on - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://example.com/repo_target">http://example.com/repo_target</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>: @@ -957,12 +957,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> at <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> at <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span> @@ -1146,12 +1146,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> at <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> at <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span> @@ -1365,12 +1365,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -1530,12 +1530,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -1713,12 +1713,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -1896,12 +1896,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -2078,12 +2078,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -2260,12 +2260,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -2448,12 +2448,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: @@ -2636,12 +2636,12 @@ <td> <div> Pull request from - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="https://dev.org/repo">https://dev.org/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span> to - <a style="color:#395fa0;text-decoration:none" + <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9" href="http://mainline.com/repo">http://mainline.com/repo</a> branch <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>: