fix: broken 50% border radius on emails, failing tests

v1.18.x
Julian Lam 6 years ago
parent 3f945c2b12
commit d3a10628e7

@ -205,14 +205,14 @@
function renderDigestAvatar(block) { function renderDigestAvatar(block) {
if (block.teaser) { if (block.teaser) {
if (block.teaser.user.picture) { if (block.teaser.user.picture) {
return '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />'; return '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />';
} }
return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>'; return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>';
} }
if (block.user.picture) { if (block.user.picture) {
return '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />'; return '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />';
} }
return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>'; return '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>';
} }
function userAgentIcons(data) { function userAgentIcons(data) {

@ -204,7 +204,9 @@ Emailer.send = function (template, uid, params, callback) {
params.rtl = await translator.translate('[[language:dir]]', results.settings.userLang) === 'rtl'; params.rtl = await translator.translate('[[language:dir]]', results.settings.userLang) === 'rtl';
Emailer.sendToEmail(template, results.email, results.settings.userLang, params, function () {}); Emailer.sendToEmail(template, results.email, results.settings.userLang, params, function () {});
}, },
], callback); ], function (err) {
return callback(err);
});
}; };
Emailer.sendToEmail = function (template, email, language, params, callback) { Emailer.sendToEmail = function (template, email, language, params, callback) {

@ -27,9 +27,9 @@
<tr> <tr>
<td style="padding: 16px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; width: 32px;"> <td style="padding: 16px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; width: 32px;">
<!-- IF notifications.image --> <!-- IF notifications.image -->
<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%" src="{notifications.image}" /> <img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%" src="{notifications.image}" />
<!-- ELSE --> <!-- ELSE -->
<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: {notifications.user.icon:bgColor}; color: white; text-align: center; display: inline-block; border-radius: 50%">{notifications.user.icon:text}</div> <div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: {notifications.user.icon:bgColor}; color: white; text-align: center; display: inline-block; border-radius: 50%">{notifications.user.icon:text}</div>
<!-- ENDIF notifications.image --> <!-- ENDIF notifications.image -->
</td> </td>
<td style="padding: 16px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; line-height: 16px; color: #333333;"> <td style="padding: 16px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; line-height: 16px; color: #333333;">

@ -179,28 +179,28 @@ describe('helpers', function () {
it('should render digest avatar', function (done) { it('should render digest avatar', function (done) {
var block = { teaser: { user: { username: 'baris', picture: '/uploads/1.png' } } }; var block = { teaser: { user: { username: 'baris', picture: '/uploads/1.png' } } };
var html = helpers.renderDigestAvatar(block); var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />'); assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.teaser.user.picture + '" title="' + block.teaser.user.username + '" />');
done(); done();
}); });
it('should render digest avatar', function (done) { it('should render digest avatar', function (done) {
var block = { teaser: { user: { username: 'baris', 'icon:text': 'B', 'icon:bgColor': '#ff000' } } }; var block = { teaser: { user: { username: 'baris', 'icon:text': 'B', 'icon:bgColor': '#ff000' } } };
var html = helpers.renderDigestAvatar(block); var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>'); assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.teaser.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.teaser.user['icon:text'] + '</div>');
done(); done();
}); });
it('should render digest avatar', function (done) { it('should render digest avatar', function (done) {
var block = { user: { username: 'baris', picture: '/uploads/1.png' } }; var block = { user: { username: 'baris', picture: '/uploads/1.png' } };
var html = helpers.renderDigestAvatar(block); var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; padding-right: 8px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />'); assert.equal(html, '<img style="vertical-align: middle; width: 32px; height: 32px; border-radius: 50%;" src="' + block.user.picture + '" title="' + block.user.username + '" />');
done(); done();
}); });
it('should render digest avatar', function (done) { it('should render digest avatar', function (done) {
var block = { user: { username: 'baris', 'icon:text': 'B', 'icon:bgColor': '#ff000' } }; var block = { user: { username: 'baris', 'icon:text': 'B', 'icon:bgColor': '#ff000' } };
var html = helpers.renderDigestAvatar(block); var html = helpers.renderDigestAvatar(block);
assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; margin-right: 8px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>'); assert.equal(html, '<div style="vertical-align: middle; width: 32px; height: 32px; line-height: 32px; font-size: 16px; background-color: ' + block.user['icon:bgColor'] + '; color: white; text-align: center; display: inline-block; border-radius: 50%;">' + block.user['icon:text'] + '</div>');
done(); done();
}); });

Loading…
Cancel
Save