accept drop files to upload on whole screen
Massimo Melina committed
Nov 20, 2023 at 23:10 UTC
794975fe2083cc2fc895e435722fe7fad90ee3f9
3 files changed
+35
-31
frontend/src/App.ts
+7
-10
@@ -13,22 +13,19 @@ import { Spinner } from "./components"
13
function App() {
14
useTheme()
15
const { ready } = useSnapshot(pageState) // wait for all plugins to be loaded
16
- const { messageOnly, tile_size=0 } = useSnapState()
16
+ const { messageOnly } = useSnapState()
17
if (messageOnly)
18
return h('h1', { style: { textAlign: 'center'} }, messageOnly)
19
if (!ready)
20
return h(Spinner, { style: { margin: 'auto' } })
21
- const style = { '--tile-size': tile_size }
21
return h(I18Nprovider, {},
23
- h('div', { className: tile_size ? 'tiles-mode' : 'list-mode', style },
24
- h(BrowserRouter, {},
25
- h(NavigationExtractor, {},
26
- h(Routes, {},
27
- h(Route, { path:'*', element: h(BrowseFiles) })
28
- ),
22
+ h(BrowserRouter, {},
23
+ h(NavigationExtractor, {},
24
+ h(Routes, {},
25
+ h(Route, { path:'*', element: h(BrowseFiles) })
26
),
30
- h(Dialogs),
31
- )
27
+ ),
28
+ h(Dialogs),
29
)
30
)
31
}
frontend/src/BrowseFiles.ts
+26
-19
@@ -21,22 +21,34 @@ export function BrowseFiles() {
21
useFetchList()
22
const { error } = useSnapState()
23
const navigate = useNavigate()
24
- return useAuthorized() ? h(Fragment, {},
25
- h(CustomCode, { name: 'beforeHeader' }),
26
- h(Head),
27
- h(CustomCode, { name: 'afterHeader' }),
28
- error ? h(ErrorMsg, { err: error }) : h(FilesList),
29
- h(CustomCode, { name: 'afterList' }),
30
- ) : h(CustomCode, { name: 'unauthorized',
31
- ifEmpty: () => h('h1', {
32
- className: 'unauthorized',
33
- onClick: () => loginDialog(navigate)
34
- }, t`Unauthorized`)
35
- })
24
+ const { props, tile_size=0 } = useSnapState()
25
+ if (!useAuthorized())
26
+ return h(CustomCode, { name: 'unauthorized',
27
+ ifEmpty: () => h('h1', {
28
+ className: 'unauthorized',
29
+ onClick: () => loginDialog(navigate)
30
+ }, t`Unauthorized`)
31
+ })
32
+ return h('div', { // element dedicated to drop-files to cover full screen
33
+ ...acceptDropFiles(files =>
34
+ props?.can_upload ? enqueue(files.map(file => ({ file })))
35
+ : alertDialog(t("Upload not available"), 'warning') )
36
+ },
37
+ h('div', {
38
+ className: 'list-wrapper ' + (tile_size ? 'tiles-mode' : 'list-mode'),
39
+ style: { '--tile-size': tile_size },
40
+ },
41
+ h(CustomCode, { name: 'beforeHeader' }),
42
+ h(Head),
43
+ h(CustomCode, { name: 'afterHeader' }),
44
+ error ? h(ErrorMsg, { err: error }) : h(FilesList),
45
+ h(CustomCode, { name: 'afterList' }),
46
+ )
47
+ )
48
}
49
50
function FilesList() {
39
- const { filteredList, list, loading, stoppedSearch, props } = useSnapState()
51
+ const { filteredList, list, loading, stoppedSearch } = useSnapState()
52
const midnight = useMidnight() // as an optimization we calculate this only once per list and pass it down
53
const pageSize = 100
54
const [page, setPage] = useState(0)
@@ -95,12 +107,7 @@ function FilesList() {
107
: filteredList && !filteredList.length && t('filter_none', "No match for this filter")
108
109
return h(Fragment, {},
98
- h('ul', {
99
- ref,
100
- className: 'dir',
101
- ...acceptDropFiles(files => props?.can_upload ? enqueue(files.map(file => ({ file })))
102
- : alertDialog(t("Upload not available"), 'warning') )
103
- },
110
+ h('ul', { ref, className: 'dir' },
111
msgInstead ? h('p', {}, msgInstead)
112
: theList.slice(offset, offset + pageSize * (1+extraPages)).map((entry, idx) =>
113
h(Entry, {
frontend/src/index.scss
+2
-2
@@ -42,7 +42,7 @@ body {
42
-moz-osx-font-smoothing: grayscale;
43
}
44
body, button, select, input { font-size: 12pt; }
45
-#root>div {
45
+.list-wrapper {
46
max-width: 54em;
47
margin: auto;
48
min-height: 100vh;
@@ -498,7 +498,7 @@ button label {
498
499
.unauthorized { text-align: center }
500
501
-#root>.tiles-mode {
501
+.tiles-mode {
502
max-width: none;
503
margin: 0 1em;
504
--tile-size: 5;