mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Added email preview modal flow
This commit is contained in:
Rish
parent
049b2a4949
commit
b23288a41b
10 changed files with 158 additions and 1 deletions
|
|
@ -168,6 +168,10 @@ export default Component.extend(SettingsMenuMixin, {
|
|||
});
|
||||
},
|
||||
|
||||
toggleEmailPreview() {
|
||||
this.toggleEmailPreviewModal();
|
||||
},
|
||||
|
||||
/**
|
||||
* triggered by user manually changing slug
|
||||
*/
|
||||
|
|
|
|||
44
ghost/admin/app/components/modal-post-email-preview.js
Normal file
44
ghost/admin/app/components/modal-post-email-preview.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import ModalComponent from 'ghost-admin/components/modal-base';
|
||||
import {action} from '@ember/object';
|
||||
import {alias} from '@ember/object/computed';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default ModalComponent.extend({
|
||||
ghostPaths: service(),
|
||||
ajax: service(),
|
||||
type: 'desktop',
|
||||
previewHtml: '',
|
||||
post: alias('model'),
|
||||
|
||||
actions: {
|
||||
changeType(type) {
|
||||
this.set('type', type);
|
||||
}
|
||||
},
|
||||
|
||||
renderEmailPreview: action(async function renderEmailPreview() {
|
||||
try {
|
||||
const resourceId = this.post.id;
|
||||
const url = this.get('ghostPaths.url').api('/email_preview/posts', resourceId);
|
||||
let htmlData = this.get('previewHtml');
|
||||
if (!htmlData) {
|
||||
const response = await this.ajax.request(`${url}`);
|
||||
let [emailPreview] = response.email_previews;
|
||||
htmlData = emailPreview.html;
|
||||
}
|
||||
|
||||
let iframe = this.element.querySelector('iframe');
|
||||
if (iframe) {
|
||||
iframe.contentWindow.document.open();
|
||||
iframe.contentWindow.document.write(htmlData);
|
||||
iframe.contentWindow.document.close();
|
||||
}
|
||||
this.set('previewHtml', htmlData);
|
||||
} catch (error) {
|
||||
// re-throw if we don't have a validation error
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
@ -97,6 +97,7 @@ export default Controller.extend({
|
|||
showDeletePostModal: false,
|
||||
showLeaveEditorModal: false,
|
||||
showReAuthenticateModal: false,
|
||||
showEmailPreviewModal: false,
|
||||
|
||||
// koenig related properties
|
||||
wordcount: null,
|
||||
|
|
@ -246,6 +247,10 @@ export default Controller.extend({
|
|||
}
|
||||
},
|
||||
|
||||
toggleEmailPreviewModal() {
|
||||
this.toggleProperty('showEmailPreviewModal');
|
||||
},
|
||||
|
||||
toggleReAuthenticateModal() {
|
||||
this.toggleProperty('showReAuthenticateModal');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
@import "layouts/packages.css";
|
||||
@import "layouts/labs.css";
|
||||
@import "layouts/whats-new.css";
|
||||
@import "layouts/preview-email.css";
|
||||
|
||||
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
@import "layouts/packages.css";
|
||||
@import "layouts/labs.css";
|
||||
@import "layouts/whats-new.css";
|
||||
@import "layouts/preview-email.css";
|
||||
|
||||
|
||||
/* ---------------------------✈️----------------------------- */
|
||||
|
|
|
|||
|
|
@ -60,6 +60,11 @@
|
|||
max-width: 550px;
|
||||
}
|
||||
|
||||
.fullscreen-modal-full-overlay {
|
||||
width: 100%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.fullscreen-modal-action {
|
||||
margin: 6vw 0;
|
||||
}
|
||||
|
|
|
|||
38
ghost/admin/app/styles/layouts/preview-email.css
Normal file
38
ghost/admin/app/styles/layouts/preview-email.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.modal-preview-email-content {
|
||||
height: calc(100vh - 170px);
|
||||
}
|
||||
|
||||
.gh-pe-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -32px -32px 0;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
overflow: hidden;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background: var(--midgrey);
|
||||
background: linear-gradient(135deg, color-mod(var(--midgrey) h(-10) s(+5%) l(-10%)) 0%, #738a94 100%);
|
||||
padding: 18px 32px 12px;
|
||||
}
|
||||
|
||||
.gh-pe-header .background-img {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gh-pe-header h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: #FFF;
|
||||
margin: 0 8px 4px;
|
||||
}
|
||||
|
||||
.gh-pe-content {
|
||||
margin: 0px -32px;
|
||||
max-height: calc(100vh - 170px);
|
||||
}
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
<div class="settings-menu-content">
|
||||
<form {{action "discardEnter" on="submit"}}>
|
||||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="emailSubject"}}
|
||||
<label for="og-title">Email Subject</label>
|
||||
<label for="og-title">Subject</label>
|
||||
{{gh-text-input
|
||||
class="post-setting-email-subject"
|
||||
id="email-subject"
|
||||
|
|
@ -337,6 +337,31 @@
|
|||
data-test-field="email-subject"}}
|
||||
{{gh-error-message errors=post.errors property="emailSubject" data-test-error="email-subject"}}
|
||||
{{/gh-form-group}}
|
||||
<div class="form-group">
|
||||
<label>Test and Preview</label>
|
||||
<div class="gh-twitter-preview">
|
||||
{{#if twitterImage}}
|
||||
<div class="gh-twitter-preview-image" style={{background-image-style twitterImage}}></div>
|
||||
{{/if}}
|
||||
<div class="gh-twitter-preview-content">
|
||||
<div class="gh-twitter-preview-title">{{twitterTitle}}</div>
|
||||
<div class="gh-twitter-preview-description">{{truncate twitterDescription 155}}</div>
|
||||
<div class="gh-twitter-preview-footer">
|
||||
<div class="gh-twitter-preview-footer-left">
|
||||
{{config.blogDomain}}
|
||||
</div>
|
||||
<div class="gh-twitter-preview-footer-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="gh-btn gh-btn-icon"
|
||||
onclick={{action "toggleEmailPreview"}} data-test-button="toggle-email-preview">
|
||||
<span>
|
||||
Preview email in browser
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<header class="modal-header gh-pe-header" data-test-modal="preview-email" style="display:flex">
|
||||
<img style="width:20px" src="assets/img/mailchimp.svg" />
|
||||
<h2>Email Preview</h2>
|
||||
<div class="gh-contentfilter gh-btn-group" style="display:flex;flex-grow:1;justify-content:center">
|
||||
<button class="gh-btn {{if (eq type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
|
||||
<button class="gh-btn {{if (eq type "mobile") "gh-btn-group-selected"}}" {{action "changeType" "mobile"}}><span>Mobile</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<button class="close gh-wn-close" href="" title="Close" {{on "click" this.closeModal}}>
|
||||
{{svg-jar "close"}}
|
||||
</button>
|
||||
{{#if (eq type "mobile")}}
|
||||
<div class="modal-body gh-pe-content modal-preview-email-content" style="display: flex;justify-content: center;padding-top: 12px;">
|
||||
<div style="width: 350px;border: 1px solid black;border-radius: 16px;display: flex;">
|
||||
<div style="margin: 12px;border: 1px solid black;border-radius: 16px;flex-grow:1">
|
||||
<iframe class="bn" style="height:100%;width:320px;overflow-x:hidden;padding:6px" {{did-insert this.renderEmailPreview}}></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if (eq type "desktop")}}
|
||||
<div class="modal-body gh-pe-content modal-preview-email-content">
|
||||
<iframe class="bn miw-100" style="height:100%;" {{did-insert this.renderEmailPreview}}></iframe>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -118,10 +118,18 @@
|
|||
modifier="action wide"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showEmailPreviewModal}}
|
||||
{{gh-fullscreen-modal "post-email-preview"
|
||||
model=post
|
||||
close=(action "toggleEmailPreviewModal")
|
||||
modifier="full-overlay"}}
|
||||
{{/if}}
|
||||
|
||||
{{#liquid-wormhole}}
|
||||
{{gh-post-settings-menu
|
||||
post=post
|
||||
showSettingsMenu=ui.showSettingsMenu
|
||||
toggleEmailPreviewModal=(action "toggleEmailPreviewModal")
|
||||
deletePost=(action "toggleDeletePostModal")
|
||||
updateSlug=updateSlug
|
||||
savePost=savePost
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue