-
-
Notifications
You must be signed in to change notification settings - Fork 100
/
StyleUpdateMenusPanel.js
79 lines (74 loc) · 2.44 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React from 'react';
import PropTypes from 'prop-types';
import {
ColorPicker,
FontSelector,
Numeric,
PlotlySection,
UpdateMenuAccordion,
UpdateMenuButtons,
VisibilitySelect,
Radio,
} from '../components';
const StyleUpdateMenusPanel = (props, {localize: _}) => (
<UpdateMenuAccordion>
<VisibilitySelect
attr="visible"
options={[
{label: _('Show'), value: true},
{label: _('Hide'), value: false},
]}
showOn={true}
>
<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={_('Horizontal Positioning')} attr={'x'}>
<Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
<Radio
label={_('Anchor')}
attr={'xanchor'}
options={[
{label: _('Left'), value: 'left'},
{label: _('Center'), value: 'center'},
{label: _('Right'), value: 'right'},
]}
/>
</PlotlySection>
<PlotlySection name={_('Vertical Positioning')} attr={'y'}>
<Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
<Radio
label={_('Anchor')}
attr={'yanchor'}
options={[
{label: _('Top'), value: 'top'},
{label: _('Middle'), value: 'middle'},
{label: _('Bottom'), value: 'bottom'},
]}
/>
</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>
</VisibilitySelect>
</UpdateMenuAccordion>
);
StyleUpdateMenusPanel.contextTypes = {
localize: PropTypes.func,
};
export default StyleUpdateMenusPanel;