frontend: nicer
Massimo Melina committed
Feb 10, 2023 at 16:40 UTC
b011e7929ba76f1e5c5e198ac31d51d933343531
3 files changed
+17
-13
frontend/src/BrowseFiles.ts
+11
-9
@@ -91,17 +91,19 @@ function FilesList() {
91
el?.scrollIntoView({ block: 'center' })
92
}, [page, extraPages])
93
94
+ const msgInstead = !list.length ? (!loading && (stoppedSearch ? "Stopped before finding anything" : "Nothing here"))
95
+ : filteredList && !filteredList.length && "No match for this filter"
96
+
97
return h(Fragment, {},
98
h('ul', { ref, className: 'dir', ...acceptDropFiles(can_upload && enqueue) },
96
- !list.length ? (!loading && (stoppedSearch ? "Stopped before finding anything" : "Nothing here"))
97
- : filteredList && !filteredList.length ? "No match for this filter"
98
- : theList.slice(offset, offset + pageSize * (1+extraPages)).map((entry: DirEntry, idx) =>
99
- h(Entry, {
100
- key: entry.n,
101
- midnight,
102
- separator: idx > 0 && !(idx % pageSize) ? String(offset + idx) : undefined,
103
- ...entry
104
- })),
99
+ msgInstead ? h('p', {}, msgInstead)
100
+ : theList.slice(offset, offset + pageSize * (1+extraPages)).map((entry: DirEntry, idx) =>
101
+ h(Entry, {
102
+ key: entry.n,
103
+ midnight,
104
+ separator: idx > 0 && !(idx % pageSize) ? String(offset + idx) : undefined,
105
+ ...entry
106
+ })),
107
loading && h(Spinner),
108
),
109
total > pageSize && h(Paging, {
frontend/src/index.scss
+2
@@ -63,6 +63,7 @@ input[type=checkbox] {
63
label input[type=checkbox] {
64
margin-right: .8em;
65
}
66
+select { text-align: center; } /* it is surely cooler on the options dialog */
67
68
.hidden { display: none !important }
69
@@ -174,6 +175,7 @@ ul.dir {
175
padding: 0;
176
margin: 0;
177
clear: both;
178
+ &>p { text-align: center; }
179
& li {
180
display: block;
181
list-style-type: none;
frontend/src/upload.ts
+4
-4
@@ -63,7 +63,7 @@ export function showUpload() {
63
doneByte: 0,
64
})
65
const close = newDialog({
66
- dialogProps: { style: { minWidth: 'min(20em, 100vw - 1em)' } },
66
+ dialogProps: { style: { minHeight: '6em', minWidth: 'min(20em, 100vw - 1em)' } },
67
title: "Upload",
68
icon: () => hIcon('upload'),
69
Content,
@@ -82,15 +82,15 @@ export function showUpload() {
82
83
return h(FlexV, { props: acceptDropFiles(x => setFiles([ ...files, ...x ])) },
84
h(Flex, { gap: '.5em', flexWrap: 'wrap', justifyContent: 'center', position: 'sticky', top: -4, background: 'var(--bg)', boxShadow: '0 3px 3px #000' },
85
- can_upload && h('button',{ onClick: () => selectFiles() }, "Add file(s)"),
86
- can_upload && h('button',{ onClick: () => selectFiles(true) }, "Add folder"),
87
- files.length > 1 && h('button', { onClick() { setFiles([]) } }, "Clear"),
85
+ can_upload && h('button', { onClick: () => selectFiles() }, "Add file(s)"),
86
+ can_upload && h('button', { onClick: () => selectFiles(true) }, "Add folder"),
87
files.length > 0 && h('button', {
88
onClick() {
89
enqueue(files)
90
setFiles([])
91
}
92
}, `Send ${files.length} file(s), ${formatBytes(files.reduce((a, f) => a + f.size, 0))}`),
93
+ files.length > 1 && h('button', { onClick() { setFiles([]) } }, "Clear"),
94
),
95
h(FilesList, {
96
files,