admin: nicer
Massimo Melina committed
Nov 22, 2023 at 12:56 UTC
979026f4d0271427c4283c3e92e33f2950e054f7
5 files changed
+25
-10
admin/src/App.ts
+2
-2
@@ -54,8 +54,8 @@ function Routed() {
54
sx: {
55
background: 'url(cup.svg) no-repeat right fixed',
56
backgroundSize: 'contain',
57
- px: { xs: 1, sm: 2, md: 3 },
58
- pb: '1em',
57
+ px: { xs: 1, md: 2, lg: 3 },
58
+ pb: { xs: 1, md: 2 },
59
boxSizing: 'border-box', // keep padding inside the viewport
60
position: 'relative',
61
display: 'flex',
admin/src/LogsPage.ts
+1
-1
@@ -42,7 +42,7 @@ function LogFile({ file, pause }: { file: string, pause?: boolean }) {
42
type: 'dateTime',
43
width: 90,
44
valueGetter: ({ value }) => new Date(value as string),
45
- renderCell: ({ value }) => h(Box, { lineHeight: '1em' }, value.toLocaleDateString(), h(Box, {}, value.toLocaleTimeString()))
45
+ renderCell: ({ value }) => h(Fragment, {}, value.toLocaleDateString(), h('br'), value.toLocaleTimeString())
46
}
47
return h(DataTable, {
48
error,
admin/src/MainMenu.ts
+1
-1
@@ -69,7 +69,7 @@ export default function Menu({ onSelect }: { onSelect: ()=>void }) {
69
display: 'flex', flexDirection: 'column', '&>a': { flex: '0' },
70
}
71
},
72
- h(Box, { display: 'flex', px: 2, py: 1, gap: 2, alignItems: 'center' },
72
+ h(Box, { display: 'flex', px: 2, py: .5, gap: 2, alignItems: 'center' },
73
h(Box, { fontSize: 'min(3rem, max(5vw, 4vh))' }, 'HFS'),
74
h(Box, { fontSize: 'small' }, replaceStringToReact(VERSION||'', /-/, () => h('br'))),
75
short && h('img', { src: logo, style: { height: '2.5em' } }),
admin/src/index.css
+3
@@ -24,6 +24,9 @@ code {
24
.MuiDataGrid-columnHeaders {
25
background-color: #8882;
26
}
27
+.MuiDataGrid-cell {
28
+ line-height: 1em;
29
+}
30
31
.wrap .MuiDataGrid-cellContent { white-space: normal }
32
admin/src/mui.ts
+18
-6
@@ -3,7 +3,7 @@
3
4
import { PauseCircle, PlayCircle, Refresh, SvgIconComponent } from '@mui/icons-material'
5
import { SxProps } from '@mui/system'
6
-import { createElement as h, FC, forwardRef, Fragment, ReactNode, useState } from 'react'
6
+import { createElement as h, FC, forwardRef, Fragment, ReactNode, useCallback, useState } from 'react'
7
import { Box, BoxProps, Breakpoint, ButtonProps, CircularProgress, IconButton, IconButtonProps, Link, LinkProps,
8
Tooltip, TooltipProps, useMediaQuery } from '@mui/material'
9
import { formatPerc, WIKI_URL } from '../../src/cross'
@@ -200,12 +200,24 @@ export function LinkBtn({ ...rest }: LinkProps) {
200
}
201
202
export function usePauseButton() {
203
- const [pause, setPause] = useState(false)
203
+ const [go, btn] = useToggleButton(v => ({
204
+ title: v ? "Pause" : "Resume",
205
+ icon: v ? PauseCircle : PlayCircle,
206
+ sx: { rotate: v ? '180deg' : '0deg' },
207
+ }), true)
208
+ return { pause: !go, pauseButton: btn }
209
+}
210
+
211
+export function useToggleButton(iconBtn: (state:boolean) => Omit<IconBtnProps, 'onClick'>, def=false) {
212
+ const [state, setState] = useState(def)
213
+ const toggle = useCallback(() => setState(x => !x), [])
214
+ const props = iconBtn(state)
215
const el = h(IconBtn, {
205
- title: pause ? "Resume" : "Pause",
206
- icon: pause ? PlayCircle : PauseCircle,
216
size: 'small',
208
- onClick() { setPause(x => !x) }
217
+ color: state ? 'primary' : 'default',
218
+ ...props,
219
+ sx: { transition: 'all .5s', ...props.sx },
220
+ onClick: toggle,
221
})
210
- return { pause, pauseButton: el }
222
+ return [state, el] as const
223
}
\ No newline at end of file