Add about dialog, with version and helpful links
This commit is contained in:
Deluan
@@ -0,0 +1,146 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Link from '@material-ui/core/Link'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import MuiDialogTitle from '@material-ui/core/DialogTitle'
|
||||
import MuiDialogContent from '@material-ui/core/DialogContent'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import CloseIcon from '@material-ui/icons/Close'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import TableContainer from '@material-ui/core/TableContainer'
|
||||
import Table from '@material-ui/core/Table'
|
||||
import TableBody from '@material-ui/core/TableBody'
|
||||
import TableRow from '@material-ui/core/TableRow'
|
||||
import TableCell from '@material-ui/core/TableCell'
|
||||
import Paper from '@material-ui/core/Paper'
|
||||
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
|
||||
import inflection from 'inflection'
|
||||
import { useTranslate } from 'react-admin'
|
||||
import config from '../config'
|
||||
|
||||
const styles = (theme) => ({
|
||||
root: {
|
||||
margin: 0,
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
right: theme.spacing(1),
|
||||
top: theme.spacing(1),
|
||||
color: theme.palette.grey[500],
|
||||
},
|
||||
})
|
||||
|
||||
const links = {
|
||||
homepage: 'navidrome.org',
|
||||
reddit: 'reddit.com/r/Navidrome',
|
||||
twitter: 'twitter.com/navidrome',
|
||||
discord: 'discord.gg/xh7j7yF',
|
||||
source: 'github.com/deluan/navidrome',
|
||||
featureRequests: 'github.com/deluan/navidrome/issues',
|
||||
}
|
||||
|
||||
const DialogTitle = withStyles(styles)((props) => {
|
||||
const { children, classes, onClose, ...other } = props
|
||||
return (
|
||||
<MuiDialogTitle disableTypography className={classes.root} {...other}>
|
||||
<Typography variant="h5">{children}</Typography>
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
className={classes.closeButton}
|
||||
onClick={onClose}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</MuiDialogTitle>
|
||||
)
|
||||
})
|
||||
|
||||
const DialogContent = withStyles((theme) => ({
|
||||
root: {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
}))(MuiDialogContent)
|
||||
|
||||
const AboutDialog = ({ open, onClose }) => {
|
||||
const translate = useTranslate()
|
||||
return (
|
||||
<Dialog
|
||||
onClose={onClose}
|
||||
onBackdropClick={onClose}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<DialogTitle id="customized-dialog-title" onClose={onClose}>
|
||||
Navidrome Music Server
|
||||
</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<TableContainer component={Paper}>
|
||||
<Table aria-label="song details" size="small">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{translate('menu.version')}:
|
||||
</TableCell>
|
||||
<TableCell align="left">{config.version}</TableCell>
|
||||
</TableRow>
|
||||
{Object.keys(links).map((key) => {
|
||||
return (
|
||||
<TableRow key={key}>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
{translate(`about.links.${key}`, {
|
||||
_: inflection.humanize(inflection.underscore(key)),
|
||||
})}
|
||||
:
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Link
|
||||
href={`https://${links[key]}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{links[key]}
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
<TableRow>
|
||||
<TableCell align="right" component="th" scope="row">
|
||||
<Link
|
||||
href={'https://github.com/sponsors/deluan'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<IconButton size={'small'}>
|
||||
<FavoriteBorderIcon fontSize={'small'} />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Link
|
||||
href={'https://ko-fi.com/deluan'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
ko-fi.com/deluan
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
AboutDialog.propTypes = {
|
||||
open: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default AboutDialog
|
||||
+35
-22
@@ -1,40 +1,53 @@
|
||||
import React, { forwardRef } from 'react'
|
||||
import {
|
||||
AppBar as RAAppBar,
|
||||
MenuItemLink,
|
||||
UserMenu,
|
||||
useTranslate,
|
||||
} from 'react-admin'
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
import { AppBar as RAAppBar, UserMenu, useTranslate } from 'react-admin'
|
||||
import { makeStyles, MenuItem, ListItemIcon } from '@material-ui/core'
|
||||
import InfoIcon from '@material-ui/icons/Info'
|
||||
import config from '../config'
|
||||
import AboutDialog from './AboutDialog'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
menuItem: {
|
||||
root: {
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
active: {
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
icon: { minWidth: theme.spacing(5) },
|
||||
}))
|
||||
|
||||
const VersionMenu = forwardRef((props, ref) => {
|
||||
const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
|
||||
const classes = useStyles(rest)
|
||||
const translate = useTranslate()
|
||||
const classes = useStyles()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
const handleClose = () => {
|
||||
onClick && onClick()
|
||||
setOpen(false)
|
||||
}
|
||||
const label = translate('menu.about')
|
||||
return (
|
||||
<MenuItemLink
|
||||
ref={ref}
|
||||
to="#"
|
||||
primaryText={translate('menu.version', {
|
||||
version: config.version,
|
||||
})}
|
||||
leftIcon={<InfoIcon />}
|
||||
className={classes.menuItem}
|
||||
sidebarIsOpen={true}
|
||||
/>
|
||||
<>
|
||||
<MenuItem
|
||||
ref={ref}
|
||||
onClick={handleOpen}
|
||||
className={classes.root}
|
||||
activeClassName={classes.active}
|
||||
>
|
||||
<ListItemIcon className={classes.icon}>
|
||||
<InfoIcon titleAccess={label} />
|
||||
</ListItemIcon>
|
||||
{label}
|
||||
</MenuItem>
|
||||
<AboutDialog onClose={handleClose} open={open} />
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
const CustomUserMenu = (props) => (
|
||||
<UserMenu {...props}>
|
||||
<VersionMenu />
|
||||
<AboutMenuItem />
|
||||
</UserMenu>
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user