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