ux: when renaming, help user preserve extension by auto-selecting name part excluding extension
Massimo Melina committed
Oct 27, 2024 at 00:14 UTC
e36632208cb35633de7c16e7251c4db6a60ecbb3
3 files changed
+13
-3
frontend/src/dialog.ts
+3
-1
@@ -20,8 +20,9 @@ interface PromptOptions extends Partial<DialogOptions> {
20
helperText?: ReactNode,
21
inputProps?: Partial<InputHTMLAttributes<string>>
22
onSubmit?: (v: string) => Promisable<string>
23
+ onField?: (el: HTMLInputElement | HTMLTextAreaElement) => void
24
}
24
-export async function promptDialog(msg: string, { value, type, helperText, trim=true, inputProps, onSubmit, ...rest }:PromptOptions={}) : Promise<string | undefined> {
25
+export async function promptDialog(msg: string, { value, type, helperText, trim=true, inputProps, onSubmit, onField, ...rest }:PromptOptions={}) : Promise<string | undefined> {
26
const textarea = type === 'textarea' && type
27
return new Promise(resolve => newDialog({
28
className: 'dialog-prompt',
@@ -40,6 +41,7 @@ export async function promptDialog(msg: string, { value, type, helperText, trim=
41
setTimeout(()=> inp.focus(),100)
42
if (value)
43
inp.value = value
44
+ onField?.(inp)
45
if (textarea) {
46
function resize() {
47
inp.style.height = 'auto'
frontend/src/fileMenu.ts
+5
-1
@@ -142,7 +142,11 @@ export function openFileMenu(entry: DirEntry, ev: MouseEvent, addToMenu: (Falsy
142
}
143
144
async function rename(entry: DirEntry) {
145
- const dest = await promptDialog(t`Name`, { value: entry.name, title: t`Rename` })
145
+ const dest = await promptDialog(t`Name`, {
146
+ value: entry.name,
147
+ title: t`Rename`,
148
+ onField: el => el.setSelectionRange(0, entry.name.lastIndexOf('.'))
149
+ })
150
if (!dest) return
151
const { n, uri } = entry
152
await apiCall('rename', { uri, dest }, { modal: working })
frontend/src/upload.ts
+5
-1
@@ -164,7 +164,11 @@ export function showUpload() {
164
rec.comment = s || undefined
165
},
166
async edit(rec) {
167
- const s = await promptDialog(t('upload_name', "Upload with new name"), { value: rec.file.name })
167
+ const value = rec.file.name
168
+ const s = await promptDialog(t('upload_name', "Upload with new name"), {
169
+ value,
170
+ onField: el => el.setSelectionRange(0, value.lastIndexOf('.')),
171
+ })
172
if (!s) return
173
rec.name = s
174
},