Use Gutenberg ToggleControls in placement settings
[MAILPOET-2811]
This commit is contained in:
committed by
Veljko V
parent
54952ebfe3
commit
4035032b2f
@@ -97,11 +97,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mailpoet-toggle-list {
|
||||
display: grid;
|
||||
font-size: 13px;
|
||||
grid-row-gap: 20px;
|
||||
grid-template-columns: 1fr 45px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
import Toggle from 'common/toggle';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { ToggleControl } from '@wordpress/components';
|
||||
import { partial } from 'lodash';
|
||||
import { SizeSettings } from 'form_editor/components/size_settings';
|
||||
|
||||
@@ -20,28 +20,16 @@ const BelowPostsSettings = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mailpoet-toggle-list">
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPages')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placeFormBellowAllPages"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPages')}
|
||||
checked={formSettings.placeFormBellowAllPages || false}
|
||||
onCheck={partial(updateSettings, 'placeFormBellowAllPages')}
|
||||
onChange={partial(updateSettings, 'placeFormBellowAllPages')}
|
||||
/>
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPosts')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
|
||||
<Toggle
|
||||
name="placeFormBellowAllPosts"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPosts')}
|
||||
checked={formSettings.placeFormBellowAllPosts || false}
|
||||
onCheck={partial(updateSettings, 'placeFormBellowAllPosts')}
|
||||
onChange={partial(updateSettings, 'placeFormBellowAllPosts')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SizeSettings
|
||||
label={MailPoet.I18n.t('formSettingsWidth')}
|
||||
value={formSettings.belowPostStyles.width}
|
||||
|
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
import Toggle from 'common/toggle';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { SelectControl, RadioControl } from '@wordpress/components';
|
||||
import { SelectControl, RadioControl, ToggleControl } from '@wordpress/components';
|
||||
import { partial } from 'lodash';
|
||||
import { SizeSettings } from 'form_editor/components/size_settings';
|
||||
|
||||
@@ -29,28 +28,16 @@ const FixedBarSettings = () => {
|
||||
return (
|
||||
<>
|
||||
<p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p>
|
||||
<div className="mailpoet-toggle-list">
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPages')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placeFixedBarFormOnAllPages"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPages')}
|
||||
checked={formSettings.placeFixedBarFormOnAllPages || false}
|
||||
onCheck={partial(updateSettings, 'placeFixedBarFormOnAllPages')}
|
||||
onChange={partial(updateSettings, 'placeFixedBarFormOnAllPages')}
|
||||
/>
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPosts')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placeFixedBarFormOnAllPosts"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPosts')}
|
||||
checked={formSettings.placeFixedBarFormOnAllPosts || false}
|
||||
onCheck={partial(updateSettings, 'placeFixedBarFormOnAllPosts')}
|
||||
onChange={partial(updateSettings, 'placeFixedBarFormOnAllPosts')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SelectControl
|
||||
label={MailPoet.I18n.t('formPlacementDelay')}
|
||||
value={fixedBarFormDelay}
|
||||
|
@@ -1,7 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
import Toggle from 'common/toggle';
|
||||
import { SelectControl } from '@wordpress/components';
|
||||
import { SelectControl, ToggleControl } from '@wordpress/components';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { partial } from 'lodash';
|
||||
import { SizeSettings } from 'form_editor/components/size_settings';
|
||||
@@ -28,28 +27,16 @@ const PopUpSettings = () => {
|
||||
return (
|
||||
<>
|
||||
<p>{MailPoet.I18n.t('placePopupFormOnPagesDescription')}</p>
|
||||
<div className="mailpoet-toggle-list">
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPages')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placePopupFormOnAllPages"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPages')}
|
||||
checked={formSettings.placePopupFormOnAllPages || false}
|
||||
onCheck={partial(updateSettings, 'placePopupFormOnAllPages')}
|
||||
onChange={partial(updateSettings, 'placePopupFormOnAllPages')}
|
||||
/>
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPosts')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placePopupFormOnAllPosts"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPosts')}
|
||||
checked={formSettings.placePopupFormOnAllPosts || false}
|
||||
onCheck={partial(updateSettings, 'placePopupFormOnAllPosts')}
|
||||
onChange={partial(updateSettings, 'placePopupFormOnAllPosts')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SelectControl
|
||||
label={MailPoet.I18n.t('formPlacementDelay')}
|
||||
value={popupFormDelay}
|
||||
|
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import MailPoet from 'mailpoet';
|
||||
import Toggle from 'common/toggle';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { SelectControl, RadioControl } from '@wordpress/components';
|
||||
import { SelectControl, RadioControl, ToggleControl } from '@wordpress/components';
|
||||
import { partial } from 'lodash';
|
||||
import { SizeSettings } from 'form_editor/components/size_settings';
|
||||
|
||||
@@ -29,28 +28,16 @@ const SlideInSettings = () => {
|
||||
return (
|
||||
<>
|
||||
<p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p>
|
||||
<div className="mailpoet-toggle-list">
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPages')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placeSlideInFormOnAllPages"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPages')}
|
||||
checked={formSettings.placeSlideInFormOnAllPages || false}
|
||||
onCheck={partial(updateSettings, 'placeSlideInFormOnAllPages')}
|
||||
onChange={partial(updateSettings, 'placeSlideInFormOnAllPages')}
|
||||
/>
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-description">
|
||||
{MailPoet.I18n.t('placeFormBellowAllPosts')}
|
||||
</div>
|
||||
<div className="mailpoet-toggle-list-toggle">
|
||||
<Toggle
|
||||
name="placeSlideInFormOnAllPosts"
|
||||
<ToggleControl
|
||||
label={MailPoet.I18n.t('placeFormOnAllPosts')}
|
||||
checked={formSettings.placeSlideInFormOnAllPosts || false}
|
||||
onCheck={partial(updateSettings, 'placeSlideInFormOnAllPosts')}
|
||||
onChange={partial(updateSettings, 'placeSlideInFormOnAllPosts')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SelectControl
|
||||
label={MailPoet.I18n.t('formPlacementDelay')}
|
||||
value={slideInFormDelay}
|
||||
|
@@ -35,8 +35,8 @@ class DisplayFormBellowPostCest {
|
||||
$i->waitForElement('[data-automation-id="form_title_input"]');
|
||||
$i->click('.form-sidebar-form-placement-panel');
|
||||
$i->click('[data-automation-id="form-placement-option-Below pages"]');
|
||||
$i->waitForElement('[data-automation-id="place-form-bellow-all-posts-toggle"]');
|
||||
$i->checkOption('[data-automation-id="place-form-bellow-all-posts-toggle"]');
|
||||
$i->waitForText('Display on all pages', 10, '.mailpoet_preview_sidebar');
|
||||
$i->checkOption('Display on all posts');
|
||||
$i->click('.mailpoet-modal-close');
|
||||
$i->click('[data-automation-id="form_save_button"]');
|
||||
$i->waitForText('Form saved', 10, '.automation-dismissible-notices');
|
||||
|
@@ -78,8 +78,8 @@
|
||||
'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'),
|
||||
'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'),
|
||||
'placeFormBellowAllPosts': _x('Display on all posts', 'This is a text on a switch if a form should be displayed bellow all posts'),
|
||||
'placeFormOnAllPages': _x('Display on all pages', 'This is a text on a switch if a form should be displayed bellow all pages'),
|
||||
'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'),
|
||||
'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'),
|
||||
|
Reference in New Issue
Block a user