ux: added "select some files" after "download zip" button to help the user doing the right thing
Massimo Melina committed
Dec 27, 2022 at 17:11 UTC
f5f738d41a31b3d692e7d3986e3e93fb2c9ae5f8
3 files changed
+20
-8
frontend/src/dialog.ts
+4
-3
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, ReactElement, useEffect, useRef } from 'react'
3
+import { createElement as h, ReactElement, ReactNode, useEffect, useRef } from 'react'
4
import './dialog.css'
5
import { newDialog, closeDialog } from '@hfs/shared/lib/dialogs'
6
export * from '@hfs/shared/lib/dialogs'
@@ -69,8 +69,8 @@ export async function alertDialog(msg: ReactElement | string | Error, type:Alert
69
}
70
}
71
72
-interface ConfirmOptions { href?: string }
73
-export async function confirmDialog(msg: ReactElement | string, { href }: ConfirmOptions={}) : Promise<boolean> {
72
+export interface ConfirmOptions { href?: string, afterButtons?: ReactNode }
73
+export async function confirmDialog(msg: ReactElement | string, { href, afterButtons }: ConfirmOptions={}) : Promise<boolean> {
74
if (typeof msg === 'string')
75
msg = h('p', {}, msg)
76
return new Promise(resolve => newDialog({
@@ -97,6 +97,7 @@ export async function confirmDialog(msg: ReactElement | string, { href }: Confir
97
h('button', {
98
onClick() { closeDialog(false) },
99
}, "Don't"),
100
+ afterButtons,
101
)
102
)
103
}
frontend/src/menu.ts
+16
-4
@@ -3,13 +3,14 @@
3
import { state, useSnapState } from './state'
4
import { createElement as h, useEffect, useState } from 'react'
5
import { useDebounce } from 'use-debounce'
6
-import { confirmDialog, promptDialog } from './dialog'
6
+import { alertDialog, confirmDialog, ConfirmOptions, promptDialog } from './dialog'
7
import { hIcon, isMobile, prefix, useStateMounted } from './misc'
8
import { login } from './login'
9
import { showOptions } from './options'
10
import showUserPanel from './UserPanel'
11
import { useNavigate } from 'react-router-dom'
12
import _ from 'lodash'
13
+import { closeDialog } from '@hfs/shared/lib/dialogs'
14
15
export function MenuPanel() {
16
const { showFilter, remoteSearch, stopSearch, stoppedSearch, patternFilter, selected } = useSnapState()
@@ -57,7 +58,18 @@ export function MenuPanel() {
58
search: remoteSearch,
59
list
60
}))),
60
- confirm: list ? undefined : remoteSearch ? 'Download results of this search as ZIP archive?' : 'Download whole folder as ZIP archive?',
61
+ ...!list && {
62
+ confirm: remoteSearch ? 'Download ALL results of this search as ZIP archive?' : 'Download WHOLE folder as ZIP archive?',
63
+ confirmOptions: {
64
+ afterButtons: h('button', {
65
+ onClick() {
66
+ state.showFilter = true
67
+ closeDialog(false)
68
+ return alertDialog("Use checkboxes to select the files, then you can use Download-zip again")
69
+ },
70
+ }, "Select some files"),
71
+ }
72
+ }
73
})
74
),
75
remoteSearch && h('div', { id: 'searched' },
@@ -138,7 +150,7 @@ export function MenuButton({ icon, label, tooltip, toggled, onClick, className =
150
h('label', {}, label))
151
}
152
141
-export function MenuLink({ href, target, confirm, ...rest }: MenuButtonProps & { href: string, target?: string, confirm?: string }) {
153
+export function MenuLink({ href, target, confirm, confirmOptions, ...rest }: MenuButtonProps & { href: string, target?: string, confirm?: string, confirmOptions?: ConfirmOptions }) {
154
return h('a', {
155
tabIndex: -1,
156
href,
@@ -146,7 +158,7 @@ export function MenuLink({ href, target, confirm, ...rest }: MenuButtonProps & {
158
async onClick(ev) {
159
if (!confirm) return
160
ev.preventDefault()
149
- await confirmDialog(confirm, { href })
161
+ await confirmDialog(confirm, { href, ...confirmOptions })
162
}
163
}, h(MenuButton, rest))
164
}
todo.md
-1
@@ -1,5 +1,4 @@
1
# To do
2
-- frontend: "download zip" should offer a third button like "select some files"
2
- plugins: after installing, switch to installed (and perhaps highlight new one)
3
- plugins' log, accessible in admin
4
- fix: cannot switch off https and switch on http at the same time