Simplify DOM and get rid of IDs in CSS

[MAILPOET-2804]
This commit is contained in:
Jan Jakeš
2020-03-31 14:46:59 +02:00
committed by Veljko V
parent 6636313baf
commit b6ff062bf1
3 changed files with 63 additions and 65 deletions

View File

@@ -1,14 +1,14 @@
#set-from-address-modal { .set-from-address-modal {
p:first-child { p:first-child {
margin-top: 0; margin-top: 0;
} }
#mailpoet_set_from_address_modal_address { input[type=text] {
display: block; display: block;
width: 230px; width: 230px;
} }
#mailpoet_set_from_address_modal_save { input[type=submit] {
display: block; display: block;
margin-top: 30px; margin-top: 30px;
} }

View File

@@ -72,8 +72,8 @@ const SetFromAddressModal = ({ onRequestClose }: Props) => {
<Modal <Modal
title={MailPoet.I18n.t('setFromAddressModalTitle')} title={MailPoet.I18n.t('setFromAddressModalTitle')}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
contentClassName="set-from-address-modal"
> >
<div id="set-from-address-modal">
<p> <p>
{ {
ReactStringReplace( ReactStringReplace(
@@ -94,25 +94,24 @@ const SetFromAddressModal = ({ onRequestClose }: Props) => {
</p> </p>
<input <input
id="mailpoet_set_from_address_modal_address" id="mailpoet-set-from-address-modal-input"
type="text" type="text"
placeholder="from@mydomain.com" placeholder="from@mydomain.com"
data-parsley-required data-parsley-required
data-parsley-type="email" data-parsley-type="email"
onChange={(event) => { onChange={(event) => {
setAddress(event.target.value.trim() || null); setAddress(event.target.value.trim() || null);
const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley(); const addressValidator = jQuery('#mailpoet-set-from-address-modal-input').parsley();
addressValidator.removeError('saveError'); addressValidator.removeError('saveError');
}} }}
/> />
<input <input
id="mailpoet_set_from_address_modal_save"
className="button button-primary" className="button button-primary"
type="submit" type="submit"
value={MailPoet.I18n.t('setFromAddressModalSave')} value={MailPoet.I18n.t('setFromAddressModalSave')}
onClick={async () => { onClick={async () => {
const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley(); const addressValidator = jQuery('#mailpoet-set-from-address-modal-input').parsley();
addressValidator.validate(); addressValidator.validate();
if (!addressValidator.isValid()) { if (!addressValidator.isValid()) {
return; return;
@@ -132,7 +131,6 @@ const SetFromAddressModal = ({ onRequestClose }: Props) => {
} }
}} }}
/> />
</div>
</Modal> </Modal>
); );
}; };

View File

@@ -45,12 +45,12 @@ class AddSendingKeyCest {
$i->waitForText('Its time to set your default FROM address!'); $i->waitForText('Its time to set your default FROM address!');
$i->waitForText('Set one of your authorized email addresses as the default FROM email for your MailPoet emails.'); $i->waitForText('Set one of your authorized email addresses as the default FROM email for your MailPoet emails.');
$i->fillField(['id' => 'mailpoet_set_from_address_modal_address'], 'invalid@email.com'); $i->fillField(['id' => 'mailpoet-set-from-address-modal-input'], 'invalid@email.com');
$i->click('Save', '#set-from-address-modal'); $i->click('Save', '.set-from-address-modal');
$i->waitForText('Cant use this email yet! Please authorize it first.'); $i->waitForText('Cant use this email yet! Please authorize it first.');
$i->fillField(['id' => 'mailpoet_set_from_address_modal_address'], 'staff@mailpoet.com'); $i->fillField(['id' => 'mailpoet-set-from-address-modal-input'], 'staff@mailpoet.com');
$i->click('Save', '#set-from-address-modal'); $i->click('Save', '.set-from-address-modal');
$i->waitForText('Excellent. Your authorized email was saved. You can change it in the Basics tab of the MailPoet settings.'); $i->waitForText('Excellent. Your authorized email was saved. You can change it in the Basics tab of the MailPoet settings.');
$i->dontSee('Sending all of your emails has been paused because your email address %s hasnt been authorized yet.'); $i->dontSee('Sending all of your emails has been paused because your email address %s hasnt been authorized yet.');