third-party-mirrors/navidrome
1
0
Fork 0
mirror of https://github.com/navidrome/navidrome.git synced 2025-06-04 17:41:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make Personal settings form more consistent with the rest of the App

Browse Source
This commit is contained in:
Deluan 2020-04-02 18:46:09 -04:00
parent 1810cc7ac7
commit c58021e645
1 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/personal/Personal.js
View File

@ -1,41 +1,37 @@
import React from 'react' import React from 'react'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { Card, CardContent, MenuItem, Select } from '@material-ui/core' import { Card } from '@material-ui/core'
import { Title, useTranslate } from 'react-admin' import { Title, SimpleForm, SelectInput, useTranslate } from 'react-admin'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import { changeTheme } from './actions' import { changeTheme } from './actions'
import themes from '../themes' import themes from '../themes'
const useStyles = makeStyles({ const useStyles = makeStyles({
label: { width: '10em', display: 'inline-block' }, root: { marginTop: '1em' }
select: { minWidth: 200 }
}) })
const Personal = () => { const Personal = () => {
const translate = useTranslate() const translate = useTranslate()
const classes = useStyles() const classes = useStyles()
const theme = useSelector((state) => state.theme) const currentTheme = useSelector((state) => state.theme)
const dispatch = useDispatch() const dispatch = useDispatch()
const themeNames = Object.keys(themes).sort() const themeChoices = Object.keys(themes).map((key) => {
return { id: key, name: themes[key].themeName }
})
return ( return (
<Card> <Card className={classes.root}>
<Title title={'Navidrome - ' + translate('menu.personal')} /> <Title title={'Navidrome - ' + translate('menu.personal')} />
<CardContent> <SimpleForm toolbar={false}>
<div className={classes.label}>{translate('menu.theme')}</div> <SelectInput
<Select source="theme"
className={classes.select} initialValue={currentTheme}
value={theme} choices={themeChoices}
variant="filled"
onChange={(event) => { onChange={(event) => {
dispatch(changeTheme(event.target.value)) dispatch(changeTheme(event.target.value))
}} }}
> />
{themeNames.map((t) => ( </SimpleForm>
<MenuItem value={t}>{themes[t].themeName}</MenuItem>
))}
</Select>
</CardContent>
</Card> </Card>
) )
} }