-
-
Notifications
You must be signed in to change notification settings - Fork 100
/
StyleUpdateMenusPanel.js
50 lines (47 loc) · 1.48 KB
/
StyleUpdateMenusPanel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React from 'react';
import PropTypes from 'prop-types';
import {
ColorPicker,
FontSelector,
Numeric,
Radio,
PlotlySection,
UpdateMenuAccordion,
UpdateMenuButtons,
} from '../components';
const StyleUpdateMenusPanel = (props, {localize: _}) => (
<UpdateMenuAccordion>
<Radio
attr="visible"
options={[
{label: _('Show'), value: true},
{label: _('Hide'), value: false},
]}
/>
<PlotlySection name={_('Button Labels')}>
<UpdateMenuButtons attr="buttons" />
</PlotlySection>
<PlotlySection name={_('Background')}>
<ColorPicker label={_('Color')} attr="bgcolor" />
</PlotlySection>
<PlotlySection name={_('Font')}>
<FontSelector label={_('Typeface')} attr="font.family" />
<Numeric label={_('Size')} attr="font.size" />
<ColorPicker label={_('Color')} attr="font.color" />
</PlotlySection>
<PlotlySection name={_('Border')}>
<Numeric label={_('Width')} attr="borderwidth" />
<ColorPicker label={_('Color')} attr="bordercolor" />
</PlotlySection>
<PlotlySection name={_('Padding')}>
<Numeric label={_('Top')} attr="pad.t" units="px" />
<Numeric label={_('Bottom')} attr="pad.b" units="px" />
<Numeric label={_('Left')} attr="pad.l" units="px" />
<Numeric label={_('Right')} attr="pad.r" units="px" />
</PlotlySection>
</UpdateMenuAccordion>
);
StyleUpdateMenusPanel.contextTypes = {
localize: PropTypes.func,
};
export default StyleUpdateMenusPanel;