Skip to content

Commit ec805a3

Browse files
dmt0dmt0
authored
Merge pull request #694 from plotly/panel_tweaks
Panel tweaks
2 parents b9588f2 + b7f9741 commit ec805a3

File tree

3 files changed

+94
-35
lines changed

3 files changed

+94
-35
lines changed

‎src/components/containers/UpdateMenuAccordion.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,12 @@ class UpdateMenuAccordion extends Component {
2121
dropdown: _('Dropdown'),
2222
buttons: _('Buttons'),
2323
};
24-
const updateMenuType =
25-
localizedType[upd.type] || localizedType.dropdown;
26-
const activeElementLabel = upd.buttons.filter(
27-
b => b._index === upd.active
28-
)[0].label;
24+
const menuType = localizedType[upd.type] || localizedType.dropdown;
25+
const activeBtn = upd.buttons.filter(b => b._index === upd.active)[0];
26+
const foldName = menuType + (activeBtn ? ': ' + activeBtn.label : '');
2927

3028
return (
31-
<UpdateMenuFold
32-
key={i}
33-
updateMenuIndex={i}
34-
name={updateMenuType + ': ' + activeElementLabel}
35-
>
29+
<UpdateMenuFold key={i} updateMenuIndex={i} name={foldName}>
3630
{children}
3731
</UpdateMenuFold>
3832
);

‎src/default_panels/StyleSlidersPanel.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Numeric,
77
Radio,
88
PlotlySection,
9+
Dropdown,
910
SliderAccordion,
1011
} from '../components';
1112

