Add appbar translations

This commit is contained in:
Nick Mowen 2022-08-27 10:31:20 -06:00
parent ef828a303d
commit 9eefe8133c
2 changed files with 22 additions and 11 deletions

View File

@ -1,9 +1,18 @@
{
"are_you_sure": "Are you sure?",
"auto_dark_mode": "Auto Dark Mode",
"birdseye": "Birdseye",
"cameras": "Cameras",
"cancel": "Cancel",
"dark": "Dark",
"debug": "Debug",
"documentation": "Documentation",
"events": "Events",
"github": "GitHub",
"style_guide": "Style Guide"
"light": "Light",
"restart_frigate": "Restart Frigate",
"restart_in_progress": "Restart in progress",
"style_guide": "Style Guide",
"wait_for_restart": "Please wait a few seconds for the restart to complete before reloading the page.",
"yes": "Yes"
}

View File

@ -10,8 +10,10 @@ import Prompt from './components/Prompt';
import { useDarkMode } from './context';
import { useCallback, useRef, useState } from 'preact/hooks';
import { useRestart } from './api/mqtt';
import { useTranslation } from 'react-i18next';
export default function AppBar() {
const { t } = useTranslation();
const [showMoreMenu, setShowMoreMenu] = useState(false);
const [showDialog, setShowDialog] = useState(false);
const [showDialogWait, setShowDialogWait] = useState(false);
@ -56,29 +58,29 @@ export default function AppBar() {
<BaseAppBar title={LinkedLogo} overflowRef={moreRef} onOverflowClick={handleShowMenu} />
{showMoreMenu ? (
<Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
<MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
<MenuItem icon={AutoAwesomeIcon} label={t('auto_dark_mode')} value="media" onSelect={handleSelectDarkMode} />
<MenuSeparator />
<MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
<MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
<MenuItem icon={LightModeIcon} label={t('light')} value="light" onSelect={handleSelectDarkMode} />
<MenuItem icon={DarkModeIcon} label={t('dark')} value="dark" onSelect={handleSelectDarkMode} />
<MenuSeparator />
<MenuItem icon={FrigateRestartIcon} label="Restart Frigate" onSelect={handleRestart} />
<MenuItem icon={FrigateRestartIcon} label={t('restart_frigate')} onSelect={handleRestart} />
</Menu>
) : null}
{showDialog ? (
<Prompt
onDismiss={handleDismissRestartDialog}
title="Restart Frigate"
text="Are you sure?"
title={t('restart_frigate')}
text={t('are_you_sure')}
actions={[
{ text: 'Yes', color: 'red', onClick: handleClickRestartDialog },
{ text: 'Cancel', onClick: handleDismissRestartDialog },
{ text: `${t('yes')}`, color: 'red', onClick: handleClickRestartDialog },
{ text: `${t('cancel')}`, onClick: handleDismissRestartDialog },
]}
/>
) : null}
{showDialogWait ? (
<Prompt
title="Restart in progress"
text="Please wait a few seconds for the restart to complete before reloading the page."
title={t('restart_in_progress')}
text={t('wait_for_restart')}
/>
) : null}
</Fragment>