Skip to content

numeric slider #346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 27, 2018
Merged

numeric slider #346

merged 5 commits into from
Feb 27, 2018

Conversation

nicolaskruchten
Copy link
Contributor

No description provided.

@nicolaskruchten
Copy link
Contributor Author

@aulneau do you think you could help me out with the CSS here please? Here's a side-by-side of old vs new... we don't have to get all the way to 'old' but partway would be nice :) I already copied the default styles and hacked them somewhat to get from huge/green to small/ grey ;)

image

export const NumericFraction = connectToContainer(UnconnectedNumericFraction, {
modifyPlotProps: numericFractionModifyPlotProps,
});

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, so this is my general control for when I want a slider instead of a standard numeric.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only if you want it to be expressed as a percentage! if your min is 2 and your max is 4 then 50% = 3 etc... if you want a slider from 2 to 3 you should use <Numeric showSlider ... >

@VeraZab
Copy link
Contributor

VeraZab commented Feb 23, 2018

looks good 💃 after stylings!

@nicolaskruchten
Copy link
Contributor Author

@aulneau (bump) ... do you know if you'd have any time this week to help with the CSS on this one? Once done this resolves #280 btw :)

@aulneau
Copy link
Contributor

aulneau commented Feb 26, 2018

@nicolaskruchten I can check this out tonight / tomorrow AM!

@@ -40,6 +40,7 @@
}
&__title {
width: 30%;
//flex-shrink:0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be enabled. The titles should all be the same width, but if I keep this on, certain tabs will escape the boundaries of the content area of the field. @nicolaskruchten @VeraZab what do you two think of changing these fields that have the radio buttons (3+) into a label on top, and then a full width field widget?

flex-shrink: 1
screen shot 2018-02-27 at 1 23 31 pm

flex-shrink: 0
screen shot 2018-02-27 at 1 23 41 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm OK with your proposal.

@nicolaskruchten
Copy link
Contributor Author

These look good except they're too tall... Ideally a numeric with a slider should be the same height as one with the arrows, because in some cases the UI can switch from one to the other and we don't want a vertical jump in that case...

image

@aulneau
Copy link
Contributor

aulneau commented Feb 27, 2018

Whoops, sorry. there was some default margins in there :)

should be good to go!

screen shot 2018-02-27 at 1 58 01 pm

@nicolaskruchten nicolaskruchten changed the title [WIP] numeric slider numeric slider Feb 27, 2018
@nicolaskruchten nicolaskruchten merged commit 572ac69 into master Feb 27, 2018
@nicolaskruchten nicolaskruchten deleted the slider branch February 27, 2018 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants