SCSS and Legend Panel #54
Conversation
|
|
|
The API is interesting and worth discussing: <Section name={_('Positioning')}>
<SubPanel>
<Section name={_('Anchor Point')}>
<Info>
{_(
'The positioning inputs are relative to the ' +
'anchor points on the text box'
)}
</Info>
<Radio
attr="legend.xanchor"
options={[
{label: _('Left'), value: 'left'},
{label: _('Center'), value: 'center'},
{label: _('Right'), value: 'right'},
]}
/>
</Section>
</SubPanel>
<Numeric
label={_('X Position')}
step={0.01}
attr="legend.x"
postfix="px"
/>
</Section>
<Section name={_('Trace Order')}>
<Radio
attr="legend.traceorder"
options={[
{label: _('Normal'), value: 'normal'},
{label: _('Reversed'), value: 'reversed'},
]}
/>
</Section>You declare a cogmenu by specifying a SubPanel as any direct child of a Section. Section will elevate that child to the cogmenu position. Nesting SubPanels works as expected. |
|
Caveat: A Section with a cogmenu will always be visible even if all of its children are hidden and the cogmenu is empty. The more thorough way to avoid this problem would be to somehow query the content of the CogMenu and check its visibility but there isn't an easy way to do that... This same problem will occur with |
|
|
|
Right yes, and the icon is configurable so in some cases even if there is one menu it may not be a cog. |
|
|
|
|
|
|
|
(well until we release ;) ) |
|
Also |
| @@ -0,0 +1,59 @@ | |||
| .field { | |||
| Align-items: center; | |||
There was a problem hiding this comment.
yes good catch. Edited in my current Axes PR branch.
| @@ -47,6 +47,24 @@ describe('Section', () => { | |||
| ).toBe(false); | |||
| }); | |||
|
|
|||
| fit('is visible if it contains any non attr children', () => { | |||
There was a problem hiding this comment.
Do we want this behavior? Seems kinda like you wouldn't want <Info> to be enough to invoke display, or maybe sometimes you do but not always?
fit fit et al in all test files)
There was a problem hiding this comment.
yep I did catch that one. And yep we have the same test in the workspace. I'll make an issue for that right now.
There was a problem hiding this comment.
Hmmm yeh I could see skipping <Info> actually. But not <MenuPanel>? Unless you interrogate the <Section>s inside <MenuPanel> ... but that would take some serious gymnastics...
There was a problem hiding this comment.
Ah right, that's your caveat above. It might be worth thinking a bit about whether there really are any cases where only the <MenuPanel> exists to make a <Section> visible. If that's really "advanced settings" we might be able to argue that if none of the basics for that section exist, there's never a case where the advanced would be needed?
I'm not sure if any similar argument works for <Panel>. Would be worthwhile looking for a concrete example.
There was a problem hiding this comment.
True I'll add this to an issue and deal with it once I have some breathing room
|
Love the massive 🔪 in this PR 🎉 |
|
Awesome thanks again for the reviews! I'll topple these dominoes tomorrow and continue working on Axes as that is the major feature hurdle/deadline. Once that is complete I'll revisit many of the suggestions you have brought forth. |
closes #23 #24 and #27
Although this PR closes multiple legend items they are a fairly straightforward product of all the SCSS handling commits. We start migrating workspace scss over to react-plotly.js-editor. SCSS folder structure and naming schemes are altered to comply with BEM conventions and match the component hierarchy in the JS source.
A bunch of widgets are deleted. We will only migrate what is strictly necessary.
Colorpicker and SubPanel cogmenu features are implemented on top of migrated SCSS.