Commit 35cfc398 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Merge remote-tracking branch 'origin/ui-framework'

# Conflicts:
#	src/index.html
parents 9a45b375 1a0e5be8
{
"current language code": "ar",
"current language": "لعربية",
"EntangledAfrica1": "املرتابطة أفريقيا",
"EntangledAfrica2": "...... ca. 6.000 - 500 BP"
}
\ No newline at end of file
{
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
"current language code": "de",
"current language": "Deutsch",
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
}
\ No newline at end of file
{
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
"current language code": "en",
"current language": "English",
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
}
\ No newline at end of file
{
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui"
"current language code": "fr",
"current language": "Français",
"EntangledAfrica1": "Entangled Africa",
"EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui"
}
\ No newline at end of file
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, MenuList, MenuItem, Paper } from '@material-ui/core';
import TranslateIcon from '@material-ui/icons/Translate';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Popper from '@material-ui/core/Popper';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
},
paper: {
marginRight: theme.spacing(2),
},
}));
export const PageHeader = () => {
const { t, i18n } = useTranslation();
......@@ -8,16 +24,74 @@ export const PageHeader = () => {
i18n.changeLanguage(lng);
};
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
function handleLanguageChange(newLang) {
changeLanguage(newLang);
setOpen(false);
}
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
// return focus to the button when we transitioned from !open -> open
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return(
<header>
<div>
<button onClick={() => changeLanguage('de')}>Deutsch</button>
<button onClick={() => changeLanguage('en')}>English</button>
<button onClick={() => changeLanguage('fr')}>Français</button>
<button onClick={() => changeLanguage('ar')}>لعربية</button>
</div>
<h1>{t('EntangledAfrica1')}</h1>
<h2>{t('EntangledAfrica2')}</h2>
</header>
)
<div className={classes.root}>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
<TranslateIcon/> {t('current language')}
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'top' ? 'left top' : 'left bottom' }}
>
<Paper className={classes.paper}>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={() => handleLanguageChange('de')}>Deutsch</MenuItem>
<MenuItem onClick={() => handleLanguageChange('en')}>English</MenuItem>
<MenuItem onClick={() => handleLanguageChange('fr')}>Français</MenuItem>
<MenuItem onClick={() => handleLanguageChange('ar')}>لعربية</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
};
\ No newline at end of file
......@@ -7,6 +7,7 @@ import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
import './index.css';
import './i18n';
import { useTranslation } from 'react-i18next';
import CssBaseline from '@material-ui/core/CssBaseline';
const App = () => {
......@@ -32,7 +33,9 @@ const App = () => {
return(
<LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
<CssBaseline />
<PageHeader />
<h1>{t('EntangledAfrica1')}: {t('EntangledAfrica2')}</h1>
<div>
<span>{labels.HelloWorld[settings.language]}</span><br />
<HelloComputerButton />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment