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

Improve styling of styles settings panel

Browse Source 
[MAILPOET-2600]
This commit is contained in:
Pavel Dohnal
2020-02-26 11:05:11 +01:00
committed by Jack Kitterhing
parent d83975dc64
commit b49ce7d4e4
2 changed files with 66 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/src/components/formEditor/components/_sidebar.scss
View File

@@ -86,6 +86,20 @@ $gutenberg-control-border-color-focus: #007cba;
} }
} }
.mailpoet-styles-settings {
display: grid;
grid-auto-flow: row;
grid-row-gap: 30px;
}
.mailpoet-styles-settings-heading {
font-size: 15px;
.component-color-indicator {
vertical-align: text-bottom;
}
}
.CodeMirror { .CodeMirror {
border: 1px solid #eee; border: 1px solid #eee;
} }

99
assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
View File

@@ -46,55 +46,60 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
); );
return ( return (
<Panel> <Panel>
<PanelBody title={MailPoet.I18n.t('formSettingsStyles')} opened={isOpened} onToggle={onToggle}> <PanelBody
title={MailPoet.I18n.t('formSettingsStyles')}
opened={isOpened}
onToggle={onToggle}
>
<div className="mailpoet-styles-settings">
<div>
<h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
{
settings.backgroundColor !== undefined
&& (
<ColorIndicator
colorValue={settings.backgroundColor}
/>
)
}
</h3>
<ColorPalette
value={settings.backgroundColor}
onChange={setBackgroundColor}
colors={settingsColors}
/>
</div>
<div className="block-editor-panel-color-gradient-settings components-base-control"> <div>
<span className="components-base-control__label"> <h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesBackgroundColor')} {MailPoet.I18n.t('formSettingsStylesFontColor')}
{ {
settings.backgroundColor !== undefined settings.fontColor !== undefined
&& ( && (
<ColorIndicator <ColorIndicator
colorValue={settings.backgroundColor} colorValue={settings.fontColor}
/> />
) )
} }
</span> </h3>
<ColorPalette <ColorPalette
value={settings.backgroundColor} value={settings.fontColor}
onChange={setBackgroundColor} onChange={setFontColor}
colors={settingsColors} colors={settingsColors}
/> />
</div> </div>
<div className="block-editor-panel-color-gradient-settings components-base-control"> <div>
<span className="components-base-control__label"> <h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesFontColor')} {MailPoet.I18n.t('formSettingsStylesFontSize')}
{ </h3>
settings.fontColor !== undefined <FontSizePicker
&& ( value={settings.fontSize}
<ColorIndicator onChange={setFontSize}
colorValue={settings.fontColor} fontSizes={fontSizes}
/> />
) </div>
}
</span>
<ColorPalette
value={settings.fontColor}
onChange={setFontColor}
colors={settingsColors}
/>
</div>
<div className="components-base-control">
<span className="components-base-control__label">
{MailPoet.I18n.t('formSettingsStylesFontSize')}
</span>
<FontSizePicker
value={settings.fontSize}
onChange={setFontSize}
fontSizes={fontSizes}
/>
</div> </div>
</PanelBody> </PanelBody>
</Panel> </Panel>