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

Enable horizontal scrolling for toolbars #8417

Merged
merged 3 commits into from May 25, 2020

Conversation

jtpio
Copy link
Member

@jtpio jtpio commented May 12, 2020

References

This is a small step in the direction of #3275, to make JupyterLab more accessible on mobile.

More precisely about the notebook toolbar as mentioned in this comment: #3275 (comment)

The idea is to be able to reach all the buttons of the toolbar on a mobile device (see screencast below).

Code changes

CSS change to enable scrolling for the toolbars.

User-facing changes

Before

See #3275 (comment).

Screen Shot 2020-05-12 at 20 47 49

After

In the dev tools in mobile device mode:

toolbar-scroll-firefox

On mobile (after scrolling to the right):

image

Backwards-incompatible changes

None

@jupyterlab-dev-mode
Copy link

jupyterlab-dev-mode bot commented May 12, 2020

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link: Binder

@jtpio
Copy link
Member Author

jtpio commented May 12, 2020

We might want to tweak this a bit more, as this is what it looks like in the regular desktop mode:

Before

resize-no-scroll-toolbar

After

resize-with-scroll-toolbar

@github-actions github-actions bot added tag:Design System CSS If a PR is editing any CSS files please add this tag for design team to review. pkg:apputils tag:CSS For general CSS related issues and pecadilloes labels May 12, 2020
@telamonian
Copy link
Member

telamonian commented May 12, 2020

I can add some css to nice-en up this scrollbar

@jtpio
Copy link
Member Author

jtpio commented May 12, 2020

Having the scrollbar just below the toolbar would work great I think (visually speaking).

@telamonian
Copy link
Member

telamonian commented May 13, 2020

The scrollbar is now extra thin and only appears on hover. Currently it looks better in webkit browsers (Chrome and Safari):

toolbar_scrollbar_chrome

than it does in Firefox:

toolbar_scrollbar_firefox

@jtpio Let me know how the latest styling looks in mobile, and then we'll figure out how to refine it from there

@jtpio
Copy link
Member Author

jtpio commented May 13, 2020

Really nice, thanks @telamonian!

On mobile scrollbars are usually very small, and auto-hide after scrolling.

By the way this can be tested quickly by opening the Binder link above on a mobile device: https://mybinder.org/v2/gh/jtpio/jupyterlab/scroll-toolbar?urlpath=lab-dev

@jtpio
Copy link
Member Author

jtpio commented May 13, 2020

Also, the scrollbar looks a bit thinner on my Firefox (Dev Edition 77.0b5):

resize-scrollbar-firefox

@telamonian
Copy link
Member

telamonian commented May 13, 2020

That's less bad than how it looks in my Firefox 76.0.1. It's still maddening that Firefox only lets you specify scrollbar-width: thin and not an actual width, but at least in Firefox 77 it looks good enough. I can live with it.

Although it looks like the color of the scrollbar track is wrong in your gif? It's supposed to be transparent, and so match the background of the containing div

@jtpio
Copy link
Member Author

jtpio commented May 13, 2020

Well, they look quite similar between Chrome and Firefox:

image

Only a bit thicker on Firefox, but the transparency / color seems to be on par.

@jtpio
Copy link
Member Author

jtpio commented May 13, 2020

That's for the dark theme. For the light theme:

image

@vidartf
Copy link
Member

vidartf commented May 14, 2020

Just as an input: For toolbars etc, I would normally expect arrows to pop up on the right/left as needed (< and >), but as those tend to be hard to use efficiently, this is probably better. Maybe a ... to indicate that there is content that had been cut-off?

Also: Does this respect the "theme scrollbar" setting? I'm unsure what is the expected behavior when this is set to false.

@jtpio
Copy link
Member Author

jtpio commented May 14, 2020

but as those tend to be hard to use efficiently, this is probably better.

Exactly. On mobile swipe gestures tend to be more natural.

Copy link
Member

@blink1073 blink1073 left a comment

Thanks!

@blink1073 blink1073 merged commit b62d4fd into jupyterlab:master May 25, 2020
40 checks passed
@jtpio jtpio deleted the scroll-toolbar branch May 25, 2020
saulshanabrook pushed a commit that referenced this issue Jun 25, 2020
Enable horizontal scrolling for toolbars
@github-actions github-actions bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Feb 9, 2021
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 9, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
pkg:application pkg:apputils status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. tag:CSS For general CSS related issues and pecadilloes tag:Design and UX tag:Design System CSS If a PR is editing any CSS files please add this tag for design team to review. tag:Feature Parity tag:Mobile
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants