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 {
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 (
<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">
<span className="components-base-control__label">
{MailPoet.I18n.t('formSettingsStylesBackgroundColor')}
{
settings.backgroundColor !== undefined
&& (
<ColorIndicator
colorValue={settings.backgroundColor}
/>
)
}
</span>
<ColorPalette
value={settings.backgroundColor}
onChange={setBackgroundColor}
colors={settingsColors}
/>
</div>
<div>
<h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesFontColor')}
{
settings.fontColor !== undefined
&& (
<ColorIndicator
colorValue={settings.fontColor}
/>
)
}
</h3>
<ColorPalette
value={settings.fontColor}
onChange={setFontColor}
colors={settingsColors}
/>
</div>
<div className="block-editor-panel-color-gradient-settings components-base-control">
<span className="components-base-control__label">
{MailPoet.I18n.t('formSettingsStylesFontColor')}
{
settings.fontColor !== undefined
&& (
<ColorIndicator
colorValue={settings.fontColor}
/>
)
}
</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>
<h3 className="mailpoet-styles-settings-heading">
{MailPoet.I18n.t('formSettingsStylesFontSize')}
</h3>
<FontSizePicker
value={settings.fontSize}
onChange={setFontSize}
fontSizes={fontSizes}
/>
</div>
</div>
</PanelBody>
</Panel>