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

Add size settings to placement settings in preview

Browse Source 
[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
2020-05-18 15:50:59 +02:00
committed by Veljko V
parent 60d70ad453
commit 49ce4cfa1f
10 changed files with 188 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/js/src/form_editor/components/preview/below_posts_settings.tsx
View File

@ -3,6 +3,7 @@ import MailPoet from 'mailpoet';
import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data';
import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings';
const BelowPostsSettings = () => {
const formSettings = useSelect(
@ -18,6 +19,7 @@ const BelowPostsSettings = () => {
};
return (
<>
<div className="mailpoet-toggle-list">
<div className="mailpoet-toggle-list-description">
{MailPoet.I18n.t('placeFormBellowAllPages')}
@ -40,6 +42,20 @@ const BelowPostsSettings = () => {
/>
</div>
</div>
<SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.belowPostStyles.width}
minPixels={200}
maxPixels={1200}
minPercents={10}
maxPercents={100}
defaultPixelValue={560}
defaultPercentValue={100}
onChange={(width) => (
updateSettings('belowPostStyles', { ...formSettings.belowPostStyles, width })
)}
/>
</>
);
};

14
assets/js/src/form_editor/components/preview/fixed_bar_settings.tsx
View File

@ -4,6 +4,7 @@ import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data';
import { SelectControl, RadioControl } from '@wordpress/components';
import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings';
const delayValues = [0, 15, 30, 60, 120, 180, 240];
@ -68,6 +69,19 @@ const FixedBarSettings = () => {
]}
onChange={partial(updateSettings, 'fixedBarFormPosition')}
/>
<SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.fixedBarStyles.width}
minPixels={200}
maxPixels={1200}
minPercents={10}
maxPercents={100}
defaultPixelValue={560}
defaultPercentValue={100}
onChange={(width) => (
updateSettings('fixedBarStyles', { ...formSettings.fixedBarStyles, width })
)}
/>
</>
);
};

28
assets/js/src/form_editor/components/preview/other_settings.tsx
View File

@ -1,9 +1,10 @@
import React, { useState } from 'react';
import MailPoet from 'mailpoet';
import ReactStringReplace from 'react-string-replace';
import { useSelect } from '@wordpress/data';
import { useSelect, useDispatch } from '@wordpress/data';
import { curry } from 'lodash';
import { TextareaControl } from '@wordpress/components';
import { SizeSettings } from 'form_editor/components/size_settings';
const OtherSettings = () => {
const [copyAreaContent, setCopyAreaContent] = useState(null);
@ -13,6 +14,18 @@ const OtherSettings = () => {
[]
);
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[]
);
const { changeFormSettings } = useDispatch('mailpoet-form-editor');
const updateSettings = (key, value) => {
const settings = { ...formSettings };
settings[key] = value;
changeFormSettings(settings);
};
const addFormWidgetHint = ReactStringReplace(
MailPoet.I18n.t('addFormWidgetHint'),
/\[link](.*?)\[\/link]/g,
@ -69,6 +82,19 @@ const OtherSettings = () => {
<p>{addFormShortcodeHint}</p>
<p>{addFormPhpIframeHint}</p>
{getCopyTextArea()}
<SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.otherStyles.width}
minPixels={200}
maxPixels={1200}
minPercents={10}
maxPercents={100}
defaultPixelValue={200}
defaultPercentValue={100}
onChange={(width) => (
updateSettings('otherStyles', { ...formSettings.otherStyles, width })
)}
/>
</>
);
};

14
assets/js/src/form_editor/components/preview/popup_settings.tsx
View File

@ -4,6 +4,7 @@ import Toggle from 'common/toggle';
import { SelectControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings';
const delayValues = [0, 15, 30, 60, 120, 180, 240];
@ -58,6 +59,19 @@ const PopUpSettings = () => {
label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
}))}
/>
<SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.popupStyles.width}
minPixels={200}
maxPixels={1200}
minPercents={10}
maxPercents={100}
defaultPixelValue={560}
defaultPercentValue={100}
onChange={(width) => (
updateSettings('popupStyles', { ...formSettings.popupStyles, width })
)}
/>
</>
);
};

14
assets/js/src/form_editor/components/preview/slide_in_settings.tsx
View File

@ -4,6 +4,7 @@ import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data';
import { SelectControl, RadioControl } from '@wordpress/components';
import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings';
const delayValues = [0, 15, 30, 60, 120, 180, 240];
@ -68,6 +69,19 @@ const SlideInSettings = () => {
]}
onChange={partial(updateSettings, 'slideInFormPosition')}
/>
<SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.slideInStyles.width}
minPixels={200}
maxPixels={1200}
minPercents={10}
maxPercents={100}
defaultPixelValue={560}
defaultPercentValue={100}
onChange={(width) => (
updateSettings('slideInStyles', { ...formSettings.slideInStyles, width })
)}
/>
</>
);
};

