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

scrollbar settings

Browse source
This commit is contained in:
Andrew Pareles 2025-01-08 19:32:19 -08:00
parent f2f9b6ccca
commit 20e1b287f8
2 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
View file

@ -11,6 +11,7 @@ import { VoidCheckBox, VoidInputBox, VoidSelectBox, VoidSwitch } from '../util/i
import { useAccessor, useIsDark, useRefreshModelListener, useRefreshModelState, useSettingsState } from '../util/services.js'
import { X, RefreshCw, Loader2, Check, MoveRight } from 'lucide-react'
import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js'
import { useScrollbarStyles } from '../util/useScrollbarStyles.js'
const SubtleButton = ({ onClick, text, icon, disabled }: { onClick: () => void, text: string, icon: React.ReactNode, disabled: boolean }) => {
@ -464,8 +465,11 @@ export const Settings = () => {
const [tab, setTab] = useState<TabName>('models')
return <div className={`@@void-scope ${isDark ? 'dark' : ''}`}>
<div className='w-full h-full px-10 py-10 select-none'>
const containerRef = useRef<HTMLDivElement | null>(null)
useScrollbarStyles(containerRef)
return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ height: '100%', width: '100%' }}>
<div ref={containerRef} className='overflow-y-auto w-full h-full px-10 py-10 select-none'>
<div className='max-w-5xl mx-auto'>

34
src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
View file

@ -26,7 +26,6 @@ import { ContextKeyExpr } from '../../../../platform/contextkey/common/contextke
import { mountVoidSettings } from './react/out/void-settings-tsx/index.js'
import { Codicon } from '../../../../base/common/codicons.js';
import { IDisposable } from '../../../../base/common/lifecycle.js';
import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
// refer to preferences.contribution.ts keybindings editor
@ -63,7 +62,7 @@ class VoidSettingsInput extends EditorInput {
class VoidSettingsPane extends EditorPane {
static readonly ID = 'workbench.test.myCustomPane';
private _scrollbar: DomScrollableElement | undefined;
// private _scrollbar: DomScrollableElement | undefined;
constructor(
group: IEditorGroup,
@ -79,32 +78,31 @@ class VoidSettingsPane extends EditorPane {
parent.style.height = '100%';
parent.style.width = '100%';
const scrollableContent = document.createElement('div');
scrollableContent.style.height = '100%';
scrollableContent.style.width = '100%';
const settingsElt = document.createElement('div');
settingsElt.style.height = '100%';
settingsElt.style.width = '100%';
this._scrollbar = this._register(new DomScrollableElement(scrollableContent, {}));
parent.appendChild(this._scrollbar.getDomNode());
this._scrollbar.scanDomNode();
parent.appendChild(settingsElt);
// this._scrollbar = this._register(new DomScrollableElement(scrollableContent, {}));
// parent.appendChild(this._scrollbar.getDomNode());
// this._scrollbar.scanDomNode();
// Mount React into the scrollable content
this.instantiationService.invokeFunction(accessor => {
const disposables: IDisposable[] | undefined = mountVoidSettings(scrollableContent, accessor);
const disposables: IDisposable[] | undefined = mountVoidSettings(settingsElt, accessor);
setTimeout(() => { // this is a complete hack and I don't really understand how scrollbar works here
this._scrollbar?.scanDomNode();
}, 1000)
// setTimeout(() => { // this is a complete hack and I don't really understand how scrollbar works here
// this._scrollbar?.scanDomNode();
// }, 1000)
disposables?.forEach(d => this._register(d));
});
}
layout(dimension: Dimension): void {
if (!this._scrollbar) return;
this._scrollbar.getDomNode().style.height = `${dimension.height}px`;
this._scrollbar.getDomNode().style.width = `${dimension.width}px`;
this._scrollbar.scanDomNode();
// if (!settingsElt) return
// settingsElt.style.height = `${dimension.height}px`;
// settingsElt.style.width = `${dimension.width}px`;
}