admin/fs: better icon for "system integration"
Massimo Melina committed
Aug 19, 2024 at 19:24 UTC
1b2fe718330d6ede31f5d7320b96e89aba0720db
3 files changed
+42
-33
admin/src/LogsPage.ts
+30
-25
@@ -299,47 +299,52 @@ function LogFile({ file, addToFooter, hidden }: { hidden?: boolean, file: string
299
}
300
}
301
302
+const UW = 'https://upload.wikimedia.org/wikipedia/commons/'
303
+const BROWSER_ICONS = {
304
+ Chrome: UW + 'e/e1/Google_Chrome_icon_%28February_2022%29.svg',
305
+ Chromium: UW + 'f/fe/Chromium_Material_Icon.svg',
306
+ Firefox: UW + 'a/a0/Firefox_logo%2C_2019.svg',
307
+ Safari: UW + '5/52/Safari_browser_logo.svg',
308
+ Edge: UW + '9/98/Microsoft_Edge_logo_%282019%29.svg',
309
+ Opera: UW + '4/49/Opera_2015_icon.svg',
310
+}
311
+const OS_ICONS = {
312
+ android: UW + 'd/d7/Android_robot.svg',
313
+ linux: UW + '0/0a/Tux-shaded.svg',
314
+ win: UW + '0/0a/Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg',
315
+ apple: UW + '7/74/Apple_logo_dark_grey.svg', // grey works for both themes
316
+}
317
+const OSS = {
318
+ apple: /Mac OS|iPhone OS/,
319
+ win: /Windows NT/,
320
+ android: /Android/,
321
+ linux: /Linux/,
322
+}
323
+
324
export function agentIcons(agent: string | undefined) {
325
if (!agent) return
304
- const UW = 'https://upload.wikimedia.org/wikipedia/commons/'
326
const short = shortenAgent(agent)
306
- const browserIcon = h(AgentIcon, { k: short, altText: true, map: {
307
- Chrome: UW + 'e/e1/Google_Chrome_icon_%28February_2022%29.svg',
308
- Chromium: UW + 'f/fe/Chromium_Material_Icon.svg',
309
- Firefox: UW + 'a/a0/Firefox_logo%2C_2019.svg',
310
- Safari: UW + '5/52/Safari_browser_logo.svg',
311
- Edge: UW + '9/98/Microsoft_Edge_logo_%282019%29.svg',
312
- Opera: UW + '4/49/Opera_2015_icon.svg',
313
- } })
327
+ const browserIcon = h(AgentIcon, { k: short, altText: true, map: BROWSER_ICONS })
328
const os = _.findKey(OSS, re => re.test(agent))
315
- const osIcon = os && h(AgentIcon, { k: os, map: {
316
- android: UW + 'd/d7/Android_robot.svg',
317
- linux: UW + '0/0a/Tux-shaded.svg',
318
- win: UW + '0/0a/Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg',
319
- apple: UW + '7/74/Apple_logo_dark_grey.svg', // grey works for both themes
320
- } })
321
- return hTooltip(agent, undefined, h('span', {}, browserIcon, ' ', osIcon) )
329
+ return hTooltip(agent, undefined, h(Box, { fontSize: '110%' }, browserIcon, ' ', os && osIcon(os as any)) )
330
}
331
332
const alreadyFailed: any = {}
333
334
+export function osIcon(k: keyof typeof OS_ICONS) {
335
+ return h(AgentIcon, { k, map: OS_ICONS })
336
+}
337
+
338
function AgentIcon({ k, map, altText }: { k: string, map: Dict<string>, altText?: boolean }) {
339
const src = map[k]
340
const [err, setErr] = useState(alreadyFailed[k])
341
return !src || err ? h(Fragment, {}, altText ? k : null) : h('img', {
330
- src: err ? `/${k}.svg` : src,
331
- style: { height: '1.3em', verticalAlign: 'bottom', marginRight: '.2em' },
342
+ src,
343
+ style: { height: '1.2em', verticalAlign: 'bottom', marginRight: '.2em' },
344
onError() { setErr(alreadyFailed[k] = true) }
345
})
346
}
347
336
-const OSS = {
337
- apple: /Mac OS|iPhone OS/,
338
- win: /Windows NT/,
339
- android: /Android/,
340
- linux: /Linux/,
341
-}
342
-
348
function parseLogLine(line: string, id: number) {
349
const m = /^(.+?) (.+?) (.+?) \[(.{11}):(.{14})] "(\w+) ([^"]+) HTTP\/\d.\d" (\d+) (-|\d+) ?(.*)/.exec(line)
350
if (!m) return
admin/src/VfsMenuBar.ts
+4
-3
@@ -2,7 +2,8 @@
2
3
import { createElement as h } from 'react'
4
import { Alert, Box, List, ListItem, ListItemIcon, ListItemText } from '@mui/material'
5
-import { Microsoft, Storage } from '@mui/icons-material'
5
+import { Storage } from '@mui/icons-material'
6
+import { osIcon } from './LogsPage'
7
import { reloadVfs } from './VfsPage'
8
import { prefix } from './misc'
9
import { Btn, Flex, reloadBtn, useBreakpoint } from './mui'
@@ -43,8 +44,8 @@ function SystemIntegrationButton({ platform }: { platform: string | undefined })
44
const isWindows = platform === 'win32'
45
const { data: integrated, reload } = useApi(isWindows && 'windows_integrated')
46
const sm = useBreakpoint('sm')
46
- return !isWindows ? null : h(Btn, {
47
- icon: Microsoft,
47
+ return h(Btn, {
48
+ icon: osIcon('win'),
49
variant: 'outlined',
50
doneMessage: true,
51
...(!integrated?.is ? {
admin/src/mui.ts
+8
-5
@@ -3,8 +3,10 @@
3
4
import { PauseCircle, PlayCircle, Refresh, SvgIconComponent } from '@mui/icons-material'
5
import { SxProps } from '@mui/system'
6
-import { createElement as h, forwardRef, Fragment, ReactElement, ReactNode, useCallback, useEffect, useRef,
7
- ForwardedRef, useState, useMemo } from 'react'
6
+import {
7
+ createElement as h, forwardRef, Fragment, ReactElement, ReactNode, useCallback, useEffect, useRef,
8
+ ForwardedRef, useState, useMemo, isValidElement
9
+} from 'react'
10
import { Box, BoxProps, Breakpoint, ButtonProps, CircularProgress, IconButton, IconButtonProps, Link, LinkProps,
11
Tooltip, TooltipProps, useMediaQuery } from '@mui/material'
12
import { anyDialogOpen, closeDialog, formatPerc, isIpLan, isIpLocalHost, prefix, WIKI_URL, with_ } from './misc'
@@ -123,7 +125,7 @@ export const IconBtn = forwardRef((props: IconBtnProps, ref: ForwardedRef<HTMLBu
125
h(Btn, { ref, ...props }))
126
127
export interface BtnProps extends Omit<ButtonProps & IconButtonProps,'disabled'|'title'|'onClick'> {
126
- icon?: SvgIconComponent
128
+ icon?: SvgIconComponent | ReactElement
129
title?: ReactNode
130
disabled?: boolean | string
131
progress?: boolean | number
@@ -160,9 +162,10 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
162
}
163
},
164
} as const, rest)
165
+ const iconElement = isValidElement(icon) ? icon : (icon && h(icon))
166
let ret: ReactElement = children || !icon ? h(LoadingButton, _.merge({
167
variant: 'contained',
165
- startIcon: icon && h(icon),
168
+ startIcon: iconElement,
169
loading: Boolean(loading || loadingState || progress),
170
loadingPosition: icon && 'start',
171
loadingIndicator: typeof progress !== 'number' ? undefined
@@ -175,7 +178,7 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
178
...(typeof progress === 'number' ? { value: progress*100, variant: 'determinate' } : null),
179
style: { position:'absolute', top: '10%', left: '10%', width: '80%', height: '80%' }
180
}),
178
- h(icon)
181
+ iconElement,
182
)
183
184
const aria = rest['aria-label'] ?? with_(_.isString(title) && title, x => x ? `${children || ''} (${x})` : undefined)