upload: better layout
Massimo Melina committed
Sep 25, 2023 at 19:02 UTC
6617d8402c9736f5efca34770720d419dc27df85
2 files changed
+13
-22
frontend/src/index.scss
+2
@@ -320,6 +320,7 @@ ul.dir {
320
.entry-comment {
321
display: inline;
322
white-space: pre-wrap;
323
+ word-break: break-word;
324
&::before, &::after {
325
font-size: 1.5em;
326
font-family: serif;
@@ -435,6 +436,7 @@ button label {
436
margin-left: 0.5em;
437
}
438
.upload-list {
439
+ margin-top: 1em;
440
td:nth-child(1) { width: 0; }
441
td:nth-child(2) { text-align: right; width: 0; white-space: nowrap; padding-left: 0.5em; }
442
td:nth-child(3) { padding: .2em .5em; word-break: break-word; }
frontend/src/upload.ts
+11
-22
@@ -1,18 +1,8 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, DragEvent, Fragment, useMemo } from 'react'
3
+import { createElement as h, DragEvent, Fragment, useMemo, CSSProperties } from 'react'
4
import { Checkbox, Flex, FlexV, iconBtn } from './components'
5
-import {
6
- basename,
7
- closeDialog,
8
- formatBytes,
9
- formatPerc,
10
- hIcon,
11
- isMobile,
12
- newDialog,
13
- prefix,
14
- selectFiles
15
-} from './misc'
5
+import { basename, closeDialog, formatBytes, formatPerc, hIcon, isMobile, newDialog, prefix, selectFiles } from './misc'
6
import _ from 'lodash'
7
import { proxy, ref, subscribe, useSnapshot } from 'valtio'
8
import { alertDialog, confirmDialog, promptDialog } from './dialog'
@@ -119,7 +109,7 @@ export function showUpload() {
109
return h(FlexV, { gap: 0, props: acceptDropFiles(more => uploadState.adding.push(...more.map(f => ({ file: ref(f) })))) },
110
h(FlexV, { className: 'upload-toolbar' },
111
!can_upload ? t('no_upload_here', "No upload permission for the current folder")
122
- : h(FlexV, { margin: '0 0 1em' },
112
+ : h(FlexV, {},
113
h(Flex, { justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' },
114
h('button', {
115
className: 'upload-files',
@@ -152,7 +142,7 @@ export function showUpload() {
142
.then(s => _.find(uploadState.adding, { file: rec.file })!.comment = s || undefined),
143
},
144
}),
155
- h(UploadStatus),
145
+ h(UploadStatus, { margin: '.5em 0' }),
146
qs.length > 0 && h('div', {},
147
h(Flex, { alignItems: 'center', justifyContent: 'center', borderTop: '1px dashed', padding: '.5em' },
148
[queueStr, etaStr].filter(Boolean).join(', '),
@@ -383,21 +373,20 @@ async function startUpload(toUpload: ToUpload, to: string, resume=0) {
373
alertDialog(
374
h('div', {},
375
t(['upload_concluded', "Upload terminated"], "Upload concluded:"),
386
- h('div', {}, h(UploadStatus))
376
+ h(UploadStatus)
377
),
378
'info'
379
).finally(resetCounters)
380
}
381
}
382
393
-function UploadStatus() {
383
+function UploadStatus(props: CSSProperties) {
384
const { done, doneByte, errors } = useSnapshot(uploadState)
395
- return h(Fragment, {},
396
- [
397
- done && t('upload_finished', { n: done, size: formatBytes(doneByte) }, "{n} finished ({size})"),
398
- errors && t('upload_errors', { n: errors }, "{n} failed")
399
- ].filter(Boolean).join(' – ')
400
- )
385
+ const s = [
386
+ done && t('upload_finished', { n: done, size: formatBytes(doneByte) }, "{n} finished ({size})"),
387
+ errors && t('upload_errors', { n: errors }, "{n} failed")
388
+ ].filter(Boolean).join(' – ')
389
+ return !s ? null : h('div', { style: props }, s)
390
}
391
392
function abortCurrentUpload() {