admin/fs: icon tooltips
Massimo Melina committed
Mar 2, 2022 at 16:37 UTC
d452bea6fd8fc714a9134ab4c5b4ac5405b1ed19
3 files changed
+16
-10
admin/src/MonitorPage.ts
+3
-3
@@ -4,10 +4,10 @@ import _ from "lodash"
4
import { isValidElement, createElement as h, useMemo, Fragment } from "react"
5
import { apiCall, useApiComp, useApiList } from "./api"
6
import { Delete, Lock, Refresh } from '@mui/icons-material'
7
-import { Box, Grid, Tooltip, Typography } from '@mui/material'
7
+import { Box, Grid, Typography } from '@mui/material'
8
import { DataGrid } from "@mui/x-data-grid"
9
import { Alert } from '@mui/material'
10
-import { formatBytes, IconBtn } from "./misc"
10
+import { formatBytes, IconBtn, iconTooltip } from "./misc"
11
import { alertDialog } from "./dialog"
12
import { prefix } from './misc'
13
@@ -77,7 +77,7 @@ function Connections() {
77
align: 'center',
78
renderCell: ({ value, row }) => h(Fragment, {},
79
'IPv' + value,
80
- row.secure && h(Tooltip, { title:"HTTPS", children: h(Lock, { sx:{ opacity:.5 } }) })
80
+ row.secure && iconTooltip(Lock, "HTTPS", { opacity:.5 })
81
)
82
},
83
{
admin/src/VfsTree.ts
+5
-5
@@ -2,7 +2,7 @@
2
3
import { makeStyles } from '@mui/styles'
4
import { state, useSnapState } from './state'
5
-import { createElement as h, Fragment, ReactElement, useState } from 'react'
5
+import { createElement as h, ReactElement, useState } from 'react'
6
import { TreeItem, TreeView } from '@mui/lab'
7
import {
8
ChevronRight,
@@ -15,7 +15,7 @@ import {
15
RemoveRedEye
16
} from '@mui/icons-material'
17
import { VfsNode, Who } from './VfsPage'
18
-import { isWindowsDrive, onlyTruthy } from './misc'
18
+import { iconTooltip, isWindowsDrive, onlyTruthy } from './misc'
19
20
export const FolderIcon = Folder
21
export const FileIcon = InsertDriveFileOutlined
@@ -63,9 +63,9 @@ export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
63
return h(TreeItem, {
64
label: h('div', { className: styles.label },
65
h(!name ? Home : folder ? FolderIcon : FileIcon),
66
- isRestricted(node.can_see) && h(RemoveRedEye),
67
- isRestricted(node.can_read) && h(Lock),
68
- node.masks && h(Face),
66
+ isRestricted(node.can_see) && iconTooltip(RemoveRedEye, "Restrictions on who can see"),
67
+ isRestricted(node.can_read) && iconTooltip(Lock, "Restrictions on who can download"),
68
+ node.masks && iconTooltip(Face, "Masks"),
69
!source?.endsWith(name) ? name
70
: h('span', {},
71
h('span', { className:styles.path }, source.slice(0,-name.length)),
admin/src/misc.ts
+8
-2
@@ -1,9 +1,11 @@
1
// This file is part of HFS - Copyright 2020-2021, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { createElement as h, Fragment, FunctionComponent, ReactElement,
3
+import { createElement as h, Fragment, ReactElement,
4
ReactNode, useCallback, useEffect, useRef, useState } from 'react'
5
import { CircularProgress, IconButton, Link, Tooltip } from '@mui/material'
6
import { Link as RouterLink } from 'react-router-dom'
7
+import { SxProps } from '@mui/system'
8
+import { SvgIconComponent } from '@mui/icons-material'
9
10
export type Dict<T = any> = Record<string, T>
11
export type Falsy = false | null | undefined | '' | 0
@@ -94,11 +96,15 @@ export function onlyTruthy<T>(arr: T[]) {
96
return arr.filter(truthy)
97
}
98
97
-export function IconBtn({ title, icon, ...rest }: { title?: string, icon:FunctionComponent, [rest:string]:any }) {
99
+export function IconBtn({ title, icon, ...rest }: { title?: string, icon: SvgIconComponent, [rest:string]:any }) {
100
const ret = h(IconButton, { ...rest }, h(icon))
101
return title ? h(Tooltip, { title, children: ret }) : ret
102
}
103
104
+export function iconTooltip(icon: SvgIconComponent, tooltip: string, sx?: SxProps) {
105
+ return h(Tooltip, { title: tooltip, children: h(icon, { sx }) })
106
+}
107
+
108
export function prefix(pre:string, v:string|number, post:string='') {
109
return v ? pre+v+post : ''
110
}