Ghost/ghost/admin/app/components/modal-post-email-preview.hbs
Peter Zimon c46198f728 Update post email preview design (#1767)
Made post email preview design consistent with the new email settings design preview.

* changed background

* added fake container windows and faux sender/recipient content

* updated mobile and dark mode
2020-11-16 12:16:51 +01:00

42 lines
2.1 KiB
Handlebars

<header class="modal-header gh-pe-header gh-pe-header-border" data-test-modal="preview-email" style="display:flex">
<h2 class="f6 fw6">{{this.subject}}</h2>
<div class="gh-contentfilter gh-btn-group gh-pe-btn-group" style="display:flex;flex-grow:1;justify-content:center">
<button class="gh-btn {{if (eq this.type "desktop") "gh-btn-group-selected"}}" {{action "changeType" "desktop"}}><span>Desktop</span></button>
<button class="gh-btn {{if (eq this.type "mobile") "gh-btn-group-selected"}}" {{action "changeType" "mobile"}}><span>Mobile</span></button>
</div>
<div class="gh-pe-close">
<button class="close" href title="Close" {{on "click" this.closeModal}}>
{{svg-jar "close"}}
</button>
</div>
</header>
{{#if (eq this.type "mobile")}}
<div class="modal-body modal-preview-email-content gh-pe-mobile-container">
<div class="gh-pe-mobile-bezel">
<div class="gh-pe-mobile-screen">
<div class="gh-pe-emailclient-sender">
<p>
<span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
</p>
<p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
</div>
<iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
</div>
</div>
</div>
{{/if}}
{{#if (eq this.type "desktop")}}
<div class="modal-body modal-preview-email-content gh-pe-desktop-container">
<div class="gh-pe-emailclient-mockup">
<div class="gh-pe-emailclient-sender">
<p>
<span class="strong">{{this.config.blogTitle}}</span> &lt;{{this.settings.membersFromAddress}}&gt;
</p>
<p><span class="dark">To:</span> Jamie Larson &lt;jamie@example.com&gt;</p>
</div>
<iframe class="gh-pe-iframe" {{did-insert this.renderEmailPreview}} sandbox="allow-same-origin"></iframe>
</div>
</div>
{{/if}}