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

Customize scrollbar to fit the theme colors #5056

Merged
merged 2 commits into from
Nov 23, 2020
Merged

Customize scrollbar to fit the theme colors #5056

merged 2 commits into from
Nov 23, 2020

Conversation

infinite-persistence
Copy link
Contributor

Issue

Closes #4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme

Approach

The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers.

Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes.

Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.

I think this color works for both lbry.tv and Odysee (both light and dark on each platform).

@neb-b
Copy link

neb-b commented Nov 17, 2020

This looks great! I think this should only happen on windows/linux though.

@infinite-persistence
Copy link
Contributor Author

@seanyesmunt, ah yes, forgot to mention that I didn't test on mac.
Is there an easy way to not include _scrollbar.scss globally when mac is detected?

@infinite-persistence
Copy link
Contributor Author

@seanyesmunt. Ah, I found it ... in ui\index.jsx

@infinite-persistence
Copy link
Contributor Author

infinite-persistence commented Nov 18, 2020

@seanyesmunt Hm ... it didn't work. Was hoping to do something like the following, but import only works at the top level.
Is there an easy way to not include _scrollbar.scss globally when mac is detected?

// Import our app styles
// If a style is not necessary for the initial page load, it should be removed from `all.scss`
// and loaded dynamically in the component that consumes it
import 'scss/all.scss';

// Apply global scrollbar customization
const IS_MAC = process.platform === 'darwin';
if (!IS_MAC) {
  import 'scss/component/_scrollbar.scss';
}

## Issue
4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme

## Approach
The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers.

Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes.

Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.
The only downside to this new implementation is that the top-most (or right-most?) scrollbar won't get the customization. Any other sub-components (e.g. sidebar) will get the customization.

My guess is that the "top-most" scrollbar is above the `main-wrapper`. I'm not sure if we can (or should) add another className higher than App.

The impetus for the customization was the ugly sidebar anyway, so at least we covered that.
@infinite-persistence
Copy link
Contributor Author

infinite-persistence commented Nov 19, 2020

Update
Assuming I understood the change-request correctly, the second commit covers it. See commit message for details.

@neb-b
Copy link

neb-b commented Nov 23, 2020

Sorry I missed these messages. Was trying to get an app release out last week but have been having some build issues so this is going in too! Your solution looks great.

@neb-b neb-b merged commit 7fb7560 into master Nov 23, 2020
@neb-b neb-b deleted the ip-scrollbar-4727 branch November 23, 2020 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Sidebar's transient scrollbar doesn't fit in the Dark Theme
2 participants