Working language switcher

This commit is contained in:
Philipp Heckel 2022-04-07 20:31:24 -04:00
parent 750e390b5d
commit 96fb7e2296
5 changed files with 55 additions and 16 deletions

View file

@ -0,0 +1,3 @@
{
"nav_button_subscribe": "Thema abonnieren"
}

View file

@ -22,6 +22,7 @@ import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "
import SendDialog from "./SendDialog";
import Messaging from "./Messaging";
import "./i18n"; // Translations!
import {Backdrop, CircularProgress} from "@mui/material";
// TODO races when two tabs are open
// TODO investigate service workers
@ -48,12 +49,6 @@ const App = () => {
);
}
const Loader = () => (
<div>
<div>loading...</div>
</div>
);
const AllSubscriptions = () => {
const { subscriptions } = useOutletContext();
return <Notifications mode="all" subscriptions={subscriptions}/>;
@ -132,6 +127,18 @@ const Main = (props) => {
);
};
const Loader = () => (
<Backdrop
open={true}
sx={{
zIndex: 100000,
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
}}
>
<CircularProgress color="success" disableShrink />
</Backdrop>
);
const updateTitle = (newNotificationsCount) => {
document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
}

View file

@ -33,6 +33,7 @@ import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import userManager from "../app/UserManager";
import {playSound} from "../app/utils";
import {useTranslation} from "react-i18next";
const Preferences = () => {
return (
@ -40,6 +41,7 @@ const Preferences = () => {
<Stack spacing={3}>
<Notifications/>
<Users/>
<Appearance/>
</Stack>
</Container>
);
@ -60,7 +62,6 @@ const Notifications = () => {
);
};
const Sound = () => {
const sound = useLiveQuery(async () => prefs.sound());
const handleChange = async (ev) => {
@ -362,4 +363,31 @@ const UserDialog = (props) => {
);
};
const Appearance = () => {
return (
<Card sx={{p: 3}}>
<Typography variant="h5">
Appearance
</Typography>
<PrefGroup>
<Language/>
</PrefGroup>
</Card>
);
};
const Language = () => {
const { t, i18n } = useTranslation();
return (
<Pref title="Language">
<FormControl fullWidth variant="standard" sx={{ m: 1 }}>
<Select value={i18n.language} onChange={(ev) => i18n.changeLanguage(ev.target.value)}>
<MenuItem value="en">English</MenuItem>
<MenuItem value="de">Deutsch</MenuItem>
</Select>
</FormControl>
</Pref>
)
};
export default Preferences;

View file

@ -3,10 +3,13 @@ import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
// learn more: https://github.com/i18next/i18next-browser-languageDetector
// learn more: https://github.com/i18next/i18next-http-backend
// Translations using i18next
// - Options: https://www.i18next.com/overview/configuration-options
// - Browser Language Detector: https://github.com/i18next/i18next-browser-languageDetector
// - HTTP Backend (load files via fetch): https://github.com/i18next/i18next-http-backend
//
// See example project here:
// https://github.com/i18next/react-i18next/tree/master/example/react
i18n
.use(Backend)

View file

@ -1,8 +1,6 @@
import * as React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './components/App';
ReactDOM.render(
<App />,
document.querySelector('#root')
);
const root = createRoot(document.querySelector('#root'));
root.render(<App />);