ux: admin/shared: create-folder button more visible and now only displayed if folders can be selected
Massimo Melina committed
Sep 28, 2025 at 19:58 UTC
7e342c1edf3e96a40fb41094c4d64050aed6a295
1 file changed
+16
-17
admin/src/FilePicker.ts
+16
-17
@@ -3,9 +3,9 @@
3
import { createElement as h, Fragment, useEffect, useMemo, useRef, useState } from 'react'
4
import { apiCall, useApiList } from './api'
5
import _ from 'lodash'
6
-import { Alert, Box, Button, Checkbox, ListItemIcon, ListItemText, MenuItem, TextField, Typography } from '@mui/material'
6
+import { Alert, Box, Checkbox, ListItemIcon, ListItemText, MenuItem, TextField, Typography } from '@mui/material'
7
import { enforceFinal, formatBytes, isWindowsDrive, err2msg, basename, formatPerc } from './misc'
8
-import { spinner, Center, IconBtn, Flex, IconProgress, useBreakpoint } from './mui'
8
+import { spinner, Center, IconBtn, Flex, IconProgress, useBreakpoint, Btn } from './mui'
9
import { ArrowUpward, CreateNewFolder, Storage, VerticalAlignTop } from '@mui/icons-material'
10
import { StringField } from '@hfs/mui-grid-form'
11
import { FileIcon, FolderIcon } from './VfsTree'
@@ -141,35 +141,34 @@ export default function FilePicker({ onSelect, multiple=true, files=true, folder
141
}
142
})
143
),
144
- h(Flex, { alignItems: 'stretch' },
145
- (multiple || folders || !files) && h(Button, {
146
- variant: 'contained',
144
+ h(Flex, { alignItems: 'center' },
145
+ (multiple || folders || !files) && h(Btn, {
146
disabled: !sel.length && (!cwd || !folders && files), // !cwd is the drive selection on Windows, which is not a path
147
sx: { minWidth: 'max-content' },
148
onClick() {
149
onSelect(sel.length ? sel.map(x => cwdDelimiter + x) : [cwd])
150
}
151
}, files && (sel.length || !folders) ? `Select (${sel.length})` : sm ? "Select this folder" : "This folder"),
153
- h(TextField, {
154
- size: 'small',
155
- value: filter,
156
- label: `Filter results (${filteredList.length}${filteredList.length < list.length ? '/'+list.length : ''})`,
157
- onChange(ev) {
158
- setFilterBounced(ev.target.value)
159
- },
160
- sx: { flex: 1 },
161
- }),
162
- h(IconBtn, {
152
+ folders && h(Btn, {
153
icon: CreateNewFolder,
154
+ variant: 'outlined',
155
doneMessage: true,
165
- title: "Create folder",
166
- sx: { mt: '5px' },
156
+ labelIf: 'sm',
157
async onClick() {
158
const s = await promptDialog("New folder name")
159
if (!s) return false
160
await apiCall('mkdir', { path: `${cwd}/${s}` })
161
reload()
162
}
163
+ }, "New folder"),
164
+ h(TextField, {
165
+ size: 'small',
166
+ value: filter,
167
+ label: `Filter results (${filteredList.length}${filteredList.length < list.length ? '/'+list.length : ''})`,
168
+ onChange(ev) {
169
+ setFilterBounced(ev.target.value)
170
+ },
171
+ sx: { flex: 1 },
172
}),
173
props?.total > 0 && h(IconProgress, {
174
icon: Storage,