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

Make scrollbar styling consistent #174

Merged
merged 5 commits into from
Sep 3, 2021
Merged

Make scrollbar styling consistent #174

merged 5 commits into from
Sep 3, 2021

Conversation

dsmmcken
Copy link
Contributor

This change updates scrollbars (monaco, grid, native) to all look similar. Since we can't control the monaco scrollbar styling, we instead match it. This style should look better for adding "selection-ticks to grid scrollbars" eventually anyways.

Monaco:

  • Unchanged

Native:

  • Changes native scroll bars in blink/webkit to be styled similar monaco scrollbars
  • Adds a light scrollbar variant for areas in the app that use a light bg
  • Remove explicitly setting colors in firefox, in favor of just 'auto'

Grid:

  • Changes grid scroll bar styling to have just an inner casing, rather than both sides
  • Makes scroll thumb square instead of rounded to match
  • Make it slight wider by default
  • Adjusts colors

image
(left: monaco, bottom-right: grid, top-right: native)

@dsmmcken dsmmcken added the enhancement New feature or request label Aug 31, 2021
@dsmmcken dsmmcken requested a review from mofojed August 31, 2021 18:35
@dsmmcken dsmmcken self-assigned this Aug 31, 2021
Copy link
Member

@mofojed mofojed left a comment

Choose a reason for hiding this comment

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

I think you want the colours to be the same at least between native and grid? Right now they're all different, in the idle, hover, or dragging stage.

Also you can customize the monaco scroll bar a bit: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorscrollbaroptions.html
and some colour options:
https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors

packages/components/src/BaseStyleSheet.scss Outdated Show resolved Hide resolved
packages/grid/src/GridRenderer.js Show resolved Hide resolved
@dsmmcken dsmmcken requested a review from mofojed September 2, 2021 22:05
@dsmmcken dsmmcken merged commit 7f558e2 into main Sep 3, 2021
@dsmmcken dsmmcken deleted the dmckenzie_scrollbars branch September 3, 2021 13:43
mofojed added a commit to mofojed/web-client-ui that referenced this pull request Sep 13, 2021
* `code-studio`, `console`, `file-explorer`
  * [deephaven#186](deephaven#186) Enable Scala syntax highlighting ([@nbauernfeind](https://github.com/nbauernfeind))
* `components`, `grid`, `iris-grid`
  * [deephaven#174](deephaven#174) Make scrollbar styling consistent ([@dsmmcken](https://github.com/dsmmcken))

* `console`, `iris-grid`
  * [deephaven#179](deephaven#179) Update monaco-editor to 0.27.0 ([@mofojed](https://github.com/mofojed))

* `code-studio`
  * [deephaven#187](deephaven#187) Fix proxy ([@mofojed](https://github.com/mofojed))

- Don ([@dsmmcken](https://github.com/dsmmcken))
- Mike Bender ([@mofojed](https://github.com/mofojed))
- Nate Bauernfeind ([@nbauernfeind](https://github.com/nbauernfeind))
@mofojed mofojed mentioned this pull request Sep 13, 2021
mofojed added a commit that referenced this pull request Sep 13, 2021
* `code-studio`, `console`, `file-explorer`
  * [#186](#186) Enable Scala syntax highlighting ([@nbauernfeind](https://github.com/nbauernfeind))
* `components`, `grid`, `iris-grid`
  * [#174](#174) Make scrollbar styling consistent ([@dsmmcken](https://github.com/dsmmcken))

* `console`, `iris-grid`
  * [#179](#179) Update monaco-editor to 0.27.0 ([@mofojed](https://github.com/mofojed))

* `code-studio`
  * [#187](#187) Fix proxy ([@mofojed](https://github.com/mofojed))

- Don ([@dsmmcken](https://github.com/dsmmcken))
- Mike Bender ([@mofojed](https://github.com/mofojed))
- Nate Bauernfeind ([@nbauernfeind](https://github.com/nbauernfeind))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants