diff --git a/assets/css/src/components/formEditor/components/_sidebar.scss b/assets/css/src/components/formEditor/components/_sidebar.scss index ac16b3abe3..9105bb90b2 100644 --- a/assets/css/src/components/formEditor/components/_sidebar.scss +++ b/assets/css/src/components/formEditor/components/_sidebar.scss @@ -118,12 +118,14 @@ $form-placement-option-oval-border: #969ca1; border: solid 1px $form-placement-option-base-color; border-radius: 4px; box-shadow: 0 1px 2px 0 $form-placement-option-base-color; + cursor: pointer; display: flex; flex-direction: column; height: 142px; justify-content: space-between; margin: 0 16px 16px 0; padding: 6px; + pointer-events: auto; position: relative; text-align: center; width: 116px; @@ -134,6 +136,7 @@ $form-placement-option-oval-border: #969ca1; border-radius: 2px; height: 140px; // width of the parent element minus border on both sides left: 0; + pointer-events: none; position: absolute; top: 0; width: 114px; @@ -156,6 +159,7 @@ $form-placement-option-oval-border: #969ca1; font-size: 14px; height: 40px; justify-content: center; + pointer-events: none; width: 100%; z-index: 2; @@ -169,6 +173,7 @@ $form-placement-option-oval-border: #969ca1; flex-direction: row; height: 25px; justify-content: space-between; + pointer-events: none; width: 100%; z-index: 4; } @@ -178,16 +183,19 @@ $form-placement-option-oval-border: #969ca1; border: solid 1px $form-placement-option-oval-border; border-radius: 7px; height: 13px; + pointer-events: none; width: 13px; } .form-placement-settings-icon { + height: 14px; + pointer-events: none; + width: 14px; + z-index: 4; + svg { fill: $form-placement-option-base-color; } - height: 14px; - width: 14px; - z-index: 4; } .form-placement-settings-icon-hover { @@ -197,15 +205,17 @@ $form-placement-option-oval-border: #969ca1; } .form-placement-option-icon { - svg { - height: 63px; - width: 76px; - } background-color: #fff; box-shadow: 0 4px 18px 0 rgba(68, 75, 102, .15); height: 63px; margin: 0 auto; object-fit: contain; + pointer-events: none; width: 76px; z-index: 2; + + svg { + height: 63px; + width: 76px; + } } diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx index e1ee15d09e..eddf4f7a1f 100644 --- a/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx +++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx @@ -1,11 +1,14 @@ -import React from 'react'; +import React, { useState } from 'react'; import MailPoet from 'mailpoet'; import { useSelect } from '@wordpress/data'; import FormPlacementOption from './form_placement_option'; import Icon from './below_pages_icon'; +import Modal from '../../../../common/modal/modal.jsx'; const BelowPages = () => { + const [displaySettings, setDisplaySettings] = useState(false); + const placeFormBellowAllPages = useSelect( (select) => select('mailpoet-form-editor').placeFormBellowAllPages(), [] @@ -17,11 +20,27 @@ const BelowPages = () => { ); return ( - + <> + setDisplaySettings(true)} + /> + { + displaySettings + && ( + setDisplaySettings(false)} + > +

+ {MailPoet.I18n.t('placeFormBellowPagesDescription')} +

+
+ ) + } + ); }; diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx index cc2cee5080..c1ed17e261 100644 --- a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx +++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx @@ -7,9 +7,15 @@ type Props = { label: string, icon: JSX.Element, active: boolean, + onClick: () => void, } -const FormPlacementOption = ({ label, icon, active }: Props) => { +const FormPlacementOption = ({ + label, + icon, + active, + onClick, +}: Props) => { const [hover, setHover] = useState(false); return (
{ } onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} + onClick={onClick} + onKeyDown={(event) => { + if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) + ) { + event.preventDefault(); + onClick(); + } + }} + role="button" + tabIndex={0} >
diff --git a/views/form/editor.html b/views/form/editor.html index 43eeba0239..0d94d5758f 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -60,6 +60,7 @@ 'formSaved': __('Form saved.'), 'customFieldSaved': __('Custom field saved.'), '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('Below all pages', 'This is a text on a switch if a form should be displayed bellow all pages'), 'placeFormBellowAllPosts': _x('Below all posts', 'This is a text on a switch if a form should be displayed bellow all posts'), 'addFormWidgetHint': __('Add this form to a [link]widget area[/link].'),