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

Use Gutenberg ToggleControls in placement settings

Browse Source 
[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
2020-05-19 14:45:26 +02:00
committed by Veljko V
parent 54952ebfe3
commit 4035032b2f
7 changed files with 49 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/src/components-form-editor/_preview.scss
View File

@@ -97,11 +97,3 @@
} }
} }
} }
.mailpoet-toggle-list {
display: grid;
font-size: 13px;
grid-row-gap: 20px;
grid-template-columns: 1fr 45px;
margin-bottom: 1em;
}

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

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { ToggleControl } from '@wordpress/components';
import { partial } from 'lodash'; import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings'; import { SizeSettings } from 'form_editor/components/size_settings';
@@ -20,28 +20,16 @@ const BelowPostsSettings = () => {
return ( return (
<> <>
<div className="mailpoet-toggle-list"> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPages')}
{MailPoet.I18n.t('placeFormBellowAllPages')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placeFormBellowAllPages"
checked={formSettings.placeFormBellowAllPages || false} checked={formSettings.placeFormBellowAllPages || false}
onCheck={partial(updateSettings, 'placeFormBellowAllPages')} onChange={partial(updateSettings, 'placeFormBellowAllPages')}
/> />
</div> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPosts')}
{MailPoet.I18n.t('placeFormBellowAllPosts')}
</div>
<div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
<Toggle
name="placeFormBellowAllPosts"
checked={formSettings.placeFormBellowAllPosts || false} checked={formSettings.placeFormBellowAllPosts || false}
onCheck={partial(updateSettings, 'placeFormBellowAllPosts')} onChange={partial(updateSettings, 'placeFormBellowAllPosts')}
/> />
</div>
</div>
<SizeSettings <SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')} label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.belowPostStyles.width} value={formSettings.belowPostStyles.width}

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

@@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { SelectControl, RadioControl } from '@wordpress/components'; import { SelectControl, RadioControl, ToggleControl } from '@wordpress/components';
import { partial } from 'lodash'; import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings'; import { SizeSettings } from 'form_editor/components/size_settings';
@@ -29,28 +28,16 @@ const FixedBarSettings = () => {
return ( return (
<> <>
<p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p> <p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p>
<div className="mailpoet-toggle-list"> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPages')}
{MailPoet.I18n.t('placeFormBellowAllPages')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placeFixedBarFormOnAllPages"
checked={formSettings.placeFixedBarFormOnAllPages || false} checked={formSettings.placeFixedBarFormOnAllPages || false}
onCheck={partial(updateSettings, 'placeFixedBarFormOnAllPages')} onChange={partial(updateSettings, 'placeFixedBarFormOnAllPages')}
/> />
</div> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPosts')}
{MailPoet.I18n.t('placeFormBellowAllPosts')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placeFixedBarFormOnAllPosts"
checked={formSettings.placeFixedBarFormOnAllPosts || false} checked={formSettings.placeFixedBarFormOnAllPosts || false}
onCheck={partial(updateSettings, 'placeFixedBarFormOnAllPosts')} onChange={partial(updateSettings, 'placeFixedBarFormOnAllPosts')}
/> />
</div>
</div>
<SelectControl <SelectControl
label={MailPoet.I18n.t('formPlacementDelay')} label={MailPoet.I18n.t('formPlacementDelay')}
value={fixedBarFormDelay} value={fixedBarFormDelay}

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

@@ -1,7 +1,6 @@
import React, { useState } from 'react'; import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import Toggle from 'common/toggle'; import { SelectControl, ToggleControl } from '@wordpress/components';
import { SelectControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { partial } from 'lodash'; import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings'; import { SizeSettings } from 'form_editor/components/size_settings';
@@ -28,28 +27,16 @@ const PopUpSettings = () => {
return ( return (
<> <>
<p>{MailPoet.I18n.t('placePopupFormOnPagesDescription')}</p> <p>{MailPoet.I18n.t('placePopupFormOnPagesDescription')}</p>
<div className="mailpoet-toggle-list"> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPages')}
{MailPoet.I18n.t('placeFormBellowAllPages')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placePopupFormOnAllPages"
checked={formSettings.placePopupFormOnAllPages || false} checked={formSettings.placePopupFormOnAllPages || false}
onCheck={partial(updateSettings, 'placePopupFormOnAllPages')} onChange={partial(updateSettings, 'placePopupFormOnAllPages')}
/> />
</div> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPosts')}
{MailPoet.I18n.t('placeFormBellowAllPosts')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placePopupFormOnAllPosts"
checked={formSettings.placePopupFormOnAllPosts || false} checked={formSettings.placePopupFormOnAllPosts || false}
onCheck={partial(updateSettings, 'placePopupFormOnAllPosts')} onChange={partial(updateSettings, 'placePopupFormOnAllPosts')}
/> />
</div>
</div>
<SelectControl <SelectControl
label={MailPoet.I18n.t('formPlacementDelay')} label={MailPoet.I18n.t('formPlacementDelay')}
value={popupFormDelay} value={popupFormDelay}

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

@@ -1,8 +1,7 @@
import React from 'react'; import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { SelectControl, RadioControl } from '@wordpress/components'; import { SelectControl, RadioControl, ToggleControl } from '@wordpress/components';
import { partial } from 'lodash'; import { partial } from 'lodash';
import { SizeSettings } from 'form_editor/components/size_settings'; import { SizeSettings } from 'form_editor/components/size_settings';
@@ -29,28 +28,16 @@ const SlideInSettings = () => {
return ( return (
<> <>
<p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p> <p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p>
<div className="mailpoet-toggle-list"> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPages')}
{MailPoet.I18n.t('placeFormBellowAllPages')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placeSlideInFormOnAllPages"
checked={formSettings.placeSlideInFormOnAllPages || false} checked={formSettings.placeSlideInFormOnAllPages || false}
onCheck={partial(updateSettings, 'placeSlideInFormOnAllPages')} onChange={partial(updateSettings, 'placeSlideInFormOnAllPages')}
/> />
</div> <ToggleControl
<div className="mailpoet-toggle-list-description"> label={MailPoet.I18n.t('placeFormOnAllPosts')}
{MailPoet.I18n.t('placeFormBellowAllPosts')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placeSlideInFormOnAllPosts"
checked={formSettings.placeSlideInFormOnAllPosts || false} checked={formSettings.placeSlideInFormOnAllPosts || false}
onCheck={partial(updateSettings, 'placeSlideInFormOnAllPosts')} onChange={partial(updateSettings, 'placeSlideInFormOnAllPosts')}
/> />
</div>
</div>
<SelectControl <SelectControl
label={MailPoet.I18n.t('formPlacementDelay')} label={MailPoet.I18n.t('formPlacementDelay')}
value={slideInFormDelay} value={slideInFormDelay}

4
tests/acceptance/DisplayFormBellowPostCest.php
View File

@@ -35,8 +35,8 @@ class DisplayFormBellowPostCest {
$i->waitForElement('[data-automation-id="form_title_input"]'); $i->waitForElement('[data-automation-id="form_title_input"]');
$i->click('.form-sidebar-form-placement-panel'); $i->click('.form-sidebar-form-placement-panel');
$i->click('[data-automation-id="form-placement-option-Below pages"]'); $i->click('[data-automation-id="form-placement-option-Below pages"]');
$i->waitForElement('[data-automation-id="place-form-bellow-all-posts-toggle"]'); $i->waitForText('Display on all pages', 10, '.mailpoet_preview_sidebar');
$i->checkOption('[data-automation-id="place-form-bellow-all-posts-toggle"]'); $i->checkOption('Display on all posts');
$i->click('.mailpoet-modal-close'); $i->click('.mailpoet-modal-close');
$i->click('[data-automation-id="form_save_button"]'); $i->click('[data-automation-id="form_save_button"]');
$i->waitForText('Form saved', 10, '.automation-dismissible-notices'); $i->waitForText('Form saved', 10, '.automation-dismissible-notices');

4
views/form/editor.html
View File

@@ -78,8 +78,8 @@
'placePopupFormOnPagesDescription': __('Display your form in a pop up window.'), 'placePopupFormOnPagesDescription': __('Display your form in a pop up window.'),
'placeFormBellowPages': _x('Below pages', 'This is a text on a widget that leads to settings for form placement'), 'placeFormBellowPages': _x('Below pages', 'This is a text on a widget that leads to settings for form placement'),
'placeFormBellowPagesDescription': __('This form placement allows you to add this form at the end of all the pages or posts, below the content.'), 'placeFormBellowPagesDescription': __('This form placement allows you to add this form at the end of all the pages or posts, below the content.'),
'placeFormBellowAllPages': _x('Display on all pages', 'This is a text on a switch if a form should be displayed bellow all pages'), 'placeFormOnAllPages': _x('Display on all pages', 'This is a text on a switch if a form should be displayed bellow all pages'),
'placeFormBellowAllPosts': _x('Display on all posts', 'This is a text on a switch if a form should be displayed bellow all posts'), 'placeFormOnAllPosts': _x('Display on all posts', 'This is a text on a switch if a form should be displayed bellow all posts'),
'placeFormOthers': _x('Others (widget)', 'Placement of the form using theme widget'), 'placeFormOthers': _x('Others (widget)', 'Placement of the form using theme widget'),
'formPlacementDelay': _x('Display with a delay of', 'Label on a selection of different times'), 'formPlacementDelay': _x('Display with a delay of', 'Label on a selection of different times'),
'formPlacementPlacementPosition': _x('Position', 'Placement of a fixed bar form, on top of the page or on the bottom'), 'formPlacementPlacementPosition': _x('Position', 'Placement of a fixed bar form, on top of the page or on the bottom'),