TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-23 10:53:34 +03:00
Code Issues Projects Releases Wiki Activity

🐛 Fixed feedback buttons for dark mode (#16091)

Browse Source 
refs TryGhost/Team#2396
This commit is contained in:
Elena Baidakova 2023-01-09 16:40:42 +04:00 committed by GitHub
parent dd93422f28
commit 5b5f4cdd3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 22 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/app/components/modals/newsletters/components/feedback-button.hbs
View File

@ -1,5 +1,5 @@
<button class="gh-members-emailpreview-feedback-button" style={{html-safe (concat "background: " @color "10")}} type="button">
<span class="gh-members-emailpreview-feedback-button-body" style={{html-safe (concat "color: " @color)}}>
<button class="gh-members-emailpreview-feedback-button" type="button">
<span class="gh-members-emailpreview-feedback-button-body">
{{svg-jar @icon class="gh-members-emailpreview-feedback-button-icon"}}
<span>{{@text}}</span>
</span>

2
ghost/admin/app/components/modals/newsletters/edit/preview.hbs
View File

@ -48,12 +48,10 @@
<div class="gh-members-emailpreview-feedback-buttons-group">
<Modals::Newsletters::Components::FeedbackButton
@text="More like this"
@color={{this.accentColor}}
@icon="thumbs-up" />
<Modals::Newsletters::Components::FeedbackButton
@text="Less like this"
@color={{this.accentColor}}
@icon="thumbs-down" />
</div>
</div>

4
ghost/admin/app/components/modals/newsletters/edit/preview.js
View File

@ -44,8 +44,4 @@ export default class EditNewsletterPreview extends Component {
get featureImageStyle() {
return htmlSafe(`background-image: url(${this.featureImageUrl})`);
}
get accentColor() {
return this.settings.accentColor;
}
}

5
ghost/admin/app/styles/layouts/members.css
View File

@ -2200,8 +2200,10 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-members-emailpreview-feedback-button {
background: #fff;
font-weight: bold;
border-radius: 22px;
border: 1px solid #e5eff5;
pointer-events: none;
cursor: default;
}
@ -2215,8 +2217,7 @@ p.gh-members-import-errordetail:first-of-type {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
filter: brightness(0.4);
padding: 7px 18px;
}
/* Custom tier member details */

112
ghost/core/core/server/services/mega/feedback-buttons.js
View File

@ -1,4 +1,3 @@
const {Color} = require('@tryghost/color-utils');
const audienceFeedback = require('../audience-feedback');
const templateStrings = {
@ -24,20 +23,16 @@ const generateLinks = (postId, uuid, html) => {
return html;
};
const getTemplate = (accentColor) => {
const getTemplate = () => {
const likeButtonHtml = getButtonHtml(
templateStrings.like,
'More like this',
accentColor,
'like-icon',
'https://static.ghost.org/v5.0.0/images/thumbs-up.png'
'https://static.ghost.org/v5.0.0/images/more-like-this.png'
);
const dislikeButtonHtml = getButtonHtml(
templateStrings.dislike,
'Less like this',
accentColor,
'dislike-icon',
'https://static.ghost.org/v5.0.0/images/thumbs-down.png'
'https://static.ghost.org/v5.0.0/images/less-like-this.png'
);
return (`
@ -55,106 +50,17 @@ const getTemplate = (accentColor) => {
`);
};
function getButtonHtml(href, buttonText, accentColor, className, iconUrl) {
const bgColor = getButtonLightTheme(accentColor).backgroundColor;
const textColor = getButtonLightTheme(accentColor).color;
const buttonAttr = {
width: 100,
height: 38,
iconWidth: 24
};
// Sizes defined in pixels won’t be adjusted when Outlook is rendering at 120 dpi.
// To solve the problem we use values in points (1 pixel = 0.75 point).
// resource: https://www.hteumeuleu.com/2021/background-properties-in-vml/
const buttonAttrOutlook = {
width: (buttonAttr.width + buttonAttr.iconWidth) * 0.75,
height: buttonAttr.height * 0.75 + 1,
iconWidth: buttonAttr.iconWidth * 0.75
};
function getButtonHtml(href, buttonText, iconUrl) {
return (`
<td dir="ltr" valign="top" align="center" style="vertical-align: top; color: ${textColor}; font-family: inherit; font-size: 14px; text-align: center; padding: 0 8px;" nowrap>
<table class="feedback-buttons" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="background-color: ${bgColor}; overflow: hidden; border-radius: 22px;border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td width="16" height="${buttonAttr.height}"></td>
<td class=${className} background=${iconUrl} bgcolor="${textColor}" width="${buttonAttr.iconWidth}" height="${buttonAttr.height}" valign="top" style="background-image: url(${iconUrl});vertical-align: middle; text-align: center;background-size: cover; background-position: 0 50%; background-repeat:no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:${buttonAttrOutlook.iconWidth}pt;height:${buttonAttrOutlook.height}pt;">
<v:fill origin="0.5, 0.5" position="0.5, 0.5" type="tile" src=${iconUrl} color="${textColor}" size="1,1" aspect="atleast" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<a style="background-color: ${bgColor};border: none; width: ${buttonAttr.iconWidth}px; height: ${buttonAttr.height}px; display: block" href=${href} target="_blank"></a>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td style="text-align: right;font-size: 18px; vertical-align: middle; color: ${textColor}!important; background-position: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
<div style="color: ${textColor}"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href=${href} style="height:${buttonAttrOutlook.height}pt;v-text-anchor:middle;width:${buttonAttrOutlook.width}pt;" stroke="f">
<w:anchorlock/>
<center>
<![endif]-->
<a
href=${href}
target="_blank"
style="padding: 0 8px 0 8px;border-radius: 0 22px 22px 0;color:${textColor}!important;display:inline-block;font-family: inherit;font-size:14px;font-weight:bold;line-height:38px;text-align:left;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">
${buttonText}</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]--></div>
</td>
</tr>
</table>
<td dir="ltr" valign="top" align="center" style="vertical-align: top; font-family: inherit; font-size: 14px; text-align: center; padding: 0 8px;" nowrap>
<a href="${href}" target="_blank">
<img src="${iconUrl}" border="0" width="156" height="38" alt="${buttonText}">
</a>
</td>
`);
}
function getButtonLightTheme(accentColor) {
const color = new Color(accentColor);
const backgroundColor = `${accentColor}10`;
const textColor = color.darken(0.6).hex();
return {
color: textColor,
backgroundColor
};
}
/**
* @deprecated
* PLEASE MAKE IDENTICAL CHANGES TO email-service package email-templates/styles.hbs
*/
function getButtonsHeadStyles() {
// DEPRECATED!
// PLEASE MAKE IDENTICAL CHANGES TO email-service package email-templates/styles.hbs
return (`
.like-icon {
mix-blend-mode: darken;
}
.dislike-icon {
mix-blend-mode: darken;
}
@media (prefers-color-scheme: dark) {
.like-icon {
mix-blend-mode: initial !important;
}
.dislike-icon {
mix-blend-mode: initial !important;
}
}
`);
}
module.exports = {
generateLinks,
getTemplate,
getButtonsHeadStyles
getTemplate
};

4
ghost/core/core/server/services/mega/template.js
View File

@ -1174,8 +1174,6 @@ ${ templateSettings.showBadge ? `
}
` : ''}
${iff(templateSettings.feedbackEnabled, feedbackButtons.getButtonsHeadStyles(templateSettings.accentColor), '')}
</style>
</head>
@ -1281,7 +1279,7 @@ ${iff(templateSettings.feedbackEnabled, feedbackButtons.getButtonsHeadStyles(tem
<!-- END MAIN CONTENT AREA -->
${iff(templateSettings.feedbackEnabled, feedbackButtons.getTemplate(templateSettings.accentColor), '')}
${iff(templateSettings.feedbackEnabled, feedbackButtons.getTemplate(), '')}
<tr>
<td class="wrapper" align="center">

22
ghost/email-service/lib/email-renderer.js
View File

@ -503,10 +503,6 @@ class EmailRenderer {
const adjustedAccentColor = accentColor && darkenToContrastThreshold(accentColor, '#ffffff', 2).hex();
const adjustedAccentContrastColor = accentColor && textColorForBackgroundColor(adjustedAccentColor).hex();
const color = new Color(accentColor);
const buttonBackgroundColor = `${accentColor}10`;
const buttonTextColor = color.darken(0.6).hex();
const {href: headerImage, width: headerImageWidth} = await this.limitImageWidth(newsletter.get('header_image'));
const {href: postFeatureImage, width: postFeatureImageWidth} = await this.limitImageWidth(post.get('feature_image'));
@ -596,23 +592,7 @@ class EmailRenderer {
// Audience feedback
feedbackButtons: newsletter.get('feedback_enabled') ? {
likeHref: positiveLink,
dislikeHref: negativeLink,
backgroundColor: buttonBackgroundColor,
textColor: buttonTextColor,
sizes: {
width: 100,
height: 38,
iconWidth: 24
},
// Sizes defined in pixels won’t be adjusted when Outlook is rendering at 120 dpi.
// To solve the problem we use values in points (1 pixel = 0.75 point).
// resource: https://www.hteumeuleu.com/2021/background-properties-in-vml/
sizesOutlook: {
width: (100 + 24) * 0.75,
height: 38 * 0.75 + 1,
iconWidth: 24 * 0.75
}
dislikeHref: negativeLink
} : null,
// Paywall

40
ghost/email-service/lib/email-templates/partials/feedback-button.hbs
View File

@ -1,37 +1,5 @@
<td dir="ltr" valign="top" align="center" style="vertical-align: top; color: {{textColor}}; font-family: inherit; font-size: 14px; text-align: center; padding: 0 8px;" nowrap>
<table class="feedback-buttons" align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="background-color: {{backgroundColor}}; overflow: hidden; border-radius: 22px;border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td width="16" height="{{sizes.height}}"></td>
<td class="{{className}}" background="{{iconUrl}}" bgcolor="{{textColor}}" width="{{sizes.iconWidth}}" height="{{sizes.height}}" valign="top" style="background-image: url({{iconUrl}});vertical-align: middle; text-align: center;background-size: cover; background-position: 0 50%; background-repeat:no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:{{sizesOutlook.iconWidth}}pt;height:{{sizesOutlook.height}}pt;">
<v:fill origin="0.5, 0.5" position="0.5, 0.5" type="tile" src={{iconUrl}} color="{{textColor}}" size="1,1" aspect="atleast" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<a style="background-color: {{backgroundColor}};border: none; width: {{sizes.iconWidth}}px; height: {{sizes.height}}px; display: block" href="{{href}}" target="_blank"></a>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<td style="text-align: right;font-size: 18px; vertical-align: middle; color: {{textColor}}!important; background-position: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
<div style="color: {{textColor}}"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{href}}" style="height:{{sizesOutlook.height}}pt;v-text-anchor:middle;width:{{sizesOutlook.width}}pt;" stroke="f">
<w:anchorlock/>
<center>
<![endif]-->
<a
href="{{href}}"
target="_blank"
style="padding: 0 8px 0 8px;border-radius: 0 22px 22px 0;color:{{textColor}}!important;display:inline-block;font-family: inherit;font-size:14px;font-weight:bold;line-height:38px;text-align:left;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">
{{buttonText}}</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]--></div>
</td>
</tr>
</table>
<td dir="ltr" valign="top" align="center" style="vertical-align: top; font-family: inherit; font-size: 14px; text-align: center; padding: 0 8px;" nowrap>
<a href="{{href}}" target="_blank">
<img src={{iconUrl}} border="0" width="156" height="38" alt="{{buttonText}}">
</a>
</td>

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

@ -1123,24 +1123,4 @@ a[data-flickr-embed] img {
height: 30px;
}
{{/if}}
{{#if feedbackButtons}}
.like-icon {
mix-blend-mode: darken;
}
.dislike-icon {
mix-blend-mode: darken;
}
@media (prefers-color-scheme: dark) {
.like-icon {
mix-blend-mode: initial !important;
}
.dislike-icon {
mix-blend-mode: initial !important;
}
}
{{/if}}
</style>

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

@ -132,8 +132,8 @@
<h3 style="text-align: center; margin-bottom: 22px; font-size: 17px; letter-spacing: -0.2px; margin-top: 0 !important;">Give feedback on this post</h3>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="margin: auto; width: auto !important;">
<tr>
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' className="like-icon" iconUrl="https://static.ghost.org/v5.0.0/images/thumbs-up.png" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' className="dislike-icon" iconUrl="https://static.ghost.org/v5.0.0/images/thumbs-down.png" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.likeHref buttonText='More like this' iconUrl="https://static.ghost.org/v5.0.0/images/more-like-this.png" }}
{{> feedbackButton feedbackButtons href=feedbackButtons.dislikeHref buttonText='Less like this' iconUrl="https://static.ghost.org/v5.0.0/images/less-like-this.png" }}
</tr>
</table>
</td>