38
assets/js/src/form_editor/store/defaults.ts Normal file
View File

@ -0,0 +1,38 @@
/**
* Default values for various settings
*/
export const belowPostStyles = {
width: {
unit: 'percent',
value: 100,
},
};
export const popupStyles = {
width: {
unit: 'pixel',
value: 560,
},
};
export const fixedBarStyles = {
width: {
unit: 'percent',
value: 100,
},
};
export const otherStyles = {
width: {
unit: 'percent',
value: 100,
},
};
export const slideInStyles = {
width: {
unit: 'pixel',
value: 560,
},
};

6
assets/js/src/form_editor/store/map_form_data_after_loading.jsx
View File

@ -1,4 +1,5 @@
import asNum from './server_value_as_num';
import * as defaults from './defaults';
export default function mapFormDataAfterLoading(data) {
return {
@ -25,6 +26,11 @@ export default function mapFormDataAfterLoading(data) {
borderColor: data.settings.border_color,
backgroundImageUrl: data.settings.background_image_url,
backgroundImageDisplay: data.settings.background_image_display,
belowPostStyles: { ...defaults.belowPostStyles, ...data.settings.below_post_styles },
slideInStyles: { ...defaults.slideInStyles, ...data.settings.slide_in_styles },
fixedBarStyles: { ...defaults.fixedBarStyles, ...data.settings.fixed_bar_styles },
popupStyles: { ...defaults.popupStyles, ...data.settings.popup_styles },
otherStyles: { ...defaults.otherStyles, ...data.settings.other_styles },
},
};
}

10
assets/js/src/form_editor/store/map_form_data_before_saving.jsx
View File

@ -23,6 +23,11 @@ export default function mapFormDataBeforeSaving(data) {
border_color: data.settings.borderColor,
background_image_url: data.settings.backgroundImageUrl,
background_image_display: data.settings.backgroundImageDisplay,
below_post_styles: data.settings.belowPostStyles,
slide_in_styles: data.settings.slideInStyles,
fixed_bar_styles: data.settings.fixedBarStyles,
popup_styles: data.settings.popupStyles,
other_styles: data.settings.otherStyles,
},
};
@ -46,6 +51,11 @@ export default function mapFormDataBeforeSaving(data) {
delete mappedData.settings.borderColor;
delete mappedData.settings.backgroundImageUrl;
delete mappedData.settings.backgroundImageDisplay;
delete mappedData.settings.belowPostStyles;
delete mappedData.settings.slideInStyles;
delete mappedData.settings.fixedBarStyles;
delete mappedData.settings.popupStyles;
delete mappedData.settings.otherStyles;
return mappedData;
}

27
tests/javascript/form_editor/store/map_form_data_after_loading.spec.js
View File

@ -76,5 +76,32 @@ describe('Form Data Load Mapper', () => {
expect(map(mapData).settings).to.have.property('formPadding', 50);
expect(map(mapData).settings).to.have.property('inputPadding', 20);
});
it('Sets default placements styles', () => {
expect(map(data).settings).to.have.property('belowPostStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
expect(map(data).settings).to.have.property('popupStyles').that.deep.eq({ width: { unit: 'pixel', value: 560 } });
expect(map(data).settings).to.have.property('fixedBarStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
expect(map(data).settings).to.have.property('slideInStyles').that.deep.eq({ width: { unit: 'pixel', value: 560 } });
expect(map(data).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
});
it('Keeps set placement styles', () => {
const mapData = {
...data,
settings: {
...data.settings,
below_post_styles: { width: { unit: 'percent', value: 101 } },
popup_styles: { width: { unit: 'percent', value: 102 } },
fixed_bar_styles: { width: { unit: 'percent', value: 103 } },
slide_in_styles: { width: { unit: 'percent', value: 104 } },
other_styles: { width: { unit: 'percent', value: 105 } },
},
};
expect(map(mapData).settings).to.have.property('belowPostStyles').that.deep.eq({ width: { unit: 'percent', value: 101 } });
expect(map(mapData).settings).to.have.property('popupStyles').that.deep.eq({ width: { unit: 'percent', value: 102 } });
expect(map(mapData).settings).to.have.property('fixedBarStyles').that.deep.eq({ width: { unit: 'percent', value: 103 } });
expect(map(mapData).settings).to.have.property('slideInStyles').that.deep.eq({ width: { unit: 'percent', value: 104 } });
expect(map(mapData).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 105 } });
});
});
});

1
views/form/editor.html
View File

@ -62,6 +62,7 @@
'formSettingsAlignmentRight': _x('right', 'An alignment value for form editor'),
'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'),
'formSettingsApplyToAll': __('Apply styles to all inputs'),
'formSettingsWidth': _x('Form width', 'A label for form width settings'),
'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
'formPlacement': _x('Form Placement', 'A settings section heading'),