I’ve been wanting this one for months, so I gave it a try here:
I’m not sure how to keep it above expanded cells, let me know if you know how to fix that.
3 Likes
I think I’m finished messing with it.
Had to trim it down to prevent buggy states. String format was hard to stabilize, so it just keeps the format of the initial value, or takes an optional explicit format name.
1 Like
Nice work!
Observable does not allow notebook content to overlay system content (such as a code editor). This is partly a technical restriction, but it’s also a good idea from a security perspective: it makes it harder for user-generated notebook content to masquerade as part of the system user interface.
You could perhaps expand the color picker in-place rather than as an absolute-positioned hovering box? This would push down the content below (including a code editor) and ensure an unobstructed view of the color picker.
For the future, we’re also considering “trusted” UI components that are built-in and allowed to overlay the system UI. These would go through open-source code review.
1 Like
This is great.
One thing I would like to make (eventually) is a little “color list” view component which is exposed to other cells as a dictionary (JS object) of ‘name’ -> hex string, but which displays all of the colors next to the names in the cell display, possibly collapses to one line, possibly shows other information about the colors, and includes one or more color picker widgets to change the content of any selected choice.
I have a bunch of notebooks where I have just added a cell like colors = ({red: '#e00020, ...}) or whatever so that I can refer to colors.red etc. in other cells, and would like at some point to be able to experiment more easily with modifying the choices interactively and watching the results.
1 Like