Skip to content
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

Add support for color input #410

Merged
merged 1 commit into from
Jun 28, 2021

Conversation

mcintyre94
Copy link
Contributor

Ref: #321

This PR adds a new input type Color. This is rendered using <input type="color"> and stores values of the form #ea1f2d

  • I needed to special-case the input CSS a little bit. The padding-top + padding-bottom is removed from color inputs because it was reducing the amount of space where the color is visible to be too narrow. A width is added because without this it was matching the width of its label. I guess this is slightly odd default sizing of the HTML input itself, but I'm not super familiar with it!
  • I've introduced a function html_input_type to determine the value of the <input> type attribute. For the existing :number and :url types I've set this to use the HTML number and url types respectively. Let me know if this isn't desirable and I can change any of them back to text.

This works really nicely as a reactive input with VegaLite graphs:

livebook-color-reactive.mov

@mcintyre94 mcintyre94 force-pushed the cm-color-input branch 2 times, most recently from 4fc880a to d12c70a Compare June 27, 2021 17:23
This renders as input type=color, and stores a 6 digit hex color with leading hash
Copy link
Member

@jonatanklosko jonatanklosko left a comment

Choose a reason for hiding this comment

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

Perfect, thanks!

@jonatanklosko jonatanklosko merged commit 4241866 into livebook-dev:main Jun 28, 2021
@jonatanklosko jonatanklosko mentioned this pull request Jun 28, 2021
9 tasks
@mcintyre94 mcintyre94 deleted the cm-color-input branch June 28, 2021 18:54
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