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

Fix layout of the last sending date segment in the segment edit page

Browse Source 
This change will affect all the segments that use the <DateFields>
component.

See https://github.com/mailpoet/mailpoet/pull/5174#issuecomment-1746542729

[MAILPOET-5398]
This commit is contained in:
Rodrigo Primo
2023-10-04 11:35:06 -03:00
committed by Aschepikov
parent 017c66a896
commit a3f94a2bb5
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
mailpoet/assets/css/src/components-plugin/_segments.scss
View File

@@ -25,6 +25,11 @@
margin-left: 0 !important; margin-left: 0 !important;
width: 80px; width: 80px;
} }
.mailpoet-segments-datepicker-small {
margin-left: 0 !important;
width: 110px;
}
} }
.mailpoet-segments-description-section .mailpoet-form-textarea textarea { .mailpoet-segments-description-section .mailpoet-form-textarea textarea {

8
mailpoet/assets/js/src/segments/dynamic/dynamic-segments-filters/fields/date-fields.tsx
View File

@@ -5,7 +5,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { MailPoet } from 'mailpoet'; import { MailPoet } from 'mailpoet';
import { Select } from 'common/form/select/select'; import { Select } from 'common/form/select/select';
import { Datepicker } from 'common/datepicker/datepicker'; import { Datepicker } from 'common/datepicker/datepicker';
import { Grid } from 'common/grid';
import { Input } from 'common/form/input/input'; import { Input } from 'common/form/input/input';
import { DateFormItem, FilterProps } from '../../types'; import { DateFormItem, FilterProps } from '../../types';
@@ -99,10 +98,11 @@ function DateFields({
}, [updateSegmentFilter, segment, filterIndex, defaultOperator]); }, [updateSegmentFilter, segment, filterIndex, defaultOperator]);
return ( return (
<Grid.CenteredRow> <>
<Select <Select
key="select" key="select"
value={segment.operator} value={segment.operator}
isMinWidth
onChange={(e) => { onChange={(e) => {
void updateSegmentFilterFromEvent('operator', filterIndex, e); void updateSegmentFilterFromEvent('operator', filterIndex, e);
}} }}
@@ -131,6 +131,7 @@ function DateFields({
segment.operator === DateOperator.ON_OR_BEFORE || segment.operator === DateOperator.ON_OR_BEFORE ||
segment.operator === DateOperator.NOT_ON) && ( segment.operator === DateOperator.NOT_ON) && (
<Datepicker <Datepicker
className="mailpoet-segments-datepicker-small"
dateFormat="MMM d, yyyy" dateFormat="MMM d, yyyy"
onChange={(value): void => { onChange={(value): void => {
void updateSegmentFilter( void updateSegmentFilter(
@@ -145,6 +146,7 @@ function DateFields({
segment.operator === DateOperator.NOT_IN_THE_LAST) && ( segment.operator === DateOperator.NOT_IN_THE_LAST) && (
<> <>
<Input <Input
className="mailpoet-segments-input-small"
key="input" key="input"
type="number" type="number"
value={segment.value || ''} value={segment.value || ''}
@@ -157,7 +159,7 @@ function DateFields({
<span>{MailPoet.I18n.t('daysPlaceholder')}</span> <span>{MailPoet.I18n.t('daysPlaceholder')}</span>
</> </>
)} )}
</Grid.CenteredRow> </>
); );
} }