Display preview modes switches

[MAILPOET-2602]
This commit is contained in:
Pavel Dohnal
2020-02-11 09:23:06 +01:00
committed by Jack Kitterhing
parent bf9ddc10cb
commit e534997d48
6 changed files with 87 additions and 59 deletions

View File

@@ -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);
}

View File

@@ -3,5 +3,4 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }

View File

@@ -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);
} }

View File

@@ -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>
); );
} }

View File

@@ -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>
); );
}; };

View File

@@ -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 %>