lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add psd layer list scrollbar
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-05-11 15:01:27 +08:00
parent 40848ffdb5
commit 1ed3184000
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/agents/AgentPsdTemplateEditorDialog.tsx
View File

@ -431,9 +431,11 @@ function TemplatePreviewImage({
} }
function getScrollAreaViewportElement(root: HTMLDivElement | null) { function getScrollAreaViewportElement(root: HTMLDivElement | null) {
return root?.querySelector( return (
"[data-radix-scroll-area-viewport]" (root?.querySelector(
) as HTMLDivElement | null; "[data-radix-scroll-area-viewport]"
) as HTMLDivElement | null) || root
);
} }
function isLikelyStableRenderImageUrl(url: string) { function isLikelyStableRenderImageUrl(url: string) {
@ -3240,6 +3242,25 @@ export function AgentPsdTemplateEditorDialog({
.psd-preview-viewport::-webkit-scrollbar-thumb:hover { .psd-preview-viewport::-webkit-scrollbar-thumb:hover {
background-color: rgba(16, 185, 129, 0.5); background-color: rgba(16, 185, 129, 0.5);
} }
.psd-layer-visibility-scroll {
scrollbar-color: rgba(16, 185, 129, 0.55) rgba(255, 255, 255, 0.08);
scrollbar-width: thin;
}
.psd-layer-visibility-scroll::-webkit-scrollbar {
width: 10px;
}
.psd-layer-visibility-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
}
.psd-layer-visibility-scroll::-webkit-scrollbar-thumb {
background: rgba(16, 185, 129, 0.55);
border: 2px solid rgba(10, 10, 10, 0.9);
border-radius: 999px;
}
.psd-layer-visibility-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(16, 185, 129, 0.75);
}
`, `,
}} }}
/> />
@ -4415,7 +4436,7 @@ export function AgentPsdTemplateEditorDialog({
)} )}
{selectedTemplateLayers.length > 0 ? ( {selectedTemplateLayers.length > 0 ? (
<div className="shrink-0 rounded-2xl border border-white/10 bg-white/[0.02] p-4 shadow-inner"> <div className="flex shrink-0 flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-4 shadow-inner">
<div className="mb-3 flex items-center justify-between gap-3"> <div className="mb-3 flex items-center justify-between gap-3">
<div> <div>
<div className="font-semibold text-sm text-white"> <div className="font-semibold text-sm text-white">
@ -4455,11 +4476,11 @@ export function AgentPsdTemplateEditorDialog({
</div> </div>
</div> </div>
</div> </div>
<ScrollArea <div
className="max-h-[220px] pr-2" className="psd-layer-visibility-scroll max-h-[220px] min-h-0 overflow-y-auto overscroll-contain pr-2"
ref={hiddenLayerScrollAreaRef} ref={hiddenLayerScrollAreaRef}
> >
<div className="space-y-2"> <div className="space-y-2 pb-1">
{orderedPreviewLayers.map((layer) => { {orderedPreviewLayers.map((layer) => {
const isHidden = hiddenLayerIdSet.has(layer.id); const isHidden = hiddenLayerIdSet.has(layer.id);
const isSelected = selectedLayerId === layer.id; const isSelected = selectedLayerId === layer.id;
@ -4523,7 +4544,7 @@ export function AgentPsdTemplateEditorDialog({
); );
})} })}
</div> </div>
</ScrollArea> </div>
</div> </div>
) : null} ) : null}
</div> </div>