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

Add border related settings to input style settings

Browse Source 
[MAILPOET-2599]
This commit is contained in:
Rostislav Wolny
2020-03-06 10:00:25 +01:00
committed by Veljko V
parent eadd6af544
commit af87ca3a7d
6 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
assets/js/src/form_editor/blocks/input_styles_settings.jsx
View File

@@ -5,6 +5,7 @@ import {
ColorPalette,
Panel,
PanelBody,
RangeControl,
ToggleControl,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
@@ -71,6 +72,40 @@ const InputStylesSettings = ({
checked={localStyles.bold || false}
onChange={partial(updateStyles, 'bold')}
/>
<RangeControl
label={MailPoet.I18n.t('formSettingsBorderSize')}
value={localStyles.borderSize}
min={0}
max={10}
allowReset
onChange={partial(updateStyles, 'borderSize')}
/>
<RangeControl
label={MailPoet.I18n.t('formSettingsBorderRadius')}
value={localStyles.borderRadius}
min={0}
max={40}
allowReset
onChange={partial(updateStyles, 'borderRadius')}
/>
<div>
<h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsBorderColor')}
{
localStyles.borderColor !== undefined
&& (
<ColorIndicator
colorValue={styles.borderColor}
/>
)
}
</h3>
<ColorPalette
value={localStyles.borderColor}
onChange={partial(updateStyles, 'borderColor')}
colors={settingsColors}
/>
</div>
</>
) : null}
</PanelBody>

9
assets/js/src/form_editor/store/blocks_to_form_body.jsx
View File

@@ -11,6 +11,15 @@ const mapBlockStyles = (styles) => {
if (has(styles, 'backgroundColor') && styles.backgroundColor) {
mappedStyles.background_color = styles.backgroundColor;
}
if (has(styles, 'borderSize') && styles.borderSize !== undefined) {
mappedStyles.border_size = styles.borderSize;
}
if (has(styles, 'borderRadius') && styles.borderRadius !== undefined) {
mappedStyles.border_radius = styles.borderRadius;
}
if (has(styles, 'borderColor') && styles.borderColor) {
mappedStyles.border_color = styles.borderColor;
}
return mappedStyles;
};

9
assets/js/src/form_editor/store/form_body_to_blocks.jsx
View File

@@ -42,6 +42,15 @@ const mapBlockStyles = (styles) => {
if (has(styles, 'background_color') && styles.background_color) {
mappedStyles.backgroundColor = styles.background_color;
}
if (has(styles, 'border_size') && styles.border_size !== undefined) {
mappedStyles.borderSize = parseInt(styles.border_size, 10);
}
if (has(styles, 'border_radius') && styles.border_radius !== undefined) {
mappedStyles.borderRadius = parseInt(styles.border_radius, 10);
}
if (has(styles, 'border_color') && styles.border_color) {
mappedStyles.borderColor = styles.border_color;
}
return mappedStyles;
};