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;
} }

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

@@ -46,10 +46,14 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
); );
return ( return (
<Panel> <Panel>
<PanelBody title={MailPoet.I18n.t('formSettingsStyles')} opened={isOpened} onToggle={onToggle}> <PanelBody
title={MailPoet.I18n.t('formSettingsStyles')}
<div className="block-editor-panel-color-gradient-settings components-base-control"> opened={isOpened}
<span className="components-base-control__label"> onToggle={onToggle}
>
<div className="mailpoet-styles-settings">
<div>
<h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesBackgroundColor')} {MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
{ {
settings.backgroundColor !== undefined settings.backgroundColor !== undefined
@@ -59,7 +63,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
/> />
) )
} }
</span> </h3>
<ColorPalette <ColorPalette
value={settings.backgroundColor} value={settings.backgroundColor}
onChange={setBackgroundColor} onChange={setBackgroundColor}
@@ -67,8 +71,8 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
/> />
</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('formSettingsStylesFontColor')}
{ {
settings.fontColor !== undefined settings.fontColor !== undefined
@@ -78,7 +82,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
/> />
) )
} }
</span> </h3>
<ColorPalette <ColorPalette
value={settings.fontColor} value={settings.fontColor}
onChange={setFontColor} onChange={setFontColor}
@@ -86,16 +90,17 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
/> />
</div> </div>
<div className="components-base-control"> <div>
<span className="components-base-control__label"> <h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesFontSize')} {MailPoet.I18n.t('formSettingsStylesFontSize')}
</span> </h3>
<FontSizePicker <FontSizePicker
value={settings.fontSize} value={settings.fontSize}
onChange={setFontSize} onChange={setFontSize}
fontSizes={fontSizes} fontSizes={fontSizes}
/> />
</div> </div>
</div>
</PanelBody> </PanelBody>
</Panel> </Panel>
); );