admin/fs: better layout
Massimo Melina committed
Apr 14, 2024 at 16:43 UTC
e9fa319e965940d3f3c1942ce494671c9868981b
4 files changed
+10
-10
admin/src/VfsMenuBar.ts
+1
@@ -31,6 +31,7 @@ export default function VfsMenuBar({ statusApi }: { statusApi: ApiObject }) {
31
alertDialog(h(List, { dense: true }, res.map(x => h(ListItem, { key: x.name },
32
h(ListItemIcon, {}, h(Storage)),
33
h(ListItemText, {
34
+ sx: { wordBreak: 'break-word' },
35
primary: x.name + prefix(' (', x.description, ')'),
36
secondary: formatDiskSpace(x)
37
}),
admin/src/VfsPage.ts
+5
-2
@@ -74,9 +74,12 @@ export default function VfsPage() {
74
title: selectedFiles.length > 1 ? "Multiple selection" :
75
h(Flex, {},
76
vfsNodeIcon(selectedFiles[0] as VfsNode),
77
- selectedFiles[0].name || "Home",
78
- h(Box, { color: 'text.secondary' }, ancestors.join(' / '))
77
+ h(Flex, { flexWrap: 'wrap', gap: '0 0.5em' },
78
+ selectedFiles[0].name || "Home",
79
+ h(Box, { component: 'span', color: 'text.secondary' }, ancestors.join(' /'))
80
+ )
81
),
82
+ dialogProps: { sx: { justifyContent: 'flex-end' } },
83
Content: () => sideContent,
84
onClose() {
85
state.selectedFiles = []
admin/src/VfsTree.ts
+3
-5
@@ -77,8 +77,7 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
77
sx: {
78
display: 'flex',
79
gap: '.5em',
80
- lineHeight: '2em',
81
- alignItems: 'center',
80
+ minHeight: '1.8em', pt: '.2em', // comfy, make single-line ones taller
81
}
82
},
83
h(Box, { display: 'flex', flex: 0, },
@@ -86,7 +85,7 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
85
// attributes
86
h(Box, { sx: {
87
flex: 0, ml: '2px', my: '2px', '&>*': { fontSize: '87%', opacity: .6, mt: '-2px' },
89
- display: 'grid', gridAutoFlow: 'column', gridTemplateRows: 'auto auto',
88
+ display: 'grid', gridAutoFlow: 'column', gridTemplateRows: 'auto auto', height: '1em',
89
} },
90
node.can_delete !== undefined && iconTooltip(Delete, "Delete permission"),
91
node.can_upload !== undefined && iconTooltip(Upload, "Upload permission"),
@@ -104,8 +103,7 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
103
const ps = node.parent?.source
104
const { source } = node
105
const rel = ps && source?.startsWith(ps) ? '.' + source.slice(ps.length) : source
107
- return !rel || !source?.endsWith(name) || rel.length > 45
108
- ? h(Box, { lineHeight: '1.2em' }, name)
106
+ return !rel || !source?.endsWith(name) || rel.length > 45 ? name
107
: h('span', {},
108
h('span', { style: { opacity: .4 } }, rel.slice(0,-name.length)),
109
rel.slice(-name.length),
admin/src/index.scss
+1
-3
@@ -36,9 +36,7 @@ form { max-width: 100%; } // make fields with unbreakable text (LinkField) to no
36
.MuiSvgIcon-root {
37
vertical-align: bottom;
38
}
39
-.MuiTreeItem-content {
40
- box-sizing: border-box; /* avoid unwanted scrolling caused by its width:100% + padding */
41
-}
39
+div.MuiTreeItem-content { padding: 0; } // remove wasting horizontal padding
40
.MuiDataGrid-columnHeaders {
41
background-color: #8882;
42
}