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

Improve visuals of data manipulation step

Browse Source 
[MAILPOET-1809]
This commit is contained in:
Pavel Dohnal
2019-07-04 11:25:49 +02:00
committed by M. Shull
parent 51858886ca
commit 65d4a7c57a
4 changed files with 68 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/css/src/components/_importExport.scss
View File

@@ -99,6 +99,51 @@ tr {
}
}
.mailpoet_data_manipulation_step {
align-items: flex-start;
display: flex;
flex-direction: column;
> * {
margin: 10px 0;
}
.mailpoet_label_description {
padding: 20px 10px 20px 0;
width: 310px;
}
.mailpoet_import_select_segment {
align-items: center;
display: flex;
flex-direction: row;
label {
align-items: center;
display: flex;
flex-direction: row;
}
.mailpoet_create_segment {
margin-left: 15px;
}
}
.mailpoet_update_existing_subscribers {
align-items: center;
display: flex;
flex-direction: row;
label {
margin-right: 4px;
}
.mailpoet_label_description {
font-weight: 400;
}
}
}
.mailpoet_subscribers_data_parse_results_details_show,
.mailpoet_create_segment {
cursor: pointer;

26
assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
View File

@@ -40,22 +40,20 @@ function StepDataManipulation({
return null;
}
return (
<>
<div className="mailpoet_data_manipulation_step">
<Warnings
stepMethodSelectionData={stepMethodSelectionData}
/>
<div className="inside">
<MatchTable
subscribersCount={stepMethodSelectionData.subscribersCount}
subscribers={stepMethodSelectionData.subscribers}
header={stepMethodSelectionData.header}
/>
<SelectSegment setSelectedSegments={setSelectedSegments} />
<UpdateExistingSubscribers
setUpdateExistingSubscribers={setUpdateExistingSubscribers}
updateExistingSubscribers={updateExistingSubscribers}
/>
</div>
<MatchTable
subscribersCount={stepMethodSelectionData.subscribersCount}
subscribers={stepMethodSelectionData.subscribers}
header={stepMethodSelectionData.header}
/>
<SelectSegment setSelectedSegments={setSelectedSegments} />
<UpdateExistingSubscribers
setUpdateExistingSubscribers={setUpdateExistingSubscribers}
updateExistingSubscribers={updateExistingSubscribers}
/>
<PreviousNextStepButtons
canGoNext={selectedSegments.length > 0}
onPreviousAction={() => (
@@ -63,7 +61,7 @@ function StepDataManipulation({
)}
onNextAction={() => history.push('todo')}
/>
</>
</div>
);
}

14
assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
View File

@@ -24,12 +24,14 @@ function SelectSegment({ setSelectedSegments }) {
};
return (
<>
<div className="mailpoet_import_select_segment">
<label htmlFor="mailpoet_segments_select">
{MailPoet.I18n.t('pickLists')}
<p className="description">
{MailPoet.I18n.t('pickListsDescription')}
</p>
<div className="mailpoet_label_description">
<b>{MailPoet.I18n.t('pickLists')}</b>
<p className="description">
{MailPoet.I18n.t('pickListsDescription')}
</p>
</div>
<select
id="mailpoet_segments_select"
data-placeholder={MailPoet.I18n.t('select')}
@@ -53,7 +55,7 @@ function SelectSegment({ setSelectedSegments }) {
>
{MailPoet.I18n.t('createANewList')}
</a>
</>
</div>
);
}

6
assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
View File

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
function UpdateExistingSubscribers({ updateExistingSubscribers, setUpdateExistingSubscribers }) {
return (
<>
{MailPoet.I18n.t('updateExistingSubscribers')}
<div className="mailpoet_update_existing_subscribers">
<div className="mailpoet_label_description">{MailPoet.I18n.t('updateExistingSubscribers')}</div>
<label htmlFor="update_existing_subscribers">
<input
id="update_existing_subscribers"
@@ -26,7 +26,7 @@ function UpdateExistingSubscribers({ updateExistingSubscribers, setUpdateExistin
/>
{MailPoet.I18n.t('updateExistingSubscribersNo')}
</label>
</>
</div>
);
}