ux: admin/fs: scroll tree and form independently
Massimo Melina committed
Oct 30, 2024 at 18:19 UTC
95c0ff3f17a4adc0516cd35c16a021842d9aff8e
3 files changed
+10
-4
admin/src/VfsPage.ts
+4
-3
@@ -137,19 +137,20 @@ export default function VfsPage() {
137
reactJoin(" or ", urls.slice(0,3).map(href => h(Link, { href, target: 'frontend' }, href)))
138
]
139
}
140
+ const scrollProps = { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'auto' } as const
141
return h(Fragment, {},
142
h(Box, { mb: 2 },
143
h(Alert, { severity: 'info' }, "If you rename or delete here, it's virtual, and only affects what is presented to the users"),
144
alert && h(Alert, alert),
145
),
145
- h(Grid, { container: true, rowSpacing: 1, columnSpacing: 2, top: 0 },
146
- h(Grid, { item: true, xs: 12, [sideBreakpoint]: 6, lg: 6, xl: 5 },
146
+ h(Grid, { container: true, rowSpacing: 1, columnSpacing: 2, top: 0, flex: '1 1 auto', height: 0 },
147
+ h(Grid, { item: true, xs: 12, [sideBreakpoint]: 6, lg: 6, xl: 5, ...scrollProps },
148
h(Flex, { mb: 1, flexWrap: 'wrap', gap: [0, 2] },
149
h(Typography, { variant: 'h6' }, "Virtual File System"),
150
h(VfsMenuBar, { statusApi }),
151
),
152
vfs && h(VfsTree, { id2node, statusApi }) ),
152
- isSideBreakpoint && sideContent && h(Grid, { item: true, [sideBreakpoint]: true, maxWidth: '100%' },
153
+ isSideBreakpoint && sideContent && h(Grid, { item: true, [sideBreakpoint]: true, maxWidth: '100%', ...scrollProps },
154
h(Card, { sx: { overflow: 'initial' } }, // overflow is incompatible with stickyBar
155
h(CardContent, {}, sideContent)) )
156
)
admin/src/VfsTree.ts
+1
-1
@@ -18,7 +18,7 @@ export const FileIcon = InsertDriveFileOutlined
18
19
export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, VfsNode>, statusApi: ApiObject }) {
20
const { vfs, selectedFiles } = useSnapState()
21
- const [expanded, setExpanded] = useState(id2node.size < 20 ? Array.from(id2node.keys()) : ['/'])
21
+ const [expanded, setExpanded] = useState(Array.from(id2node.keys()))
22
const dragging = useRef<string>()
23
const ref = useRef<HTMLUListElement>()
24
if (!vfs)
admin/src/index.scss
+5
@@ -71,3 +71,8 @@ h2.MuiDialogTitle-root { /* less padding */
71
50% { transform: scale(1.5); color: var(--success); }
72
100% { transform: inherit; color: inherit; }
73
}
74
+
75
+// (try) avoid hidden scrollbars
76
+::-webkit-scrollbar { width: 4px }
77
+::-webkit-scrollbar-thumb { background: #8888 }
78
+::-webkit-scrollbar-track { background: #8882 }
\ No newline at end of file