Add new tab link to newsletter preview

[MAILPOET-2430]
This commit is contained in:
Jan Jakeš
2020-02-04 10:39:18 +01:00
committed by Jack Kitterhing
parent d41eca48b2
commit 2f59ab4c50
4 changed files with 19 additions and 4 deletions

View File

@ -157,11 +157,15 @@ $widget-icon-width: 30px;
width: 100%; width: 100%;
} }
.mailpoet_browser_preview_link {
position: absolute;
top: -25px;
}
.mailpoet_browser_preview_toggle { .mailpoet_browser_preview_toggle {
flex: 0 1 auto; flex: 0 1 auto;
height: 30px; height: 30px;
padding: 10px 0; padding-bottom: 10px;
position: absolute;
text-align: center; text-align: center;
top: -30px; top: -30px;
width: 100%; width: 100%;
@ -180,7 +184,7 @@ $widget-icon-width: 30px;
flex: 1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
margin: 15px auto 0; margin: auto;
padding: 20px; padding: 20px;
transition: width .5s; transition: width .5s;
} }

View File

@ -280,6 +280,7 @@ Module.SidebarPreviewView = Marionette.View.extend({
this.previewView = new Module.NewsletterPreviewView({ this.previewView = new Module.NewsletterPreviewView({
previewType: window.localStorage.getItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey')), previewType: window.localStorage.getItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey')),
previewUrl: response.meta.preview_url, previewUrl: response.meta.preview_url,
publicPreviewUrl: response.meta.public_preview_url,
}); });
this.previewView.render(); this.previewView.render();
@ -401,6 +402,7 @@ Module.NewsletterPreviewView = Marionette.View.extend({
initialize: function (options) { initialize: function (options) {
this.previewType = options.previewType; this.previewType = options.previewType;
this.previewUrl = options.previewUrl; this.previewUrl = options.previewUrl;
this.publicPreviewUrl = options.publicPreviewUrl;
this.width = '100%'; this.width = '100%';
this.height = '100%'; this.height = '100%';
// this.width = App.getConfig().get('newsletterPreview.width'); // this.width = App.getConfig().get('newsletterPreview.width');
@ -410,6 +412,7 @@ Module.NewsletterPreviewView = Marionette.View.extend({
return { return {
previewType: this.previewType, previewType: this.previewType,
previewUrl: this.previewUrl, previewUrl: this.previewUrl,
publicPreviewUrl: this.publicPreviewUrl,
width: this.width, width: this.width,
height: this.height, height: this.height,
}; };

View File

@ -446,14 +446,19 @@ class Newsletters extends APIEndpoint {
$newsletter, $newsletter,
$subscriber $subscriber
); );
$publicPreviewUrl = NewsletterUrl::getViewInBrowserUrl($newsletter);
// strip protocol to avoid mix content error // strip protocol to avoid mix content error
$previewUrl = preg_replace('{^https?:}i', '', $previewUrl); $previewUrl = preg_replace('{^https?:}i', '', $previewUrl);
$publicPreviewUrl = preg_replace('{^https?:}i', '', $publicPreviewUrl);
$newsletter = Newsletter::findOne($newsletter->id); $newsletter = Newsletter::findOne($newsletter->id);
if(!$newsletter instanceof Newsletter) return $this->errorResponse(); if(!$newsletter instanceof Newsletter) return $this->errorResponse();
return $this->successResponse( return $this->successResponse(
$newsletter->asArray(), $newsletter->asArray(),
['preview_url' => $previewUrl] [
'preview_url' => $previewUrl,
'public_preview_url' => $publicPreviewUrl,
]
); );
} else { } else {
return $this->errorResponse([ return $this->errorResponse([

View File

@ -1,3 +1,6 @@
<div class="mailpoet_browser_preview_link">
<a href="{{ publicPreviewUrl }}" target="_blank" rel="noopener noreferrer"><%= _x('Open in new tab', 'Open email preview in new tab') %></a>
</div>
<div class="mailpoet_browser_preview_toggle"> <div class="mailpoet_browser_preview_toggle">
<label> <label>
<input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="desktop" {{#ifCond previewType '!=' 'mobile'}}CHECKED{{/ifCond}} /><%= _x('Desktop', 'Desktop browser preview mode') %> <input type="radio" name="mailpoet_browser_preview_type" class="mailpoet_browser_preview_type" value="desktop" {{#ifCond previewType '!=' 'mobile'}}CHECKED{{/ifCond}} /><%= _x('Desktop', 'Desktop browser preview mode') %>