admin: nicer alert dialogs
Massimo Melina committed
Dec 24, 2023 at 12:52 UTC
8c6e45a99c9646d0cd032dc68fed2fea3455116e
5 files changed
+17
-19
admin/src/HomePage.ts
+2
-3
@@ -137,8 +137,7 @@ function renderChangelog(s: string) {
137
138
function onText(s: string) {
139
return replaceStringToReact(s, /(?<=^|\W)#(\d+)\b/g, m => // link issues
140
- h(Link, { href: REPO_URL + 'issues/' + m[1], target: '_blank' },
141
- h(OpenInNew, { sx: { verticalAlign: 'bottom' } }) ))
140
+ h(Link, { href: REPO_URL + 'issues/' + m[1], target: '_blank' }, h(OpenInNew) ))
141
}
142
}
143
@@ -169,7 +168,7 @@ function entry(color: Color, ...content: ReactNode[]) {
168
color: th => color && th.palette[color]?.main,
169
},
170
h(({ success: CheckCircle, info: Info, '': Info, warning: Warning, error: Error })[color], {
172
- sx: { mb: '-3px', mr: 1, color: color ? undefined : 'primary.main' }
171
+ sx: { mr: 1, color: color ? undefined : 'primary.main' }
172
}),
173
...content)
174
}
admin/src/InternetPage.ts
+1
-1
@@ -351,7 +351,7 @@ function Device({ name, icon, color, ip, below }: any) {
351
352
function TitleCard({ title, icon, color, children }: { title: ReactNode, icon?: SvgIconComponent, color?: SvgIconProps['color'], children?: ReactNode }) {
353
return h(Card, {}, h(CardContent, {}, h(Flex, { vert: true },
354
- h(Box, { fontSize: 'x-large' }, icon && h(icon, { color, sx: { mr: 1, verticalAlign: 'bottom', mb: '2px' } }), title),
354
+ h(Box, { fontSize: 'x-large' }, icon && h(icon, { color, sx: { mr: 1, mb: '2px' } }), title),
355
children
356
)))
357
}
admin/src/dialog.ts
+10
-14
@@ -9,10 +9,11 @@ import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/i
9
import { newDialog, closeDialog, dialogsDefaults, DialogOptions, componentOrNode, pendingPromise,
10
focusSelector } from '@hfs/shared'
11
import { Form, FormProps } from '@hfs/mui-grid-form'
12
-import { IconBtn, Flex, Center } from './mui'
12
+import { IconBtn, Flex, Center, Btn } from './mui'
13
import { useDark } from './theme'
14
import { useWindowSize } from 'usehooks-ts'
15
import md from './md'
16
+import _ from 'lodash'
17
export * from '@hfs/shared/dialogs'
18
19
dialogsDefaults.Container = function Container(d:DialogOptions) {
@@ -47,12 +48,13 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
48
sx: {
49
position: 'sticky', top: 0, p: 1, zIndex: 2, boxShadow: '0 0 8px #0004',
50
display: 'flex', alignItems: 'center',
51
+ gap: 1,
52
...titleSx
51
- }
53
+ },
54
},
53
- d.icon && h(Box, { mr: 1 }, componentOrNode(d.icon)),
55
+ d.icon && componentOrNode(d.icon),
56
h(Box, { flex:1, minWidth: 40 }, componentOrNode(d.title)),
55
- h(IconBtn, { icon: Close, title: "close", sx: { ml: 1 }, onClick: () => closeDialog() }),
57
+ h(IconBtn, { icon: Close, title: "close", onClick: () => closeDialog() }),
58
),
59
h(DialogContent, {
60
ref,
@@ -88,21 +90,15 @@ export function alertDialog(msg: ReactElement | string | Error, options?: AlertT
90
const promise = pendingPromise()
91
const dialog = newDialog({
92
className: 'dialog-alert dialog-alert-' + type,
91
- icon: '!',
93
+ icon: opt.icon ?? h(type2ico[type], { color: type }),
94
onClose: promise.resolve,
95
+ title: _.upperFirst(type),
96
...rest,
97
Content() {
98
return h(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
96
- h(IconButton, {
97
- onClick() {
98
- dialog.close()
99
- },
100
- size: 'small',
101
- sx: { position: 'absolute', right: 0, top: 0, opacity: .5 }
102
- }, h(Close)),
103
- opt.icon ?? h(type2ico[type], { color: type, fontSize: 'large' }),
99
isValidElement(msg) ? msg
105
- : h(Box, { fontSize: 'large', mb: 1, lineHeight: '1.8em' }, String(msg)),
100
+ : h(Box, { fontSize: 'large', lineHeight: '1.8em' }, String(msg)),
101
+ h(Btn, { sx: { mt: 1 }, size: 'small', onClick: dialog.close }, 'Close')
102
)
103
}
104
})
admin/src/index.css
+3
@@ -18,6 +18,9 @@ code {
18
monospace;
19
}
20
21
+.MuiSvgIcon-root {
22
+ vertical-align: bottom;
23
+}
24
.MuiTreeItem-content {
25
box-sizing: border-box; /* avoid unwanted scrolling caused by its width:100% + padding */
26
}
admin/src/mui.ts
+1
-1
@@ -185,7 +185,7 @@ function execDoneMessage(msg: boolean | string | undefined) {
185
}
186
187
export function iconTooltip(icon: SvgIconComponent, tooltip: ReactNode, sx?: SxProps) {
188
- return h(Tooltip, { title: tooltip, children: h(icon, { sx: { verticalAlign: 'bottom', ...sx } }) })
188
+ return h(Tooltip, { title: tooltip, children: h(icon, { sx }) })
189
}
190
191
export function InLink(props:any) {