diff --git a/ui/src/personal/Personal.js b/ui/src/personal/Personal.js index 2db40445f..441df2386 100644 --- a/ui/src/personal/Personal.js +++ b/ui/src/personal/Personal.js @@ -10,6 +10,7 @@ import { useLocale, } from 'react-admin' import { makeStyles } from '@material-ui/core/styles' +import HelpOutlineIcon from '@material-ui/icons/HelpOutline' import { changeTheme } from './actions' import themes from '../themes' import i18n from '../i18n' @@ -18,6 +19,20 @@ const useStyles = makeStyles({ root: { marginTop: '1em' }, }) +const helpKey = '_help' + +function openInNewTab(url) { + const win = window.open(url, '_blank') + win.focus() +} + +const HelpMsg = ({ caption }) => ( + <> + +    {caption} + +) + const SelectLanguage = (props) => { const translate = useTranslate() const locale = useLocale() @@ -25,6 +40,10 @@ const SelectLanguage = (props) => { const langChoices = Object.keys(i18n).map((key) => { return { id: key, name: i18n[key].languageName } }) + langChoices.push({ + id: helpKey, + name: , + }) return ( { defaultValue={locale} choices={langChoices} onChange={(event) => { + if (event.target.value === helpKey) { + openInNewTab( + 'https://www.navidrome.org/docs/developers/translations/' + ) + return + } setLocale(event.target.value) localStorage.setItem('locale', event.target.value) }} @@ -47,6 +72,10 @@ const SelectTheme = (props) => { const themeChoices = Object.keys(themes).map((key) => { return { id: key, name: themes[key].themeName } }) + themeChoices.push({ + id: helpKey, + name: , + }) return ( { defaultValue={currentTheme} choices={themeChoices} onChange={(event) => { + if (event.target.value === helpKey) { + openInNewTab( + 'https://www.navidrome.org/docs/developers/creating-themes/' + ) + return + } dispatch(changeTheme(event.target.value)) }} /> ) } + const Personal = () => { const translate = useTranslate() const classes = useStyles()