LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Limit scrollbar customization to: (1) web (2) linux/windows app

Browse source 
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.
This commit is contained in:
infiinte-persistence 2020-11-19 22:00:31 +08:00 • committed by Sean Yesmunt
parent c9831d1949
commit 7fb7560f75
4 changed files with 28 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/app/view.jsx
View file

@ -136,6 +136,11 @@ function App(props: Props) {
const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`); const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`);
const userId = user && user.id; const userId = user && user.id;
let useCustomScrollbar = true;
// @if TARGET='app'
useCustomScrollbar = !IS_MAC;
// @endif
let uri; let uri;
try { try {
const newpath = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#'))); const newpath = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#')));
@ -316,6 +321,7 @@ function App(props: Props) {
// @if TARGET='app' // @if TARGET='app'
[`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC, [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC,
// @endif // @endif
[`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
})} })}
ref={appRef} ref={appRef}
onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)} onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)}

1
ui/scss/all.scss
View file

@ -44,7 +44,6 @@
@import 'component/progress'; @import 'component/progress';
@import 'component/search'; @import 'component/search';
@import 'component/claim-search'; @import 'component/claim-search';
@import 'component/scrollbar';
@import 'component/section'; @import 'component/section';
@import 'component/share'; @import 'component/share';
@import 'component/snack-bar'; @import 'component/snack-bar';

22
ui/scss/component/_main.scss
View file

@ -234,3 +234,25 @@
margin-right: auto; margin-right: auto;
max-width: 32rem; max-width: 32rem;
} }
.main-wrapper--scrollbar {
// The W3C future standard; currently supported by Firefox only.
// It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future.
scrollbar-width: auto;
scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
}
.main-wrapper--scrollbar *::-webkit-scrollbar {
width: 12px;
}
.main-wrapper--scrollbar *::-webkit-scrollbar-track {
background: var(--color-scrollbar-track-bg);
}
.main-wrapper--scrollbar *::-webkit-scrollbar-thumb {
// Don't set 'border-radius' because Firefox's 'scrollbar-xx'
// standard currently doesn't support it. Stick with square
// scrollbar for all browsers.
background-color: var(--color-scrollbar-thumb-bg);
}

31
ui/scss/component/_scrollbar.scss
View file

@ -1,31 +0,0 @@
// ****************************************************************************
// webkit
// ****************************************************************************
// Currently supported by Chrome/Edge/Safari.
// Potentially deprecated in the future, but will most likely be
// handled by 'scrollbar-xx' down below when that happens.
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: var(--color-scrollbar-track-bg);
}
*::-webkit-scrollbar-thumb {
// Don't set 'border-radius' because Firefox's 'scrollbar-xx'
// standard currently doesn't support it. Stick with square
// scrollbar for all browsers.
background-color: var(--color-scrollbar-thumb-bg);
}
// ****************************************************************************
// W3C::scrollbar
// ****************************************************************************
// The W3C future standard; currently supported by Firefox only.
* {
scrollbar-width: auto;
scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
}