Button UI changes - Githubissues

microsoft / gather

Spit shine for Jupyter notebooks 🧽✨

https://microsoft.github.io/gather

MIT License

533 stars 38 forks source link

Button UI changes #17

Closed jasonsjiang closed 5 years ago

jasonsjiang commented 5 years ago

Moved button on top of cell to not get clipped in single/double line output cells and to not cover output

msftclas commented 5 years ago

All CLA requirements met.

andrewhead commented 5 years ago

The tabs for gather look awesome! Excited to merge it soon ^_^

There's a couple of cases that still have to be handled for the UI, specifically:

[x] The gather tab should still be visible when you hover over a truncated output (i.e. an output where "Enable Scrolling for Outputs" is enabled). Currently, it's hidden.
[x] The gather tab should always appear in the visible space of the notebook. Currently, it's right-aligned, which means it's invisible if overflows to the right.
[x] (Not critical) The gather tab should have the same appearance for both text outputs and HTML table outputs. Currently it's a bit shorter / more squashed for text outputs.

andrewhead commented 5 years ago

Also, I love the tab fade-in and fade-out. I think both fade-in and fade-out should be quicker (say, try ~100ms?), especially the fade-out as the tab might be occluding some source code the user wants to look at.

Meanwhile, make the tab conform the "flat" visual style of the rest of Jupyter Lab---for example, remove the thin black border from the tab. Do we want to add a small icon for gathering (e.g., an arrow like below) to the gather button?

noun_Left Up Arrow_61545

jasonsjiang commented 5 years ago

The button has been fixed for the overflow in collapsed outputs and for data frames, as well as the line height for html/text outputs!

andrewhead commented 5 years ago

@jasonsjiang Could you separate the augassign bug fix into a separate PR?

andrewhead commented 5 years ago

Hi @jasonsjiang! Thanks again for your hard work on this. I'm just now remembering that for most of the UI styling, we've been trying to stick to the PhosphorJS backend instead of jQuery---tmk the only place we use jQuery is for an AJAX call. Can you look through this code and let me know any place you think we must maintain jQuery? For the other places, let's pair up and refactor to use PhosphorJS

andrewhead commented 5 years ago

Moved to https://github.com/microsoft/gather/pull/29