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

Change controls of preview to icons and add callback

Browse Source 
[MAILPOET-2743]
This commit is contained in:
Rostislav Wolny
2020-04-15 18:01:25 +02:00
committed by Veljko V
parent d67f7364a3
commit 49ec2ed294
4 changed files with 88 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/src/components-plugin/_browser-preview.scss
View File

@@ -11,6 +11,26 @@
margin: 0 5px;
}
.mailpoet_browser_preview_icon {
display: inline-block;
height: 24px;
margin: 0 12px;
&:focus {
box-shadow: none;
}
.mailpoet_preview_icon_fill {
fill: #e5e9f8;
}
&.mailpoet_active {
.mailpoet_preview_icon_fill {
fill: #071c6d;
}
}
}
.mailpoet_browser_preview_container {
border: 1px solid #979797;
border-radius: 20px;

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

@@ -2,36 +2,44 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import classnames from 'classnames';
import MobileIcon from './preview/mobile_icon';
import DesktopIcon from './preview/desktop_icon';
function Preview({
children,
onChange,
selectedType,
}) {
const [checked, setChecked] = useState('desktop');
const [checked, setChecked] = useState(selectedType);
const changeType = (type) => {
setChecked(type);
onChange(type);
};
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>
<a
className={classnames('mailpoet_browser_preview_icon', { mailpoet_active: checked === 'desktop' })}
onClick={(e) => {
e.preventDefault();
changeType('desktop');
}}
title={MailPoet.I18n.t('formPreviewDesktop')}
href="#"
>
<DesktopIcon />
</a>
<a
className={classnames('mailpoet_browser_preview_icon', { mailpoet_active: checked === 'mobile' })}
onClick={(e) => {
e.preventDefault();
changeType('mobile');
}}
title={MailPoet.I18n.t('formPreviewMobile')}
href="#"
>
<MobileIcon />
</a>
</div>
<div
className={classnames(
@@ -50,6 +58,13 @@ function Preview({
Preview.propTypes = {
children: PropTypes.node.isRequired,
onChange: PropTypes.func,
selectedType: PropTypes.string,
};
Preview.defaultProps = {
onChange: () => {},
selectedType: 'desktop',
};
export default Preview;

15
assets/js/src/common/preview/desktop_icon.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
export default () => (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g className="mailpoet_preview_icon_fill" transform="translate(-712.000000, -64.000000)" fillRule="nonzero">
<g transform="translate(712.000000, 64.000000)">
<g>
<path d="M13.965,20.5 C14.1138804,20.5 14.2550143,20.5663566 14.35,20.681 L14.35,20.681 L16.449,23.213 C16.5561084,23.3657981 16.5692196,23.5655248 16.4830056,23.7310137 C16.3967915,23.8965027 16.2255996,24.0002137 16.039,24 L16.039,24 L7.96,24 C7.7734004,24.0002137 7.60220849,23.8965027 7.51599443,23.7310137 C7.42978036,23.5655248 7.44289164,23.3657981 7.55,23.213 L7.55,23.213 L9.65,20.681 C9.74498572,20.5663566 9.88611956,20.5 10.035,20.5 L10.035,20.5 Z M22.5,-4.08562073e-14 C23.3284271,-4.08562073e-14 24,0.671572875 24,1.5 L24,1.5 L24,17.5 C24,18.3284271 23.3284271,19 22.5,19 L22.5,19 L1.5,19 C0.671572875,19 0,18.3284271 0,17.5 L0,17.5 L0,1.5 C0,0.671572875 0.671572875,-4.08562073e-14 1.5,-4.08562073e-14 L1.5,-4.08562073e-14 Z M21.5,2 L2.5,2 C2.22385763,2 2,2.22385763 2,2.5 L2,2.5 L2,14.5 C2,14.7761424 2.22385763,15 2.5,15 L2.5,15 L21.5,15 C21.7761424,15 22,14.7761424 22,14.5 L22,14.5 L22,2.5 C22,2.22385763 21.7761424,2 21.5,2 L21.5,2 Z" />
</g>
</g>
</g>
</g>
</svg>
);

15
assets/js/src/common/preview/mobile_icon.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react';
export default () => (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16px" height="24px" viewBox="0 0 16 24" version="1.1">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g className="mailpoet_preview_icon_fill" transform="translate(-760.000000, -64.000000)" fillRule="nonzero">
<g transform="translate(712.000000, 64.000000)">
<g transform="translate(48.000000, 0.000000)">
<path d="M16,3 C16,1.34314575 14.6568542,0 13,0 L3,0 C1.34314575,0 0,1.34314575 0,3 L0,21 C0,22.6568542 1.34314575,24 3,24 L13,24 C14.6568542,24 16,22.6568542 16,21 L16,3 Z M14,5.5 L14,17.5 C14,18.0522847 13.5522847,18.5 13,18.5 L3,18.5 C2.44771525,18.5 2,18.0522847 2,17.5 L2,5.5 C2,4.94771525 2.44771525,4.5 3,4.5 L13,4.5 C13.5522847,4.5 14,4.94771525 14,5.5 Z M7,21 C7,20.4477153 7.44771525,20 8,20 C8.55228475,20 9,20.4477153 9,21 C9,21.5522847 8.55228475,22 8,22 C7.44771525,22 7,21.5522847 7,21 Z" id="Shape" />
</g>
</g>
</g>
</g>
</svg>
);