@@ -31,6 +32,41 @@ const StyleSlidersPanel = (props, {localize: _}) => (
3132
<Numeric label={_('Size')} attr="font.size" />
3233
<ColorPicker label={_('Color')} attr="font.color" />
3334
</PlotlySection>
35+
<PlotlySection name={_('Length')} attr={'len'}>
36+
<Numeric label={_('Length')} attr={'len'} step={0.02} />
37+
<Dropdown
38+
label={_('Length Mode')}
39+
attr={'lenmode'}
40+
options={[
41+
{label: _('Fraction of canvas'), value: 'fraction'},
42+
{label: _('Pixels'), value: 'pixels'},
43+
]}
44+
/>
45+
</PlotlySection>
46+
<PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
47+
<Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
48+
<Radio
49+
label={_('Anchor')}
50+
attr={'xanchor'}
51+
options={[
52+
{label: _('Left'), value: 'left'},
53+
{label: _('Center'), value: 'center'},
54+
{label: _('Right'), value: 'right'},
55+
]}
56+
/>
57+
</PlotlySection>
58+
<PlotlySection name={_('Vertical Positioning')} attr={'y'}>
59+
<Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
60+
<Radio
61+
label={_('Anchor')}
62+
attr={'yanchor'}
63+
options={[
64+
{label: _('Top'), value: 'top'},
65+
{label: _('Middle'), value: 'middle'},
66+
{label: _('Bottom'), value: 'bottom'},
67+
]}
68+
/>
69+
</PlotlySection>
3470
<PlotlySection name={_('Padding')}>
3571
<Numeric label={_('Top')} attr="pad.t" units="px" />
3672
<Numeric label={_('Bottom')} attr="pad.b" units="px" />
@@ -39,7 +75,7 @@ const StyleSlidersPanel = (props, {localize: _}) => (
3975
</PlotlySection>
4076
<PlotlySection name={_('Ticks')}>
4177
<ColorPicker label={_('Color')} attr="tickcolor" />
42-
<Numeric label={_('Legth')} attr="ticklen" />
78+
<Numeric label={_('Length')} attr="ticklen" />
4379
<Numeric label={_('Width')} attr="tickwidth" />
4480
</PlotlySection>
4581
</SliderAccordion>

‎src/default_panels/StyleUpdateMenusPanel.js‎

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,71 @@ import {
44
ColorPicker,
55
FontSelector,
66
Numeric,
7-
Radio,
87
PlotlySection,
98
UpdateMenuAccordion,
109
UpdateMenuButtons,
10+
VisibilitySelect,
11+
Radio,
1112
} from '../components';
1213

1314
const StyleUpdateMenusPanel = (props, {localize: _}) => (
1415
<UpdateMenuAccordion>
15-
<Radio
16+
<VisibilitySelect
1617
attr="visible"
1718
options={[
1819
{label: _('Show'), value: true},
1920
{label: _('Hide'), value: false},
2021
]}
21-
/>
22-
<PlotlySection name={_('Button Labels')}>
23-
<UpdateMenuButtons attr="buttons" />
24-
</PlotlySection>
25-
<PlotlySection name={_('Background')}>
26-
<ColorPicker label={_('Color')} attr="bgcolor" />
27-
</PlotlySection>
28-
<PlotlySection name={_('Font')}>
29-
<FontSelector label={_('Typeface')} attr="font.family" />
30-
<Numeric label={_('Size')} attr="font.size" />
31-
<ColorPicker label={_('Color')} attr="font.color" />
32-
</PlotlySection>
33-
<PlotlySection name={_('Border')}>
34-
<Numeric label={_('Width')} attr="borderwidth" />
35-
<ColorPicker label={_('Color')} attr="bordercolor" />
36-
</PlotlySection>
37-
<PlotlySection name={_('Padding')}>
38-
<Numeric label={_('Top')} attr="pad.t" units="px" />
39-
<Numeric label={_('Bottom')} attr="pad.b" units="px" />
40-
<Numeric label={_('Left')} attr="pad.l" units="px" />
41-
<Numeric label={_('Right')} attr="pad.r" units="px" />
42-
</PlotlySection>
22+
showOn={true}
23+
>
24+
<PlotlySection name={_('Button Labels')}>
25+
<UpdateMenuButtons attr="buttons" />
26+
</PlotlySection>
27+
<PlotlySection name={_('Background')}>
28+
<ColorPicker label={_('Color')} attr="bgcolor" />
29+
</PlotlySection>
30+
<PlotlySection name={_('Font')}>
31+
<FontSelector label={_('Typeface')} attr="font.family" />
32+
<Numeric label={_('Size')} attr="font.size" />
33+
<ColorPicker label={_('Color')} attr="font.color" />
34+
</PlotlySection>
35+
<PlotlySection name={_('Border')}>
36+
<Numeric label={_('Width')} attr="borderwidth" />
37+
<ColorPicker label={_('Color')} attr="bordercolor" />
38+
</PlotlySection>
39+
40+
<PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
41+
<Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
42+
<Radio
43+
label={_('Anchor')}
44+
attr={'xanchor'}
45+
options={[
46+
{label: _('Left'), value: 'left'},
47+
{label: _('Center'), value: 'center'},
48+
{label: _('Right'), value: 'right'},
49+
]}
50+
/>
51+
</PlotlySection>
52+
<PlotlySection name={_('Vertical Positioning')} attr={'y'}>
53+
<Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
54+
<Radio
55+
label={_('Anchor')}
56+
attr={'yanchor'}
57+
options={[
58+
{label: _('Top'), value: 'top'},
59+
{label: _('Middle'), value: 'middle'},
60+
{label: _('Bottom'), value: 'bottom'},
61+
]}
62+
/>
63+
</PlotlySection>
64+
65+
<PlotlySection name={_('Padding')}>
66+
<Numeric label={_('Top')} attr="pad.t" units="px" />
67+
<Numeric label={_('Bottom')} attr="pad.b" units="px" />
68+
<Numeric label={_('Left')} attr="pad.l" units="px" />
69+
<Numeric label={_('Right')} attr="pad.r" units="px" />
70+
</PlotlySection>
71+
</VisibilitySelect>
4372
</UpdateMenuAccordion>
4473
);
4574

0 commit comments

Comments
 (0)