upload: hint to drag&drop files
Massimo Melina committed
Nov 20, 2023 at 23:57 UTC
0ae53124f6b2109689bd02478b86645447063d69
5 files changed
+10
-6
frontend/src/components.ts
+2
-2
@@ -18,7 +18,7 @@ interface FlexProps extends CSSProperties {
18
className?: string,
19
props?: HTMLAttributes<HTMLDivElement>
20
}
21
-export const Flex = forwardRef(({ gap='.8em', center=false, vert=false, children=null, className='', props={}, ...rest }: FlexProps, ref) =>
21
+export const Flex = forwardRef(({ gap='.8em', vert=false, children=null, className='', props={}, ...rest }: FlexProps, ref) =>
22
h('div', {
23
ref,
24
className,
@@ -26,7 +26,7 @@ export const Flex = forwardRef(({ gap='.8em', center=false, vert=false, children
26
display: 'flex',
27
gap,
28
flexDirection: vert ? 'column' : undefined,
29
- ...center && { alignItems: 'center', justifyContent: 'center' },
29
+ alignItems: vert ? undefined : 'center',
30
...rest,
31
},
32
...props
frontend/src/icons.ts
+2
-1
@@ -3,7 +3,7 @@
3
import { state, useSnapState } from './state'
4
import { createElement as h, memo } from 'react'
5
6
-const SYS_ICONS: Record<string, [string] | [string, string]> = {
6
+const SYS_ICONS: Record<string, [string] | [string, string | false]> = { // false means we don't have the icon, only unicode
7
login: ['👤','user'],
8
user: ['👤','user'],
9
filter: ['✂'],
@@ -38,6 +38,7 @@ const SYS_ICONS: Record<string, [string] | [string, string]> = {
38
delete: ['🗑️', 'trash'],
39
comment: ['💬'],
40
link: ['↗'],
41
+ info: ['ⓘ', false],
42
}
43
44
document.fonts.ready.then(async ()=> {
frontend/src/upload.ts
+3
-2
@@ -111,7 +111,7 @@ export function showUpload() {
111
h(FlexV, { className: 'upload-toolbar' },
112
!props?.can_upload ? t('no_upload_here', "No upload permission for the current folder")
113
: h(FlexV, {},
114
- h(Flex, { justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' },
114
+ h(Flex, { justifyContent: 'center', flexWrap: 'wrap' },
115
h('button', {
116
className: 'upload-files',
117
onClick: () => pickFiles({ accept: normalizeAccept(props?.accept) })
@@ -123,6 +123,7 @@ export function showUpload() {
123
h('button', { className: 'create-folder', onClick: createFolder }, t`Create folder`),
124
h(Checkbox, { value: skipExisting, onChange: v => uploadState.skipExisting = v }, t`Skip existing files`),
125
),
126
+ !isMobile() && h(Flex, { gap: 4 }, hIcon('info'), t('upload_dd_hint', "You can upload files doing drag&drop on the files list")),
127
adding.length > 0 && h(Flex, { justifyContent: 'center', flexWrap: 'wrap' },
128
h('button', {
129
className: 'upload-send',
@@ -146,7 +147,7 @@ export function showUpload() {
147
}),
148
h(UploadStatus, { margin: '.5em 0' }),
149
qs.length > 0 && h('div', {},
149
- h(Flex, { alignItems: 'center', justifyContent: 'center', borderTop: '1px dashed', padding: '.5em' },
150
+ h(Flex, { justifyContent: 'center', borderTop: '1px dashed', padding: '.5em' },
151
[queueStr, etaStr].filter(Boolean).join(', '),
152
inQ > 0 && iconBtn('delete', ()=> {
153
uploadState.qs = []
src/langs/hfs-lang-en.json
+2
-1
@@ -138,6 +138,7 @@
138
"Destination": "Destination",
139
"in_queue": "{n} in queue",
140
"enter_comment": "Comment for this file",
141
- "Comment": "Comment"
141
+ "Comment": "Comment",
142
+ "upload_dd_hint": "You can upload files doing drag&drop on the files list"
143
}
144
}
src/langs/hfs-lang-it.json
+1
@@ -131,6 +131,7 @@
131
"in_queue": "{n} in coda",
132
"enter_comment": "Comment for this file",
133
"Comment": "Comment",
134
+ "upload_dd_hint": "Puoi uploadare file trascinandoli sulla lista principale",
135
136
"_PLUGINS SECTION": "",
137
"_PLUGIN thumbnails": "",