mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Added comments links to email preview in email settings
Refs https://github.com/TryGhost/Team/issues/2714
This commit is contained in:
Sanne de Vries
parent
f6ed086735
commit
4c946f5145
10 changed files with 186 additions and 11 deletions
|
|
@ -57,7 +57,11 @@
|
|||
data-test-button="save-newsletter"
|
||||
/>
|
||||
</div>
|
||||
<Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
|
||||
{{#if (feature 'makingItRain')}}
|
||||
<Modals::Newsletters::Edit::PreviewLabs @newsletter={{@data.newsletter}} />
|
||||
{{else}}
|
||||
<Modals::Newsletters::Edit::Preview @newsletter={{@data.newsletter}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
<div class="gh-members-emailpreview gh-members-emailpreview-labs">
|
||||
<div class="gh-members-emailpreview-container">
|
||||
<div class="gh-members-emailpreview-faux">
|
||||
<p>
|
||||
<span class="strong">{{or @newsletter.senderName this.settings.title}}</span> <{{full-email-address (or @newsletter.senderEmail "noreply")}}>
|
||||
</p>
|
||||
<p><span class="dark">To:</span> Jamie Larson <jamie@example.com></p>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-contents">
|
||||
{{#if @newsletter.headerImage}}
|
||||
<div class="gh-members-emailpreview-header-image">
|
||||
<img src={{@newsletter.headerImage}} alt="" role="presentation">
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if this.showHeader}}
|
||||
<div class={{if this.showHeaderTitle "gh-members-emailpreview-header bordered" "gh-members-emailpreview-header"}}>
|
||||
{{#if (and this.settings.icon @newsletter.showHeaderIcon)}}
|
||||
<img src={{this.settings.icon}} alt="" role="presentation" />
|
||||
{{/if}}
|
||||
{{#if this.headerTitle}}
|
||||
<h4>{{this.headerTitle}}</h4>
|
||||
{{/if}}
|
||||
{{#if this.headerSubtitle}}
|
||||
<h5>{{this.headerSubtitle}}</h5>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-title {{if (eq @newsletter.titleAlignment "left") "gh-members-emailpreview-title-left"}}">
|
||||
<h2 class="{{if (eq @newsletter.titleFontCategory "serif") "serif"}}">Your email newsletter</h2>
|
||||
<div>
|
||||
<p>By {{or this.session.user.name this.session.user.email}} on {{moment-format (moment-site-tz) "D MMM YYYY"}}</p>
|
||||
<a href="javascript:">{{svg-jar "arrow-top-right"}} View online</a> <a href="javascript:"> {{svg-jar "comments"}} Comments</a>
|
||||
</div>
|
||||
</div>
|
||||
{{#if @newsletter.showFeatureImage}}
|
||||
<div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
|
||||
<div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
|
||||
{{/if}}
|
||||
<div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}}">
|
||||
<p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
|
||||
<p>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
|
||||
<p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
|
||||
</div>
|
||||
|
||||
{{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
|
||||
<div class="gh-members-emailpreview-feedback gh-members-emailpreview-content">
|
||||
|
||||
<div class="gh-members-emailpreview-feedback-buttons-group">
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="More like this"
|
||||
@icon="thumbs-up" />
|
||||
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="Less like this"
|
||||
@icon="thumbs-down" />
|
||||
|
||||
<Modals::Newsletters::Components::FeedbackButton
|
||||
@text="Comments"
|
||||
@icon="comments" />
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-members-emailpreview-footer">
|
||||
<div class="gh-members-emailpreview-footercontent">
|
||||
{{html-safe @newsletter.footerContent}}
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-footersite">
|
||||
<span>{{this.settings.title}} © {{moment-format (moment-site-tz) "YYYY"}} – </span> <a href="javascript:">Unsubscribe</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-members-emailpreview-badge {{unless @newsletter.showBadge "hide"}}">
|
||||
<a href="javascript:"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM11.8326 2.33879C6.37785 2.95189 3.95901 5.20797 3.41126 9.74699C3.34896 10.2632 3.22642 10.7805 3.10443 11.2954C2.93277 12.02 2.76221 12.74 2.76221 13.4458C2.76221 17.9885 6.5856 21.556 11.1283 21.556C12.8959 21.556 14.4433 20.8144 15.8756 20.048C19.0536 18.3478 22.0328 16.2597 22.0328 12.5411C22.0328 9.91512 20.1051 7.56932 18.466 5.5747C18.3834 5.47416 18.3015 5.37451 18.2206 5.27577C17.3866 4.25742 14.4333 2.04643 11.8326 2.33879Z" fill="black"/>
|
||||
</svg> <span>Powered by Ghost</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class EditNewsletterPreview extends Component {
|
||||
@service ghostPaths;
|
||||
@service session;
|
||||
@service settings;
|
||||
|
||||
get showHeader() {
|
||||
return (this.args.newsletter.showHeaderIcon && this.settings.icon)
|
||||
|| this.headerTitle;
|
||||
}
|
||||
|
||||
get showHeaderTitle() {
|
||||
return this.headerTitle || this.headerSubtitle;
|
||||
}
|
||||
|
||||
get headerTitle() {
|
||||
if (this.args.newsletter.showHeaderTitle) {
|
||||
return this.settings.title;
|
||||
} else if (this.args.newsletter.showHeaderName) {
|
||||
return this.args.newsletter.name;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get headerSubtitle() {
|
||||
if (this.args.newsletter.showHeaderTitle && this.args.newsletter.showHeaderName) {
|
||||
return this.args.newsletter.name;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get featureImageUrl() {
|
||||
// keep path separate so asset rewriting correctly picks it up
|
||||
const imagePath = '/img/user-cover.png';
|
||||
const fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath;
|
||||
return fullPath;
|
||||
}
|
||||
|
||||
get featureImageStyle() {
|
||||
return htmlSafe(`background-image: url(${this.featureImageUrl})`);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="modal-fullsettings-preview-container-labs gh-members-emailpreview">
|
||||
<div class="gh-members-emailpreview">
|
||||
<div class="gh-members-emailpreview-container">
|
||||
<div class="gh-members-emailpreview-faux">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -728,13 +728,6 @@
|
|||
padding: 2.4rem;
|
||||
}
|
||||
|
||||
.modal-fullsettings-preview-container-labs {
|
||||
overflow: hidden;
|
||||
background: var(--white);
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.modal-fullsettings-bottom {
|
||||
position: sticky;
|
||||
-webkit-position: sticky;
|
||||
|
|
|
|||
|
|
@ -1900,7 +1900,11 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
.gh-members-emailpreview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--white);
|
||||
height: 100vh;
|
||||
padding: 32px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview:after {
|
||||
|
|
@ -2040,6 +2044,10 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
color: #15212A;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-title h2 {
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-title p {
|
||||
margin: 0;
|
||||
padding: 0 0 10px;
|
||||
|
|
@ -2052,6 +2060,11 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
color: #15212A;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-title p {
|
||||
padding: 0 0 4px;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-title p span {
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
|
@ -2061,6 +2074,25 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
color: #15212A;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-title a {
|
||||
padding-right: 8px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: #15212A;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-title a svg {
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-featureimage {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
|
|
@ -2188,6 +2220,11 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
padding: 40px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback-title {
|
||||
text-align: center;
|
||||
color: #15212a;
|
||||
|
|
@ -2208,11 +2245,20 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button {
|
||||
border: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button svg {
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.gh-members-emailpreview-feedback-button-body {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
3
ghost/admin/public/assets/icons/arrow-top-right.svg
Normal file
3
ghost/admin/public/assets/icons/arrow-top-right.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.25 19.66 20.16 3.75m0 15v-15h-15"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 217 B |
3
ghost/admin/public/assets/icons/comments.svg
Normal file
3
ghost/admin/public/assets/icons/comments.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.658 2a9.307 9.307 0 0 0-8.15 4.788 9.326 9.326 0 0 0 .23 9.456L2 22l5.75-2.74a9.32 9.32 0 0 0 13.894-5.372 9.341 9.341 0 0 0-1.532-8.185A9.328 9.328 0 0 0 12.658 2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 331 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M20.237 7.97c-.322-.166-.645-.33-.97-.493-5.972-3.019-5.68-2.43-10.794-2.43-2.135 0-3.22 1.389-3.851 3.423v.014l-1.552 5.18v.01a1.621 1.621 0 0 0 1.557 2.091h3.99a1.643 1.643 0 0 1 1.29.631 1.61 1.61 0 0 1 .284 1.402l-.718 2.709a1.376 1.376 0 0 0 .77 1.612 1.398 1.398 0 0 0 1.717-.463l3.979-6.117a1.642 1.642 0 0 1 1.33-.685h2.968m0 2.246V5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M20.237 7.97c-.322-.166-.645-.33-.97-.493-5.972-3.019-5.68-2.43-10.794-2.43-2.135 0-3.22 1.389-3.851 3.423v.014l-1.552 5.18v.01a1.621 1.621 0 0 0 1.557 2.091h3.99a1.643 1.643 0 0 1 1.29.631 1.61 1.61 0 0 1 .284 1.402l-.718 2.709a1.376 1.376 0 0 0 .77 1.612 1.398 1.398 0 0 0 1.717-.463l3.979-6.117a1.642 1.642 0 0 1 1.33-.685h2.968m0 2.246V5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 521 B After Width: | Height: | Size: 504 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" fill="none"><path d="M4 17.275c.323.165.646.33.97.492 5.973 3.019 5.68 2.43 10.794 2.43 2.135 0 3.221-1.389 3.852-3.423v-.013l1.552-5.18v-.01a1.622 1.622 0 0 0-1.557-2.092H15.62a1.643 1.643 0 0 1-1.29-.63 1.61 1.61 0 0 1-.283-1.403l.717-2.708a1.377 1.377 0 0 0-.769-1.613 1.397 1.397 0 0 0-1.717.463l-3.98 6.117a1.643 1.643 0 0 1-1.33.685H4.001M4 8.748v11.496" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" fill="none"><path d="M4 17.275c.323.165.646.33.97.492 5.973 3.019 5.68 2.43 10.794 2.43 2.135 0 3.221-1.389 3.852-3.423v-.013l1.552-5.18v-.01a1.622 1.622 0 0 0-1.557-2.092H15.62a1.643 1.643 0 0 1-1.29-.63 1.61 1.61 0 0 1-.283-1.403l.717-2.708a1.377 1.377 0 0 0-.769-1.613 1.397 1.397 0 0 0-1.717.463l-3.98 6.117a1.643 1.643 0 0 1-1.33.685H4.001M4 8.748v11.496" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 518 B After Width: | Height: | Size: 501 B |
Loading…
Add table
Reference in a new issue