Elgato_dark/void
1
0
Fork 0
mirror of https://github.com/voideditor/void synced 2026-05-24 09:58:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

custom scrollbar

Browse source
This commit is contained in:
Mathew Pareles 2025-01-06 23:11:52 -08:00
parent 86346f1bf0
commit 5293095eb8
2 changed files with 95 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/vs/workbench/contrib/void/browser/media/void.css
View file

@ -71,3 +71,36 @@
color: #3b82f6;
cursor: pointer;
}
.void-scrollable-element *::-webkit-scrollbar {
width: 14px !important;
height: 14px !important;
}
.void-scrollable-element *::-webkit-scrollbar-track {
background: transparent !important;
}
.void-scrollable-element *::-webkit-scrollbar-thumb {
background-color: transparent !important;
border-radius: 0px !important;
}
.void-scrollable-element.show-scrollbar *::-webkit-scrollbar-thumb {
background-color: var(--vscode-scrollbarSlider-background) !important;
}
.void-scrollable-element *::-webkit-scrollbar-thumb:hover {
background-color: var(--vscode-scrollbarSlider-hoverBackground) !important;
}
.void-scrollable-element *::-webkit-scrollbar-thumb:active {
background-color: var(--vscode-scrollbarSlider-activeBackground) !important;
}
.void-scrollable-element *::-webkit-scrollbar-corner {
background-color: transparent !important;
}

62
src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
View file

@ -417,6 +417,63 @@ const ChatBubble = ({ chatMessage, isLoading }: {
const useScrollFade = (ref: React.MutableRefObject<HTMLDivElement | null>) => {
useEffect(() => {
if (!ref.current) return;
let fadeTimeout: NodeJS.Timeout | null = null;
const parent = ref.current;
const scrollElement = parent.querySelector('[class*="void-overflow-"]');
if (!scrollElement) return;
const onMouseEnter = () => {
parent.classList.add('show-scrollbar');
};
const onMouseLeave = () => {
if (fadeTimeout) {
clearTimeout(fadeTimeout);
}
fadeTimeout = setTimeout(() => {
parent.classList.remove('show-scrollbar');
}, 1000);
};
scrollElement.addEventListener('mouseenter', onMouseEnter);
scrollElement.addEventListener('mouseleave', onMouseLeave);
return () => {
scrollElement.removeEventListener('mouseenter', onMouseEnter);
scrollElement.removeEventListener('mouseleave', onMouseLeave);
if (fadeTimeout) {
clearTimeout(fadeTimeout);
}
};
}, [ref]);
};
const Test = ({ children, className = "", }: { children: React.ReactNode; className?: string; maxHeight?: string; maxWidth?: string; }) => {
const ref = useRef<HTMLDivElement | null>(null)
useScrollFade(ref)
return (
<div ref={ref}
className={`@@void-scrollable-element`}
>
<div
className='relative overflow-auto max-h-80 max-w-80 bg-blue-400'
>
{children}
</div>
</div>
);
};
export const SidebarChat = () => {
const inputBoxRef: React.MutableRefObject<InputBox | null> = useRef(null);
@ -579,6 +636,11 @@ export const SidebarChat = () => {
ref={sidebarRef}
className={`w-full h-full`}
>
<Test>
aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
</Test>
{/* thread selector */}
<div ref={historyRef}
className={`w-full h-auto mb-2 ${isHistoryOpen ? '' : 'hidden'} ring-2 ring-widget-shadow z-10`}