admin: tooltip to tell the user about menu shortcut
Massimo Melina committed
Feb 4, 2024 at 15:19 UTC
947dd9e43f478337c12a367e0be4ec3d8f22ae43
2 files changed
+12
-8
admin/src/App.ts
+8
-3
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, Fragment, useState } from 'react'
3
+import { createElement as h, Fragment, useCallback, useState } from 'react'
4
import { HashRouter, Routes, Route, useLocation, useNavigate } from 'react-router-dom'
5
import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
6
import { AppBar, Box, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
@@ -61,10 +61,11 @@ function Routed() {
61
!large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
62
!large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
63
h(MainMenu, {
64
- onSelect: () => setOpen(false)
64
+ onSelect: () => setOpen(false),
65
+ itemTitle,
66
})),
67
h(Box, { display: 'flex', flex: 1, }, // horizontal layout for menu-content
67
- large && h(MainMenu),
68
+ large && h(MainMenu, { itemTitle, onSelect(){} }),
69
h(Box, {
70
component: 'main',
71
sx: {
@@ -91,6 +92,10 @@ function Routed() {
92
)
93
}
94
95
+function itemTitle(idx: number) {
96
+ return idx < 10 ? `${isMac ? 'CTRL' : 'ALT'} + ${(idx+1) % 10}` : ''
97
+}
98
+
99
function StickyBar({ title, openMenu }: { title?: string, openMenu: ()=>void }) {
100
return h(AppBar, { position: 'sticky', sx: { mb: 2 } },
101
h(Toolbar, {},
admin/src/MainMenu.ts
+4
-5
@@ -1,7 +1,7 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { createElement as h, FC } from 'react';
4
-import { List, ListItemButton, ListItemIcon, ListItemText, Box } from '@mui/material'
4
+import { List, ListItemButton, ListItemIcon, ListItemText, Box, Tooltip } from '@mui/material'
5
import {
6
AccountTree,
7
Extension,
@@ -56,7 +56,7 @@ export const mainMenu: MenuEntry[] = [
56
{ path: 'logout', icon: Logout, comp: LogoutPage }
57
]
58
59
-export default function Menu({ onSelect }: { onSelect: ()=>void }) {
59
+export default function Menu({ onSelect, itemTitle }: { onSelect: ()=>void, itemTitle: (idx: number) => string }) {
60
const { VERSION } = getHFS()
61
const logo = 'hfs-logo.svg'
62
const short = useWindowSize().height < 700
@@ -75,9 +75,8 @@ export default function Menu({ onSelect }: { onSelect: ()=>void }) {
75
h(Box, { fontSize: 'small' }, replaceStringToReact(VERSION||'', /-/, () => h('br'))),
76
short && h('img', { src: logo, style: { height: '2.5em' } }),
77
),
78
- mainMenu.map(it =>
78
+ mainMenu.map((it, idx) => h(Tooltip, { key: it.path, title: itemTitle(idx), placement: 'right', children:
79
h(ListItemButton, {
80
- key: it.path,
80
to: it.path,
81
component: NavLink,
82
onClick: onSelect,
@@ -87,7 +86,7 @@ export default function Menu({ onSelect }: { onSelect: ()=>void }) {
86
},
87
it.icon && h(ListItemIcon, { sx:{ color: 'primary.contrastText', minWidth: 48 } }, h(it.icon)),
88
h(ListItemText, { sx: { whiteSpace: 'nowrap' }, primary: getMenuLabel(it) })
90
- ) ),
89
+ ) }) ),
90
!short && h(Box, { sx: { flex: 1, opacity: .7, background: `url(${logo}) no-repeat bottom`, backgroundSize: 'contain', margin: 2 } }),
91
)
92
)