Skip to content

Make scrollbar styling consistent#174

Merged
dsmmcken merged 5 commits intomainfrom
dmckenzie_scrollbars
Sep 3, 2021
Merged

Make scrollbar styling consistent#174
dsmmcken merged 5 commits intomainfrom
dmckenzie_scrollbars

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

@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