instead of separate link to container-folder on a search, provide the link to the container-folder inside the file menu
Massimo Melina committed
May 24, 2024 at 17:42 UTC
3febe18bff90b1326abc183e88398bc57587979d
3 files changed
+19
-10
frontend/src/BrowseFiles.ts
+4
-8
@@ -193,8 +193,7 @@ const Entry = ({ entry, midnight, separator }: EntryProps) => {
193
const { uri, isFolder, name, n } = entry
194
const { showFilter, selected, file_menu_on_link } = useSnapState()
195
const isLink = Boolean(entry.url)
196
- const containerDir = isFolder ? '' : n.substring(0, (n.lastIndexOf('/') || -1) +1) // n works both for files and links
197
- const containerName = containerDir && n.slice(0, -name.length)
196
+ const containerName = n.slice(0, -name.length)
197
let className = isFolder ? 'folder' : 'file'
198
if (entry.cantOpen)
199
className += ' cant-open'
@@ -219,7 +218,7 @@ const Entry = ({ entry, midnight, separator }: EntryProps) => {
218
},
219
}),
220
h('span', { className: 'link-wrapper' }, // container to handle mouse over for both children
222
- ...isFolder || entry.web ? [ // internal navigation, use Link component
221
+ isFolder || entry.web ? h(Fragment, {}, // internal navigation, use Link component
222
h(Link, { to: uri, reloadDocument: entry.web, ...ariaProps }, // without reloadDocument, once you enter the web page, the back button won't bring you back to the frontend
223
ico, entry.n.slice(0, -1)), // don't use name, as we want to include whole path in case of search
224
// popup button is here to be able to detect link-wrapper:hover
@@ -227,11 +226,8 @@ const Entry = ({ entry, midnight, separator }: EntryProps) => {
226
className: 'popup-menu-button',
227
onClick: fileMenu
228
}, hIcon('menu'), t`Menu`)
230
- ] : containerName ? [
231
- h('a', { href: uri, onClick, tabIndex: -1, 'aria-hidden': true }, ico),
232
- h(Link, { to: containerDir, className: 'container-folder', tabIndex: -1 }, containerName),
233
- h('a', { href: uri, onClick, ...ariaProps }, name)
234
- ] : [h('a', { href: uri, onClick, target: entry.target, ...ariaProps }, ico, name)],
229
+ ) : h('a', { href: uri, onClick, target: entry.target, ...ariaProps },
230
+ ico, h('span', { className: 'container-folder' }, containerName), name ),
231
),
232
h(CustomCode, { name: 'afterEntryName', entry }),
233
entry.comment && h('div', { className: 'entry-comment' }, entry.comment),
frontend/src/fileMenu.ts
+13
-2
@@ -1,6 +1,8 @@
1
import { t, useI18N } from './i18n'
2
-import { dontBotherWithKeys, formatBytes, getHFS, hfsEvent, hIcon, newDialog, prefix, with_, working,
3
- pathEncode } from './misc'
2
+import {
3
+ dontBotherWithKeys, formatBytes, getHFS, hfsEvent, hIcon, newDialog, prefix, with_, working,
4
+ pathEncode, closeDialog
5
+} from './misc'
6
import { createElement as h, Fragment, isValidElement, MouseEvent, ReactNode } from 'react'
7
import _ from 'lodash'
8
import { getEntryIcon, MISSING_PERM } from './BrowseFiles'
@@ -57,11 +59,20 @@ export function openFileMenu(entry: DirEntry, ev: MouseEvent, addToMenu: (FileMe
59
state.props?.can_delete && { id: 'cut', label: t`Cut`, icon: 'cut', onClick: () => close(cut([entry])) },
60
isFolder && !entry.web && { id: 'list', label: t`Get list`, href: uri + '?get=list&folders=*', icon: 'list' },
61
]
62
+ const folder = entry.n.slice(0, -entry.name.length - 1)
63
const props = [
64
{ id: 'name', label: t`Name`, value: entry.name },
65
typeof s === 'number' && { id: 'size', label: t`Size`,
66
value: h(Fragment, {}, formatBytes(s), h('small', {}, prefix(' (', s > 1024 && s.toLocaleString(), ')')) ) },
67
entry.t && { id: 'timestamp', label: t`Timestamp`, value: entry.t.toLocaleString() },
68
+ folder && {
69
+ id: 'folder',
70
+ label: t`Folder`,
71
+ value: h(Link, {
72
+ to: location.pathname + folder + '/',
73
+ onClick: () => closeDialog(null, true)
74
+ }, folder.replaceAll('/', ' / '))
75
+ },
76
]
77
const res = hfsEvent('fileMenu', { entry, menu, props })
78
if (res)
frontend/src/index.scss
+2
@@ -282,6 +282,8 @@ ul.dir {
282
border-bottom: 1px solid var(--faint-contrast);
283
&:nth-of-type(odd) { background-color: var(--ghost-contrast); }
284
285
+ .container-folder { font-size: smaller }
286
+
287
input[type=checkbox] {
288
margin-right: 1em;
289
}