Display preview modes switches
[MAILPOET-2602]
This commit is contained in:
committed by
Jack Kitterhing
parent
bf9ddc10cb
commit
e534997d48
@@ -109,3 +109,50 @@ p.sender_email_address_warning:first-child {
|
|||||||
height: 46px;
|
height: 46px;
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_toggle {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
height: 30px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_toggle > label {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_container {
|
||||||
|
border: 1px solid #979797;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 20px;
|
||||||
|
transition: width .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_container_desktop {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_container_mobile {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_border {
|
||||||
|
border: 1px solid #c3c3c3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mailpoet_browser_preview_iframe {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: calc(100% - 1px);
|
||||||
|
}
|
||||||
|
@@ -3,5 +3,4 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@@ -162,50 +162,7 @@ $widget-icon-width: 30px;
|
|||||||
top: -25px;
|
top: -25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mailpoet_browser_preview_toggle {
|
.mailpoet_popup .mailpoet_browser_preview_toggle {
|
||||||
flex: 0 1 auto;
|
position: absolute;
|
||||||
height: 30px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
text-align: center;
|
|
||||||
top: -30px;
|
top: -30px;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet_browser_preview_toggle > label {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet_browser_preview_container {
|
|
||||||
border: 1px solid #979797;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
margin: auto;
|
|
||||||
padding: 20px;
|
|
||||||
transition: width .5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet_browser_preview_container_desktop {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet_browser_preview_container_mobile {
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet_browser_preview_border {
|
|
||||||
border: 1px solid #c3c3c3;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mailpoet_browser_preview_iframe {
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
width: calc(100% - 1px);
|
|
||||||
}
|
}
|
||||||
|
@@ -1,14 +1,37 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import MailPoet from 'mailpoet';
|
||||||
|
|
||||||
function Preview({
|
function Preview({
|
||||||
children,
|
children,
|
||||||
}) {
|
}) {
|
||||||
|
const [checked, setChecked] = useState('desktop');
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="mailpoet_browser_preview">
|
||||||
|
<div className="mailpoet_browser_preview_toggle">
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="mailpoet_browser_preview_type"
|
||||||
|
className="mailpoet_browser_preview_type"
|
||||||
|
checked={checked === 'desktop'}
|
||||||
|
onChange={() => setChecked('desktop')}
|
||||||
|
/>
|
||||||
|
{MailPoet.I18n.t('formPreviewDesktop')}
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="mailpoet_browser_preview_type"
|
||||||
|
className="mailpoet_browser_preview_type"
|
||||||
|
checked={checked !== 'desktop'}
|
||||||
|
onChange={() => setChecked('mobile')}
|
||||||
|
/>
|
||||||
|
{MailPoet.I18n.t('formPreviewMobile')}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
{children}
|
{children}
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -56,13 +56,13 @@ const FormPreview = () => {
|
|||||||
title={MailPoet.I18n.t('formPreview')}
|
title={MailPoet.I18n.t('formPreview')}
|
||||||
onRequestClose={onClose}
|
onRequestClose={onClose}
|
||||||
>
|
>
|
||||||
<Preview>
|
|
||||||
{form === null && (
|
{form === null && (
|
||||||
<div className="mailpoet_spinner_wrapper">
|
<div className="mailpoet_spinner_wrapper">
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{form !== null && (
|
{form !== null && (
|
||||||
|
<Preview>
|
||||||
<div>
|
<div>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
{'.mailpoet_hp_email_label { display: none }' }
|
{'.mailpoet_hp_email_label { display: none }' }
|
||||||
@@ -74,8 +74,8 @@ const FormPreview = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div dangerouslySetInnerHTML={{ __html: form.html }} />
|
<div dangerouslySetInnerHTML={{ __html: form.html }} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</Preview>
|
</Preview>
|
||||||
|
)}
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@@ -115,6 +115,8 @@
|
|||||||
'successMessage': __('This is what the success message looks like.'),
|
'successMessage': __('This is what the success message looks like.'),
|
||||||
'errorMessage': __('This is what the error message looks like.'),
|
'errorMessage': __('This is what the error message looks like.'),
|
||||||
'formPreview': __('Form Preview'),
|
'formPreview': __('Form Preview'),
|
||||||
|
'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
|
||||||
|
'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'),
|
||||||
'giveFeedback': __('Give feedback.'),
|
'giveFeedback': __('Give feedback.'),
|
||||||
}) %>
|
}) %>
|
||||||
<% endblock %>
|
<% endblock %>
|
||||||
|
Reference in New Issue
Block a user