dev: file-menu: subLabel
Massimo Melina committed
Jul 28, 2023 at 12:16 UTC
27700dbe1fde7dda375b67faca960d1d47361d9e
2 files changed
+27
-16
frontend/src/fileMenu.ts
+20
-15
@@ -1,6 +1,6 @@
1
import { t, useI18N } from './i18n'
2
import { dontBotherWithKeys, formatBytes, hfsEvent, hIcon, newDialog, prefix, with_ } from './misc'
3
-import { createElement as h, Fragment, isValidElement, MouseEventHandler, MouseEvent, ReactNode } from 'react'
3
+import { createElement as h, Fragment, isValidElement, MouseEvent, ReactNode } from 'react'
4
import _ from 'lodash'
5
import { getEntryIcon, MISSING_PERM } from './BrowseFiles'
6
import { DirEntry, pathEncode, state } from './state'
@@ -13,9 +13,10 @@ import { navigate } from './App'
13
14
interface FileMenuEntry {
15
label: ReactNode
16
+ subLabel?: ReactNode
17
href?: string
18
icon?: string
18
- onClick?: MouseEventHandler
19
+ onClick?: (ev:MouseEvent<Element>) => any
20
}
21
22
export function openFileMenu(entry: DirEntry, ev: MouseEvent, addToMenu: (FileMenuEntry | 'open' | 'delete' | 'show')[]) {
@@ -77,20 +78,24 @@ export function openFileMenu(entry: DirEntry, ev: MouseEvent, addToMenu: (FileMe
78
),
79
entry.cantOpen && h(Fragment, {}, hIcon('password', { style: { marginRight: '.5em' } }), t(MISSING_PERM)),
80
h('div', { className: 'file-menu' },
80
- dontBotherWithKeys(menu.map((e: any, i) => // render menu entries
81
+ dontBotherWithKeys(menu.map((e: FileMenuEntry, i) => // render menu entries
82
isValidElement(e) ? e
82
- : !e?.label ? null :
83
- h('a', {
84
- key: i,
85
- href: '#',
86
- ..._.omit(e, ['label', 'icon', 'onClick']),
87
- async onClick(ev: MouseEvent) {
88
- if (!e.href) // even with #, the
89
- ev.preventDefault()
90
- if ((await e.onClick?.()) !== false)
91
- close()
92
- }
93
- }, hIcon(e.icon || 'file'), e.label )
83
+ : e?.label && h('a', {
84
+ key: i,
85
+ href: '#',
86
+ ..._.omit(e, ['label', 'icon', 'onClick']),
87
+ async onClick(event: MouseEvent) {
88
+ if (!e.href) // even with #, the
89
+ event.preventDefault()
90
+ if (false !== await e.onClick?.(event))
91
+ close()
92
+ }
93
+ },
94
+ hIcon(e.icon || 'file'),
95
+ h('label', { style: { display: 'flex', flexDirection: 'column' } },
96
+ h('div', {}, e.label),
97
+ h('small', {}, e.subLabel) )
98
+ )
99
))
100
)
101
)
frontend/src/index.scss
+7
-1
@@ -432,7 +432,13 @@ button label {
432
flex-direction: column;
433
gap: 1em;
434
& a {
435
- & .icon { margin-right: 0.5em; }
435
+ display: flex;
436
+ align-items: flex-start;
437
+ label {
438
+ margin-top: .1em;
439
+ small { display: block }
440
+ }
441
+ .icon { margin-right: 0.5em; }
442
&:hover { @extend .highlightedText }
443
}
444
}