Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ consolidated app nav to settings & dropdown

Browse Source
This commit is contained in:
Josh Corbett 2023-07-25 23:33:02 -06:00 committed by psychedelicious
parent 3dccc4d61e
commit 6fa42cb10c
26 changed files with 97 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/public/locales/ar.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "مجتمع",
"hotkeysLabel": "مفاتيح الأختصار",
"themeLabel": "الموضوع",
"languagePickerLabel": "منتقي اللغة",

1
invokeai/frontend/web/public/locales/de.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Gemeinschaft",
"themeLabel": "Thema",
"languagePickerLabel": "Sprachauswahl",
"reportBugLabel": "Fehler melden",

1
invokeai/frontend/web/public/locales/en.json
View File

@ -23,6 +23,7 @@
"menu": "Menu"
},
"common": {
"communityLabel": "Community",
"hotkeysLabel": "Hotkeys",
"darkMode": "Dark Mode",
"lightMode": "Light Mode",

1
invokeai/frontend/web/public/locales/es.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Comunidad",
"hotkeysLabel": "Atajos de teclado",
"themeLabel": "Tema",
"languagePickerLabel": "Selector de idioma",

1
invokeai/frontend/web/public/locales/fi.json
View File

@ -22,6 +22,7 @@
"showOptionsPanel": "Näytä asetukset"
},
"common": {
"communityLabel": "Yhteisö",
"postProcessDesc2": "Erillinen käyttöliittymä tullaan julkaisemaan helpottaaksemme työnkulkua jälkikäsittelyssä.",
"training": "Kouluta",
"statusLoadingModel": "Ladataan mallia",

1
invokeai/frontend/web/public/locales/fr.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Communauté",
"hotkeysLabel": "Raccourcis clavier",
"themeLabel": "Thème",
"languagePickerLabel": "Sélecteur de langue",

1
invokeai/frontend/web/public/locales/he.json
View File

@ -106,6 +106,7 @@
"modelMergeInterpAddDifferenceHelp": "במצב זה, מודל 3 מופחת תחילה ממודל 2. הגרסה המתקבלת משולבת עם מודל 1 עם קצב האלפא שנקבע לעיל."
},
"common": {
"communityLabel": "קהילה",
"nodesDesc": "מערכת מבוססת צמתים עבור יצירת תמונות עדיין תחת פיתוח. השארו קשובים לעדכונים עבור הפיצ׳ר המדהים הזה.",
"themeLabel": "ערכת נושא",
"languagePickerLabel": "בחירת שפה",

1
invokeai/frontend/web/public/locales/it.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Comunità",
"hotkeysLabel": "Tasti di scelta rapida",
"themeLabel": "Tema",
"languagePickerLabel": "Seleziona lingua",

1
invokeai/frontend/web/public/locales/ja.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "コミュニティ",
"themeLabel": "テーマ",
"languagePickerLabel": "言語選択",
"reportBugLabel": "バグ報告",

1
invokeai/frontend/web/public/locales/ko.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "지역 사회",
"themeLabel": "테마 설정",
"languagePickerLabel": "언어 설정",
"reportBugLabel": "버그 리포트",

1
invokeai/frontend/web/public/locales/nl.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Gemeenschap",
"hotkeysLabel": "Sneltoetsen",
"themeLabel": "Thema",
"languagePickerLabel": "Taalkeuze",

1
invokeai/frontend/web/public/locales/pl.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Wspólnota",
"hotkeysLabel": "Skróty klawiszowe",
"themeLabel": "Motyw",
"languagePickerLabel": "Wybór języka",

1
invokeai/frontend/web/public/locales/pt.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Comunidade",
"greenTheme": "Verde",
"langArabic": "العربية",
"themeLabel": "Tema",

1
invokeai/frontend/web/public/locales/pt_BR.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Comunidade",
"hotkeysLabel": "Teclas de atalho",
"themeLabel": "Tema",
"languagePickerLabel": "Seletor de Idioma",

1
invokeai/frontend/web/public/locales/ru.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Сообщество",
"hotkeysLabel": "Горячие клавиши",
"themeLabel": "Тема",
"languagePickerLabel": "Язык",

1
invokeai/frontend/web/public/locales/sv.json
View File

@ -22,6 +22,7 @@
"showOptionsPanel": "Visa inställningspanelen"
},
"common": {
"communityLabel": "Gemenskap",
"hotkeysLabel": "Snabbtangenter",
"reportBugLabel": "Rapportera bugg",
"githubLabel": "Github",

1
invokeai/frontend/web/public/locales/tr.json
View File

@ -23,6 +23,7 @@
"showGallery": "Galeriyi Göster"
},
"common": {
"communityLabel": "Toplum",
"hotkeysLabel": "Kısayol Tuşları",
"themeLabel": "Tema",
"languagePickerLabel": "Dil Seçimi",

1
invokeai/frontend/web/public/locales/uk.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "Спільнота",
"hotkeysLabel": "Гарячi клавіші",
"themeLabel": "Тема",
"languagePickerLabel": "Мова",

1
invokeai/frontend/web/public/locales/zh_CN.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "社区",
"hotkeysLabel": "快捷键",
"themeLabel": "主题",
"languagePickerLabel": "语言",

1
invokeai/frontend/web/public/locales/zh_Hant.json
View File

@ -1,5 +1,6 @@
{
"common": {
"communityLabel": "社區",
"nodes": "節點",
"img2img": "圖片轉圖片",
"langSimplifiedChinese": "簡體中文",

32
invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx
View File

@ -1,32 +0,0 @@
import { useColorMode } from '@chakra-ui/react';
import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next';
import { FaMoon, FaSun } from 'react-icons/fa';
const ColorModeButton = () => {
const { colorMode, toggleColorMode } = useColorMode();
const { t } = useTranslation();
return (
<IAIIconButton
aria-label={
colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
}
tooltip={
colorMode === 'dark' ? t('common.lightMode') : t('common.darkMode')
}
size="sm"
icon={
colorMode === 'dark' ? (
<FaSun fontSize={19} />
) : (
<FaMoon fontSize={18} />
)
}
onClick={toggleColorMode}
variant="link"
/>
);
};
export default ColorModeButton;

50
invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx
View File

@ -1,50 +0,0 @@
import {
IconButton,
Menu,
MenuButton,
MenuItemOption,
MenuList,
MenuOptionGroup,
Tooltip,
} from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { map } from 'lodash-es';
import { useTranslation } from 'react-i18next';
import { IoLanguage } from 'react-icons/io5';
import { LANGUAGES } from '../store/constants';
import { languageSelector } from '../store/systemSelectors';
import { languageChanged } from '../store/systemSlice';
export default function LanguagePicker() {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const language = useAppSelector(languageSelector);
return (
<Menu closeOnSelect={false}>
<Tooltip label={t('common.languagePickerLabel')} hasArrow>
<MenuButton
as={IconButton}
icon={<IoLanguage />}
variant="link"
aria-label={t('common.languagePickerLabel')}
fontSize={22}
minWidth={8}
/>
</Tooltip>
<MenuList>
<MenuOptionGroup value={language}>
{map(LANGUAGES, (languageName, l: keyof typeof LANGUAGES) => (
<MenuItemOption
key={l}
value={l}
onClick={() => dispatch(languageChanged(l))}
>
{languageName}
</MenuItemOption>
))}
</MenuOptionGroup>
</MenuList>
</Menu>
);
}

33
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -10,6 +10,7 @@ import {
ModalOverlay,
Text,
useDisclosure,
useColorMode,
} from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { VALID_LOG_LEVELS } from 'app/logging/logger';
@ -46,6 +47,10 @@ import SettingSwitch from './SettingSwitch';
import SettingsClearIntermediates from './SettingsClearIntermediates';
import SettingsSchedulers from './SettingsSchedulers';
import StyledFlex from './StyledFlex';
import { useFeatureStatus } from '../../hooks/useFeatureStatus';
import { LANGUAGES } from '../../store/constants';
import { languageChanged } from '../../store/systemSlice';
import { languageSelector } from '../../store/systemSelectors';
const selector = createSelector(
[stateSelector],
@ -166,6 +171,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
[dispatch]
);
const handleLanguageChanged = useCallback(
(l: string) => {
dispatch(languageChanged(l as keyof typeof LANGUAGES));
},
[dispatch]
);
const handleLogToConsoleChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
dispatch(shouldLogToConsoleChanged(e.target.checked));
@ -180,6 +192,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
[dispatch]
);
const { colorMode, toggleColorMode } = useColorMode();
const isLocalizationEnabled =
useFeatureStatus('localization').isFeatureEnabled;
const language = useAppSelector(languageSelector);
return (
<>
{cloneElement(children, {
@ -225,6 +243,11 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
<StyledFlex>
<Heading size="sm">{t('settings.ui')}</Heading>
<SettingSwitch
label={t('common.darkMode')}
isChecked={colorMode === 'dark'}
onChange={toggleColorMode}
/>
<SettingSwitch
label={t('settings.useSlidersForAll')}
isChecked={shouldUseSliders}
@ -267,6 +290,16 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
onChange={handleToggleNodes}
/>
)}
<IAIMantineSelect
disabled={!isLocalizationEnabled}
label={t('common.languagePickerLabel')}
value={language}
data={Object.entries(LANGUAGES).map(([value, label]) => ({
value,
label,
}))}
onChange={handleLanguageChanged}
/>
</StyledFlex>
{shouldShowDeveloperSettings && (

130
invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
View File

@ -1,28 +1,27 @@
import { Flex, Spacer } from '@chakra-ui/react';
import { Flex, MenuGroup, Spacer } from '@chakra-ui/react';
import { memo } from 'react';
import StatusIndicator from './StatusIndicator';
import { Link } from '@chakra-ui/react';
import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
import IAIIconButton from 'common/components/IAIIconButton';
import { useTranslation } from 'react-i18next';
import { FaBug, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
import { FaBug, FaDiscord, FaGithub, FaKeyboard, FaBars } from 'react-icons/fa';
import { MdSettings } from 'react-icons/md';
import { useFeatureStatus } from '../hooks/useFeatureStatus';
import ColorModeButton from './ColorModeButton';
import HotkeysModal from './HotkeysModal/HotkeysModal';
import InvokeAILogoComponent from './InvokeAILogoComponent';
import LanguagePicker from './LanguagePicker';
import SettingsModal from './SettingsModal/SettingsModal';
const SiteHeader = () => {
const { t } = useTranslation();
const isLocalizationEnabled =
useFeatureStatus('localization').isFeatureEnabled;
const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
const githubLink = 'http://github.com/invoke-ai/InvokeAI';
const discordLink = 'https://discord.gg/ZmtBAhwWhy';
return (
<Flex
sx={{
@ -34,87 +33,46 @@ const SiteHeader = () => {
<Spacer />
<StatusIndicator />
<HotkeysModal>
<IAIIconButton
aria-label={t('common.hotkeysLabel')}
tooltip={t('common.hotkeysLabel')}
size="sm"
<Menu>
<MenuButton
as={IAIIconButton}
variant="link"
data-variant="link"
fontSize={20}
icon={<FaKeyboard />}
aria-label={t('accessibility.menu')}
tooltip={t('accessibility.menu')}
icon={<FaBars />}
/>
</HotkeysModal>
{isLocalizationEnabled && <LanguagePicker />}
{isBugLinkEnabled && (
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI/issues"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.reportBugLabel')}
tooltip={t('common.reportBugLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaBug />}
/>
</Link>
)}
{isGithubLinkEnabled && (
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.githubLabel')}
tooltip={t('common.githubLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaGithub />}
/>
</Link>
)}
{isDiscordLinkEnabled && (
<Link
isExternal
href="https://discord.gg/ZmtBAhwWhy"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.discordLabel')}
tooltip={t('common.discordLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaDiscord />}
/>
</Link>
)}
<ColorModeButton />
<SettingsModal>
<IAIIconButton
aria-label={t('common.settingsLabel')}
tooltip={t('common.settingsLabel')}
variant="link"
data-variant="link"
fontSize={22}
size="sm"
icon={<MdSettings />}
/>
</SettingsModal>
<MenuList>
<MenuGroup title={t('common.communityLabel')}>
{isGithubLinkEnabled && (
<MenuItem as="a" href={githubLink} icon={<FaGithub />}>
{t('common.githubLabel')}
</MenuItem>
)}
{isBugLinkEnabled && (
<MenuItem as="a" href={`${githubLink}/issues}`} icon={<FaBug />}>
{t('common.reportBugLabel')}
</MenuItem>
)}
{isDiscordLinkEnabled && (
<MenuItem as="a" href={discordLink} icon={<FaDiscord />}>
{t('common.discordLabel')}
</MenuItem>
)}
</MenuGroup>
<MenuGroup title={t('common.settingsLabel')}>
<HotkeysModal>
<MenuItem as="button" icon={<FaKeyboard />}>
{t('common.hotkeysLabel')}
</MenuItem>
</HotkeysModal>
<SettingsModal>
<MenuItem as="button" icon={<MdSettings />}>
{t('common.settingsLabel')}
</MenuItem>
</SettingsModal>
</MenuGroup>
</MenuList>
</Menu>
</Flex>
);
};

111
invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx
View File

@ -1,111 +0,0 @@
import { Flex, Link } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { FaBug, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
import { MdSettings } from 'react-icons/md';
import HotkeysModal from './HotkeysModal/HotkeysModal';
import LanguagePicker from './LanguagePicker';
import SettingsModal from './SettingsModal/SettingsModal';
import IAIIconButton from 'common/components/IAIIconButton';
import { useFeatureStatus } from '../hooks/useFeatureStatus';
const SiteHeaderMenu = () => {
const { t } = useTranslation();
const isLocalizationEnabled =
useFeatureStatus('localization').isFeatureEnabled;
const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
return (
<Flex
alignItems="center"
flexDirection={{ base: 'column', xl: 'row' }}
gap={{ base: 4, xl: 1 }}
>
<HotkeysModal>
<IAIIconButton
aria-label={t('common.hotkeysLabel')}
tooltip={t('common.hotkeysLabel')}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
icon={<FaKeyboard />}
/>
</HotkeysModal>
{isLocalizationEnabled && <LanguagePicker />}
{isBugLinkEnabled && (
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI/issues"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.reportBugLabel')}
tooltip={t('common.reportBugLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaBug />}
/>
</Link>
)}
{isGithubLinkEnabled && (
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.githubLabel')}
tooltip={t('common.githubLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaGithub />}
/>
</Link>
)}
{isDiscordLinkEnabled && (
<Link
isExternal
href="https://discord.gg/ZmtBAhwWhy"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.discordLabel')}
tooltip={t('common.discordLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaDiscord />}
/>
</Link>
)}
<SettingsModal>
<IAIIconButton
aria-label={t('common.settingsLabel')}
tooltip={t('common.settingsLabel')}
variant="link"
data-variant="link"
fontSize={22}
size="sm"
icon={<MdSettings />}
/>
</SettingsModal>
</Flex>
);
};
SiteHeaderMenu.displayName = 'SiteHeaderMenu';
export default SiteHeaderMenu;

1
invokeai/frontend/web/src/index.ts
View File

@ -3,7 +3,6 @@ export type { PartialAppConfig } from './app/types/invokeai';
export { default as IAIIconButton } from './common/components/IAIIconButton';
export { default as IAIPopover } from './common/components/IAIPopover';
export { default as ParamMainModelSelect } from './features/parameters/components/Parameters/MainModel/ParamMainModelSelect';
export { default as ColorModeButton } from './features/system/components/ColorModeButton';
export { default as InvokeAiLogoComponent } from './features/system/components/InvokeAILogoComponent';
export { default as SettingsModal } from './features/system/components/SettingsModal/SettingsModal';
export { default as StatusIndicator } from './features/system/components/StatusIndicator';