Add divider height and width

[MAILPOET-2835]
This commit is contained in:
Pavel Dohnal
2020-04-28 15:19:52 +02:00
committed by Veljko V
parent c62be0e0e9
commit fd65928c96
2 changed files with 26 additions and 2 deletions

View File

@@ -29,14 +29,36 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
{ value: Style.Dotted, label: MailPoet.I18n.t('blockDividerStyleDotted') },
]}
/>
<RangeControl
label={MailPoet.I18n.t('blockDividerDividerHeight')}
value={attributes.dividerHeight}
min={1}
max={40}
allowReset
onChange={(dividerHeight) => {
setAttributes({
dividerHeight,
height: Math.max(dividerHeight, attributes.height),
});
}}
/>
<RangeControl
label={MailPoet.I18n.t('blockDividerDividerWidth')}
value={attributes.dividerWidth}
min={1}
max={100}
allowReset
onChange={(dividerWidth) => (setAttributes({ dividerWidth }))}
/>
</>
);
const dividerStyles = {} as React.CSSProperties;
if (attributes.type === Types.Divider) {
dividerStyles.borderTopStyle = attributes.style;
dividerStyles.height = 1;
dividerStyles.width = '100%';
dividerStyles.borderTopWidth = attributes.dividerHeight;
dividerStyles.height = attributes.dividerHeight;
dividerStyles.width = `${attributes.dividerWidth}%`;
}
return (

View File

@@ -165,6 +165,8 @@
'blockDividerStyleSolid': _x('Solid', 'Setting in the divider block'),
'blockDividerStyleDashed': _x('Dashed', 'Setting in the divider block'),
'blockDividerStyleDotted': _x('Dotted', 'Setting in the divider block'),
'blockDividerDividerHeight': _x(' Divider Height', 'Settings in the divider block'),
'blockDividerDividerWidth': _x(' Divider Width', 'Settings in the divider block'),
'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'),
'formPreviewOthersDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'),