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.

Sign up for GitHub

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

Jump to bottom

ENH: Make scroll bar style more accessible and noticeable #776

Merged
merged 2 commits into from
Jul 1, 2022
Merged

ENH: Make scroll bar style more accessible and noticeable #776

merged 2 commits into from
Jul 1, 2022

Conversation

choldgraf
Copy link
Collaborator

@choldgraf choldgraf commented Jun 30, 2022 •
edited

This makes a few improvements to the scroll bar, to address some of the concerns in #775 . Here's a summary:

  • Width is a bit higher
  • Scrollbars are always visible, but dimmed for most UI elements
  • Hovering will make them have stronger color
  • This doesn't apply to the main body, which is always visible
  • We now use variables to control the color
  • I also noticed that the on-surface color on light theme had a slight yellow tint to it, rather than just following the shading gradient from light to dark (which is what we do on the dark theme). So this changes that color's default value...happy to discuss that one if there's a rationale for wanting to use yellow

Preview:

chrome_YLNTprJFb8

closes #775

@choldgraf choldgraf changed the title Fix scroll bar style Fix scroll bar style to be more accessible Jul 1, 2022
@choldgraf choldgraf changed the title Fix scroll bar style to be more accessible Make scroll bar style more accessible and noticeable Jul 1, 2022
tupui
tupui reviewed Jul 1, 2022
View reviewed changes
Copy link
Contributor

@tupui tupui left a comment

Choose a reason for hiding this comment

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

Good improvement 👍

Why not using the default sizes from the browser? It seems to be roughly the width of the pointer which seems good for grabbing.

Also I would dim the main one as well. I find it a bit distracting otherwise.

@choldgraf
Copy link
Collaborator Author

I made the scrollbars a little bit wider to be more noticeable / clickable. I'm hesitant to use the default widths because they are much wider and (IMO) more distracting. I'd prefer to keep this PR towards an iterative improvement rather than a reversion back to default behavior if possible.

I tried to get the right scrollbar to have the same hover behavior, but I couldn't figure it out because it's attached to <body>, and that is always being hovered over :-/

@seberg
Copy link

seberg commented Jul 1, 2022

This looks much easier on first sight!

I sometimes use epiphany-browser, what it does by default (maybe specific to epiphany), is to have a fairly narrow (maybe a bit wider then the current). But when you come close enough to grab, it expands (rather than hides) the scroll-bar to normal siz (with a bit of alpha, not that it matters).

But I think this is good.

12rambau
12rambau approved these changes Jul 1, 2022
View reviewed changes
Copy link
Collaborator

@12rambau 12rambau left a comment

Choose a reason for hiding this comment

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

the "on-surface" color was IMO not super nice but that was a legacy color from the sidebars directive. I'm happy to see it moving towards a more grey color.

I really like the color effect that make it much easier to grab

@choldgraf
Copy link
Collaborator Author

OK thanks for the feedback and reviews all! We have two 👍 so I'll merge this in and we can iterate if folks have more suggestions!

@choldgraf choldgraf changed the title Make scroll bar style more accessible and noticeable ENH: Make scroll bar style more accessible and noticeable Jul 1, 2022
@choldgraf choldgraf merged commit 4791bd8 into pydata:main Jul 1, 2022
@choldgraf choldgraf deleted the fix-search branch July 1, 2022 19:00
@jarrodmillman jarrodmillman added this to the 0.10 milestone Jul 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tupui tupui tupui left review comments

@jarrodmillman jarrodmillman jarrodmillman approved these changes

@12rambau 12rambau 12rambau approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
0.10
Development

Successfully merging this pull request may close these issues.

Improve scroll bar UX and accessibility
5 participants
@choldgraf @seberg @jarrodmillman @12rambau @tupui