.entry-name for easier styling
Massimo Melina committed
Aug 22, 2025 at 00:30 UTC
fcd393f8d578e8e8099c6eb7174e530500592870
1 file changed
+23
-22
frontend/src/BrowseFiles.ts
+23
-22
@@ -289,24 +289,31 @@ const Entry = ({ entry, midnight, separator }: EntryProps) => {
289
const { uri, isFolder, name, n } = entry
290
const { showFilter, selected, file_menu_on_link } = useSnapState()
291
const isLink = Boolean(entry.url)
292
- const containerName = n.slice(0, -name.length).replaceAll('/', '/ ')
292
let className = isFolder ? 'folder' : 'file'
293
if (entry.cantOpen)
294
className += ' cant-open'
295
if (separator)
296
className += ' ' + PAGE_SEPARATOR_CLASS
298
- const ico = getEntryIcon(entry)
299
- const onClick = !isFolder && !isLink && !entry.web && file_menu_on_link && fileMenu || makeOnClickOpen(entry)
297
const hasHover = useMediaQuery('(hover: hover)')
298
const showingButton = !file_menu_on_link || isFolder && !hasHover
299
const ariaId = useId()
303
- const ariaProps = { id: ariaId, 'aria-label': prefix(name + ', ', isFolder ? t`Folder` : entry.web ? t`Web page` : isLink ? t`Link` : '') }
304
- const dragProps = dragFilesSource(entry)
300
+ const commonProps = {
301
+ id: ariaId,
302
+ 'aria-label': prefix(name + ', ', isFolder ? t`Folder` : entry.web ? t`Web page` : isLink ? t`Link` : ''),
303
+ ...dragFilesSource(entry),
304
+ onClick: !isFolder && !isLink && !entry.web && file_menu_on_link && fileMenu || makeOnClickOpen(entry),
305
+ children: h(Fragment, {},
306
+ getEntryIcon(entry),
307
+ h('span', { className: 'container-folder' }, n.slice(0, -name.length).replaceAll('/', '/ ')),
308
+ h('span', { className: 'entry-name' }, name)
309
+ )
310
+ }
311
return h(CustomCode, {
312
name: 'entry',
313
entry,
314
render: x => x ? h('li', { className, label: separator }, x) : _.remove(state.list, { n }) && null // custom-code wants us to skip this entry
309
- }, showFilter && h(Checkbox, {
315
+ },
316
+ showFilter && h(Checkbox, {
317
disabled: !entry.canSelect(),
318
'aria-labelledby': ariaId,
319
value: selected[uri] || false,
@@ -319,22 +326,16 @@ const Entry = ({ entry, midnight, separator }: EntryProps) => {
326
}),
327
h('span', { className: 'link-wrapper' }, // container to handle mouse over for both children
328
// we treat webpages as folders, with menu to comment
322
- isFolder ? h(Fragment, {}, // internal navigation, use Link component
323
- h(Link, {
324
- to: uri,
325
- onClick,
326
- reloadDocument: entry.web, // without reloadDocument, once you enter the web page, the back button won't bring you back to the frontend
327
- ...dragProps,
328
- ...ariaProps,
329
- },
330
- ico, h('span', { className: 'container-folder' }, containerName), name), // don't use name, as we want to include whole path in case of search
331
- // popup button is here to be able to detect link-wrapper:hover
332
- file_menu_on_link && !showingButton && h('button', {
333
- className: 'popup-menu-button',
334
- onClick: fileMenu
335
- }, hIcon('menu'), t`Menu`)
336
- ) : h('a', { href: uri, onClick, target: entry.target, ...ariaProps, ...dragProps },
337
- ico, h('span', { className: 'container-folder' }, containerName), name ),
329
+ !isFolder ? h('a', { href: uri, ...commonProps, target: entry.target, rel: entry.target && 'noopener noreferrer' })
330
+ : h(Fragment, {},
331
+ // without reloadDocument, once you enter the web page, the back button won't bring you back to the frontend
332
+ h(Link, { to: uri, reloadDocument: entry.web, ...commonProps }), // Link = internal navigation
333
+ // popup button is here to be able to detect link-wrapper:hover
334
+ file_menu_on_link && !showingButton && h('button', {
335
+ className: 'popup-menu-button',
336
+ onClick: fileMenu
337
+ }, hIcon('menu'), t`Menu`)
338
+ ),
339
),
340
h(CustomCode, { name: 'afterEntryName', entry }),
341
entry.comment && h('div', { className: 'entry-comment' }, entry.comment),