Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Display preview border

Browse Source 
[MAILPOET-2602]
This commit is contained in:
Pavel Dohnal
2020-02-11 10:37:04 +01:00
committed by Jack Kitterhing
parent e534997d48
commit 8cf8c6004c
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/src/components/_common.scss
View File

@@ -148,6 +148,7 @@ p.sender_email_address_warning:first-child {
border: 1px solid #c3c3c3; border: 1px solid #c3c3c3;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding: 30px;
width: 100%; width: 100%;
} }

15
assets/js/src/common/preview.jsx
View File

@@ -1,11 +1,14 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import classnames from 'classnames';
function Preview({ function Preview({
children, children,
}) { }) {
const [checked, setChecked] = useState('desktop'); const [checked, setChecked] = useState('desktop');
return ( return (
<div className="mailpoet_browser_preview"> <div className="mailpoet_browser_preview">
<div className="mailpoet_browser_preview_toggle"> <div className="mailpoet_browser_preview_toggle">
@@ -30,7 +33,17 @@ function Preview({
{MailPoet.I18n.t('formPreviewMobile')} {MailPoet.I18n.t('formPreviewMobile')}
</label> </label>
</div> </div>
{children} <div
className={classnames(
'mailpoet_browser_preview_container',
{ mailpoet_browser_preview_container_mobile: checked !== 'desktop' },
{ mailpoet_browser_preview_container_desktop: checked === 'desktop' },
)}
>
<div className="mailpoet_browser_preview_border">
{children}
</div>
</div>
</div> </div>
); );
} }