better layout for FilePicker
Massimo Melina committed
Mar 15, 2022 at 15:18 UTC
9d48dd4458db5a6c7449b6b84bee93c7fd2809aa
3 files changed
+8
-8
admin/src/FilePicker.ts
+4
-4
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, useEffect, useMemo, useState } from 'react'
3
+import { createElement as h, Fragment, useEffect, useMemo, useState } from 'react'
4
import { useApi, useApiList } from './api'
5
import _ from 'lodash'
6
import {
@@ -49,7 +49,7 @@ export default function FilePicker({ onSelect }: { onSelect:(v:string[])=>void }
49
return spinner()
50
const pathDelimiter = /[:\\]/.test(cwd) ? '\\' : '/'
51
const cwdPostfixed = enforceFinal(pathDelimiter, cwd)
52
- return h(Box, { display: 'flex', flexDirection: 'column' },
52
+ return h(Fragment, {},
53
h(Box, { display:'flex', gap: 1 },
54
h(Button, {
55
onClick() {
@@ -69,8 +69,8 @@ export default function FilePicker({ onSelect }: { onSelect:(v:string[])=>void }
69
),
70
error ? h(Alert, { severity:'error' }, String(error))
71
: !list.length ? h(Typography, { p:1 }, 'No elements in this folder')
72
- : h(Box, {},
73
- h(MenuList, { sx:{ maxHeight: 'calc(100vh - 24em)', overflow:'auto' } },
72
+ : h(Fragment, {},
73
+ h(MenuList, { sx:{ overflow:'auto', flex: 1 } },
74
list.map((it:DirEntry) =>
75
h(MenuItem, {
76
key: it.n,
admin/src/addFiles.ts
+3
-3
@@ -1,7 +1,7 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { alertDialog, newDialog, promptDialog } from './dialog'
4
-import { createElement as h } from 'react'
4
+import { createElement as h, Fragment } from 'react'
5
import { Box } from '@mui/material'
6
import { VfsNode, reloadVfs } from './VfsPage'
7
import { state } from './state'
@@ -12,13 +12,13 @@ import { onlyTruthy } from './misc'
12
export default function addFiles() {
13
const close = newDialog({
14
title: 'Add files or folders',
15
- dialogProps: { sx:{ minWidth:'min(90vw, 40em)', minHeight: '70vh' } },
15
+ dialogProps: { sx:{ minWidth:'min(90vw, 40em)', minHeight: 'calc(100vh - 9em)' } },
16
Content,
17
})
18
19
function Content() {
20
const under = getUnder()
21
- return h('div', {},
21
+ return h(Fragment, {},
22
h(Box, { sx:{ typography: 'body1', px: 1, py: 2 } }, "Selected elements will be added to " + (under || '(home)')),
23
h(FilePicker, {
24
async onSelect(sel) {
admin/src/dialog.ts
+1
-1
@@ -30,7 +30,7 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
30
h(DialogContent, {
31
ref,
32
...d.dialogProps,
33
- sx:{ ...d.dialogProps?.sx, px: p, pb: p }
33
+ sx:{ ...d.dialogProps?.sx, px: p, pb: p, display: 'flex', flexDirection: 'column', }
34
}, h(d.Content) )
35
)
36
}