OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove comment icon at the top of email template (#19771)

Browse Source 
Refs
https://linear.app/tryghost/issue/DES-80/newsletter-view-in-browser-breaking-to-next-line-with-incorrect
This commit is contained in:
Sanne de Vries 2024-02-29 14:45:38 +01:00 committed by GitHub
parent e0d8e18785
commit c7e475feb0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 10 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
View File

@ -136,13 +136,8 @@ const NewsletterPreviewContent: React.FC<{
<p className="pb-2" style={{color: secondaryTextColor}}>
By {authorPlaceholder}
<span className="before:pl-0.5 before:pr-1 before:content-['•']">{currentDate}</span>
{showCommentCta && (
<span className="before:pl-0.5 before:pr-1 before:content-['•']">
<Icon className="mt-[-2px] inline-block" colorClass="text-grey-600" name="comment" size="sm"/>
</span>
)}
</p>
<p className="pb-2" style={{color: secondaryTextColor}}><span>View in browser</span></p>
<p className="pb-2 underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
</div>
</div>
)}

80
ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap
View File

@ -127,19 +127,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -276,7 +263,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -725,7 +711,7 @@ exports[`Email Preview API Read can read post email preview with email card and
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "23765",
"content-length": "23490",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -766,19 +752,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -915,7 +888,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -1384,7 +1356,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "28576",
"content-length": "28301",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1456,19 +1428,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -1605,7 +1564,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -2061,7 +2019,7 @@ exports[`Email Preview API Read has custom content transformations for email com
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "23519",
"content-length": "23244",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -2462,19 +2420,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -2611,7 +2556,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -3081,7 +3025,7 @@ exports[`Email Preview API Read uses the newsletter provided through ?newsletter
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "24280",
"content-length": "24005",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -3508,19 +3452,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -3657,7 +3588,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -4127,7 +4057,7 @@ exports[`Email Preview API Read uses the posts newsletter by default 4: [headers
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "24280",
"content-length": "24005",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

196
ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap
View File

@ -20,19 +20,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -169,7 +156,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -638,19 +624,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -787,7 +760,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -1242,19 +1214,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -1391,7 +1350,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -1846,19 +1804,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -1995,7 +1940,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -2450,19 +2394,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -2599,7 +2530,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -3002,19 +2932,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -3151,7 +3068,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -4970,19 +4886,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -5119,7 +5022,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -5719,19 +5621,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -5868,7 +5757,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -6378,19 +6266,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -6527,7 +6402,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -7037,19 +6911,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -7186,7 +7047,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -7696,19 +7556,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -7845,7 +7692,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -8355,19 +8201,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -8504,7 +8337,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -9014,19 +8846,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -9163,7 +8982,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -9620,19 +9438,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -9769,7 +9574,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;

42
ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap
View File

@ -20,19 +20,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -169,7 +156,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -624,19 +610,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -773,7 +746,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;
@ -1228,19 +1200,6 @@ Object {
.post-title-link-left {
text-align: left;
}
.comment-link {
color: #000000;
color: rgba(0, 0, 0, 0.5);
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -1377,7 +1336,6 @@ table.body .post-meta-left.view-online-mobile .view-online {
}
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;

8
ghost/core/test/integration/services/email-service/batch-sending.test.js
View File

@ -760,7 +760,7 @@ describe('Batch sending tests', function () {
await matchEmailSnapshot();
});
it('Shows 3 comment buttons for published posts without feedback enabled', async function () {
it('Shows 2 comment buttons for published posts without feedback enabled', async function () {
mockSetting('comments_enabled', 'all');
mockSetting('email_track_clicks', false); // Disable link replacement for this test
@ -774,11 +774,11 @@ describe('Batch sending tests', function () {
});
// Currently the link is not present in plaintext version (because no text)
assert.equal(html.match(/#ghost-comments/g).length, 3, 'Every email should have 3 buttons to comments');
assert.equal(html.match(/#ghost-comments/g).length, 2, 'Every email should have 2 buttons to comments');
await matchEmailSnapshot();
});
it('Shows 3 comment buttons for published posts with feedback enabled', async function () {
it('Shows 2 comment buttons for published posts with feedback enabled', async function () {
mockSetting('comments_enabled', 'all');
mockSetting('email_track_clicks', false); // Disable link replacement for this test
@ -793,7 +793,7 @@ describe('Batch sending tests', function () {
});
// Currently the link is not present in plaintext version (because no text)
assert.equal(html.match(/#ghost-comments/g).length, 3, 'Every email should have 3 buttons to comments');
assert.equal(html.match(/#ghost-comments/g).length, 2, 'Every email should have 2 buttons to comments');
await matchEmailSnapshot();
} finally {
// undo

14
ghost/email-service/lib/email-templates/partials/styles-old.hbs
View File

@ -408,19 +408,6 @@ figure blockquote p {
white-space: nowrap;
}
.comment-link {
color: #738a94;
font-size: 13px;
letter-spacing: 0.1px;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -1366,7 +1353,6 @@ a[data-flickr-embed] img {
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;

16
ghost/email-service/lib/email-templates/partials/styles.hbs
View File

@ -440,21 +440,6 @@ figure blockquote p {
white-space: nowrap;
}
.comment-link {
color: {{textColor}};
color: {{secondaryTextColor}};
font-size: 13px;
letter-spacing: 0.1px;
text-decoration: none;
}
.comment-link img {
width: 16px;
height: 16px;
margin-bottom: 1px;
vertical-align: middle;
}
.view-online-link {
word-wrap: none;
white-space: nowrap;
@ -1443,7 +1428,6 @@ a[data-flickr-embed] img {
table.body .view-online-link,
table.body .comment-link,
table.body .footer,
table.body .footer a {
font-size: 12px !important;

5
ghost/email-service/lib/email-templates/template-old.hbs
View File

@ -85,11 +85,6 @@
<tr>
<td height="20" class="{{classes.meta}}" style="padding: 0;">
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
{{#if newsletter.showCommentCta}}
<a href="{{post.commentUrl}}" class="comment-link" valign="middle">
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
</a>
{{/if}}
</td>
<td class="{{classes.meta}} view-online desktop">
<a href="{{post.url}}" class="view-online-link">View in browser</a>

9
ghost/email-service/lib/email-templates/template.hbs
View File

@ -85,15 +85,6 @@
<tr>
<td height="20" class="{{classes.meta}}" style="padding: 0;">
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>
{{#if newsletter.showCommentCta}}
<a href="{{post.commentUrl}}" class="comment-link" valign="middle">
{{#if backgroundIsDark}}
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon-darkmode.png" border="0" width="16" height="16" alt="Comment">
{{else}}
• <img src="https://static.ghost.org/v5.0.0/images/comment-icon.png" border="0" width="16" height="16" alt="Comment">
{{/if}}
</a>
{{/if}}
</td>
<td class="{{classes.meta}} view-online desktop">
<a href="{{post.url}}" class="view-online-link">View in browser</a>