From b23288a41b61a643ed0746a8f24ad94cbcc2463a Mon Sep 17 00:00:00 2001 From: Rish Date: Tue, 5 Nov 2019 12:21:29 +0700 Subject: [PATCH] Added email preview modal flow --- .../app/components/gh-post-settings-menu.js | 4 ++ .../components/modal-post-email-preview.js | 44 +++++++++++++++++++ ghost/admin/app/controllers/editor.js | 5 +++ ghost/admin/app/styles/app-dark.css | 1 + ghost/admin/app/styles/app.css | 1 + ghost/admin/app/styles/components/modals.css | 5 +++ .../app/styles/layouts/preview-email.css | 38 ++++++++++++++++ .../components/gh-post-settings-menu.hbs | 27 +++++++++++- .../components/modal-post-email-preview.hbs | 26 +++++++++++ ghost/admin/app/templates/editor.hbs | 8 ++++ 10 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 ghost/admin/app/components/modal-post-email-preview.js create mode 100644 ghost/admin/app/styles/layouts/preview-email.css create mode 100644 ghost/admin/app/templates/components/modal-post-email-preview.hbs diff --git a/ghost/admin/app/components/gh-post-settings-menu.js b/ghost/admin/app/components/gh-post-settings-menu.js index 66c8ed54c4..a2b153df2a 100644 --- a/ghost/admin/app/components/gh-post-settings-menu.js +++ b/ghost/admin/app/components/gh-post-settings-menu.js @@ -168,6 +168,10 @@ export default Component.extend(SettingsMenuMixin, { }); }, + toggleEmailPreview() { + this.toggleEmailPreviewModal(); + }, + /** * triggered by user manually changing slug */ diff --git a/ghost/admin/app/components/modal-post-email-preview.js b/ghost/admin/app/components/modal-post-email-preview.js new file mode 100644 index 0000000000..7b36a27d9a --- /dev/null +++ b/ghost/admin/app/components/modal-post-email-preview.js @@ -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; + } + } + }) +}); diff --git a/ghost/admin/app/controllers/editor.js b/ghost/admin/app/controllers/editor.js index 0043bfac5e..1284e2e11c 100644 --- a/ghost/admin/app/controllers/editor.js +++ b/ghost/admin/app/controllers/editor.js @@ -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'); }, diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index e611936f42..7dec7b9238 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -59,6 +59,7 @@ @import "layouts/packages.css"; @import "layouts/labs.css"; @import "layouts/whats-new.css"; +@import "layouts/preview-email.css"; :root { diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css index eb08c4819b..6882fd9a2e 100644 --- a/ghost/admin/app/styles/app.css +++ b/ghost/admin/app/styles/app.css @@ -59,6 +59,7 @@ @import "layouts/packages.css"; @import "layouts/labs.css"; @import "layouts/whats-new.css"; +@import "layouts/preview-email.css"; /* ---------------------------✈️----------------------------- */ diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css index f2f5c72d8d..53410e29f1 100644 --- a/ghost/admin/app/styles/components/modals.css +++ b/ghost/admin/app/styles/components/modals.css @@ -60,6 +60,11 @@ max-width: 550px; } +.fullscreen-modal-full-overlay { + width: 100%; + max-width: 90%; +} + .fullscreen-modal-action { margin: 6vw 0; } diff --git a/ghost/admin/app/styles/layouts/preview-email.css b/ghost/admin/app/styles/layouts/preview-email.css new file mode 100644 index 0000000000..820a2ec7f9 --- /dev/null +++ b/ghost/admin/app/styles/layouts/preview-email.css @@ -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); +} \ No newline at end of file diff --git a/ghost/admin/app/templates/components/gh-post-settings-menu.hbs b/ghost/admin/app/templates/components/gh-post-settings-menu.hbs index 52c0ba8ef0..d5d8e95789 100644 --- a/ghost/admin/app/templates/components/gh-post-settings-menu.hbs +++ b/ghost/admin/app/templates/components/gh-post-settings-menu.hbs @@ -324,7 +324,7 @@
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="emailSubject"}} - + {{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}} +
+ +
+ {{#if twitterImage}} +
+ {{/if}} +
+
{{twitterTitle}}
+
{{truncate twitterDescription 155}}
+
+
+ {{config.blogDomain}} +
+
+
+
+
+
+ +
{{/if}} diff --git a/ghost/admin/app/templates/components/modal-post-email-preview.hbs b/ghost/admin/app/templates/components/modal-post-email-preview.hbs new file mode 100644 index 0000000000..0678fe9649 --- /dev/null +++ b/ghost/admin/app/templates/components/modal-post-email-preview.hbs @@ -0,0 +1,26 @@ +
+ +

Email Preview

+
+ + +
+
+ + +{{#if (eq type "mobile")}} +
+
+
+ +
+
+
+{{/if}} +{{#if (eq type "desktop")}} +
+ +
+{{/if}} \ No newline at end of file diff --git a/ghost/admin/app/templates/editor.hbs b/ghost/admin/app/templates/editor.hbs index 6e17204fcc..f40923e2d0 100644 --- a/ghost/admin/app/templates/editor.hbs +++ b/ghost/admin/app/templates/editor.hbs @@ -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