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()