Render success and error messages colours

[MAILPOET-2909]
This commit is contained in:
Pavel Dohnal
2020-05-28 11:22:40 +02:00
committed by Veljko V
parent c895cfdd90
commit d487c1644d
2 changed files with 47 additions and 10 deletions

View File

@ -67,15 +67,6 @@ class Styles {
.mailpoet_message { .mailpoet_message {
} }
.mailpoet_validate_success {
font-weight: 600;
color:#468847;
}
.mailpoet_validate_error {
color:#B94A48;
}
.mailpoet_form_loading { .mailpoet_form_loading {
width: 30px; width: 30px;
text-align: center; text-align: center;
@ -173,7 +164,13 @@ EOL;
// Width styles // Width styles
$widthStyles = $this->renderWidthStyles($formSettings, $selector, $displayType); $widthStyles = $this->renderWidthStyles($formSettings, $selector, $displayType);
return $formWrapperStyles . $formElementStyles . $widthStyles . $media; $messagesStyles = $this->renderMessagesStyles($formSettings, $selector);
return $formWrapperStyles
. $formElementStyles
. $widthStyles
. $messagesStyles
. $media;
} }
private function renderWidthStyles($formSettings, $selector, $displayType) { private function renderWidthStyles($formSettings, $selector, $displayType) {
@ -229,4 +226,30 @@ EOL;
private function getWidthValue(array $width) { private function getWidthValue(array $width) {
return $width['value'] . ($width['unit'] === 'percent' ? '%' : 'px'); return $width['value'] . ($width['unit'] === 'percent' ? '%' : 'px');
} }
private function renderMessagesStyles(array $formSettings, string $selector): string {
$styles = '';
if (isset($formSettings['success_validation_color']) && $formSettings['success_validation_color']) {
$success = $formSettings['success_validation_color'];
$styles .= "
$selector .mailpoet_validate_success {color: $success}
$selector input.parsley-success {color: $success}
$selector select.parsley-success {color: $success}
$selector textarea.parsley-success {color: $success}
";
}
if (isset($formSettings['error_validation_color']) && $formSettings['error_validation_color']) {
$error = $formSettings['error_validation_color'];
$styles .= "
$selector .mailpoet_validate_error {color: $error}
$selector input.parsley-error {color: $error}
$selector select.parsley-error {color: $error}
$selector textarea.textarea.parsley-error {color: $error}
$selector .parsley-errors-list {color: $error}
$selector .parsley-required {color: $error}
$selector .parsley-custom-error-message {color: $error}
";
}
return $styles;
}
} }

View File

@ -112,6 +112,20 @@ class StylesTest extends \MailPoetUnitTest {
expect($styles)->contains('background-size: contain'); expect($styles)->contains('background-size: contain');
} }
public function testItShouldRenderErrorMessageColor() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['error_validation_color' => 'xxx'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('#prefix .mailpoet_validate_error {color: xxx}');
}
public function testItShouldRenderSuccessMessageColor() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['success_validation_color' => 'xxx'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('#prefix .mailpoet_validate_success {color: xxx}');
}
public function testItRendersWidthCssForBellowPost() { public function testItRendersWidthCssForBellowPost() {
$form = Fixtures::get('simple_form_body'); $form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red']; $form['settings'] = ['backgroundColor' => 'red'];