From 6fa42cb10cc718d4cbcdfd2d8fb947cb53d2706d Mon Sep 17 00:00:00 2001 From: Josh Corbett Date: Tue, 25 Jul 2023 23:33:02 -0600 Subject: [PATCH] feat: :sparkles: consolidated app nav to settings & dropdown --- invokeai/frontend/web/public/locales/ar.json | 1 + invokeai/frontend/web/public/locales/de.json | 1 + invokeai/frontend/web/public/locales/en.json | 1 + invokeai/frontend/web/public/locales/es.json | 1 + invokeai/frontend/web/public/locales/fi.json | 1 + invokeai/frontend/web/public/locales/fr.json | 1 + invokeai/frontend/web/public/locales/he.json | 1 + invokeai/frontend/web/public/locales/it.json | 1 + invokeai/frontend/web/public/locales/ja.json | 1 + invokeai/frontend/web/public/locales/ko.json | 1 + invokeai/frontend/web/public/locales/nl.json | 1 + invokeai/frontend/web/public/locales/pl.json | 1 + invokeai/frontend/web/public/locales/pt.json | 1 + .../frontend/web/public/locales/pt_BR.json | 1 + invokeai/frontend/web/public/locales/ru.json | 1 + invokeai/frontend/web/public/locales/sv.json | 1 + invokeai/frontend/web/public/locales/tr.json | 1 + invokeai/frontend/web/public/locales/uk.json | 1 + .../frontend/web/public/locales/zh_CN.json | 1 + .../frontend/web/public/locales/zh_Hant.json | 1 + .../system/components/ColorModeButton.tsx | 32 ----- .../system/components/LanguagePicker.tsx | 50 ------- .../SettingsModal/SettingsModal.tsx | 33 +++++ .../features/system/components/SiteHeader.tsx | 130 ++++++------------ .../system/components/SiteHeaderMenu.tsx | 111 --------------- invokeai/frontend/web/src/index.ts | 1 - 26 files changed, 97 insertions(+), 280 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx delete mode 100644 invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx delete mode 100644 invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx diff --git a/invokeai/frontend/web/public/locales/ar.json b/invokeai/frontend/web/public/locales/ar.json index e5168da4a8..90f9051230 100644 --- a/invokeai/frontend/web/public/locales/ar.json +++ b/invokeai/frontend/web/public/locales/ar.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "مجتمع", "hotkeysLabel": "مفاتيح الأختصار", "themeLabel": "الموضوع", "languagePickerLabel": "منتقي اللغة", diff --git a/invokeai/frontend/web/public/locales/de.json b/invokeai/frontend/web/public/locales/de.json index cff09d46bb..ca854024b8 100644 --- a/invokeai/frontend/web/public/locales/de.json +++ b/invokeai/frontend/web/public/locales/de.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Gemeinschaft", "themeLabel": "Thema", "languagePickerLabel": "Sprachauswahl", "reportBugLabel": "Fehler melden", diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 0640ab9ef0..b9f75ac30f 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -23,6 +23,7 @@ "menu": "Menu" }, "common": { + "communityLabel": "Community", "hotkeysLabel": "Hotkeys", "darkMode": "Dark Mode", "lightMode": "Light Mode", diff --git a/invokeai/frontend/web/public/locales/es.json b/invokeai/frontend/web/public/locales/es.json index d17cefaad2..2ddf892bf5 100644 --- a/invokeai/frontend/web/public/locales/es.json +++ b/invokeai/frontend/web/public/locales/es.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Comunidad", "hotkeysLabel": "Atajos de teclado", "themeLabel": "Tema", "languagePickerLabel": "Selector de idioma", diff --git a/invokeai/frontend/web/public/locales/fi.json b/invokeai/frontend/web/public/locales/fi.json index a6edd6d8b8..cdc28d27a2 100644 --- a/invokeai/frontend/web/public/locales/fi.json +++ b/invokeai/frontend/web/public/locales/fi.json @@ -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", diff --git a/invokeai/frontend/web/public/locales/fr.json b/invokeai/frontend/web/public/locales/fr.json index cf215d7d06..9821f48567 100644 --- a/invokeai/frontend/web/public/locales/fr.json +++ b/invokeai/frontend/web/public/locales/fr.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Communauté", "hotkeysLabel": "Raccourcis clavier", "themeLabel": "Thème", "languagePickerLabel": "Sélecteur de langue", diff --git a/invokeai/frontend/web/public/locales/he.json b/invokeai/frontend/web/public/locales/he.json index c9b4ff3b17..3ffd0b20e7 100644 --- a/invokeai/frontend/web/public/locales/he.json +++ b/invokeai/frontend/web/public/locales/he.json @@ -106,6 +106,7 @@ "modelMergeInterpAddDifferenceHelp": "במצב זה, מודל 3 מופחת תחילה ממודל 2. הגרסה המתקבלת משולבת עם מודל 1 עם קצב האלפא שנקבע לעיל." }, "common": { + "communityLabel": "קהילה", "nodesDesc": "מערכת מבוססת צמתים עבור יצירת תמונות עדיין תחת פיתוח. השארו קשובים לעדכונים עבור הפיצ׳ר המדהים הזה.", "themeLabel": "ערכת נושא", "languagePickerLabel": "בחירת שפה", diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json index 4ac5b6831d..1d85427b8c 100644 --- a/invokeai/frontend/web/public/locales/it.json +++ b/invokeai/frontend/web/public/locales/it.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Comunità", "hotkeysLabel": "Tasti di scelta rapida", "themeLabel": "Tema", "languagePickerLabel": "Seleziona lingua", diff --git a/invokeai/frontend/web/public/locales/ja.json b/invokeai/frontend/web/public/locales/ja.json index 007aa9b491..78cf5dcb25 100644 --- a/invokeai/frontend/web/public/locales/ja.json +++ b/invokeai/frontend/web/public/locales/ja.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "コミュニティ", "themeLabel": "テーマ", "languagePickerLabel": "言語選択", "reportBugLabel": "バグ報告", diff --git a/invokeai/frontend/web/public/locales/ko.json b/invokeai/frontend/web/public/locales/ko.json index 47cde5fec3..854583211a 100644 --- a/invokeai/frontend/web/public/locales/ko.json +++ b/invokeai/frontend/web/public/locales/ko.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "지역 사회", "themeLabel": "테마 설정", "languagePickerLabel": "언어 설정", "reportBugLabel": "버그 리포트", diff --git a/invokeai/frontend/web/public/locales/nl.json b/invokeai/frontend/web/public/locales/nl.json index 230e3b5b64..e34cc9aa97 100644 --- a/invokeai/frontend/web/public/locales/nl.json +++ b/invokeai/frontend/web/public/locales/nl.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Gemeenschap", "hotkeysLabel": "Sneltoetsen", "themeLabel": "Thema", "languagePickerLabel": "Taalkeuze", diff --git a/invokeai/frontend/web/public/locales/pl.json b/invokeai/frontend/web/public/locales/pl.json index 246271658a..8e6f04c297 100644 --- a/invokeai/frontend/web/public/locales/pl.json +++ b/invokeai/frontend/web/public/locales/pl.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Wspólnota", "hotkeysLabel": "Skróty klawiszowe", "themeLabel": "Motyw", "languagePickerLabel": "Wybór języka", diff --git a/invokeai/frontend/web/public/locales/pt.json b/invokeai/frontend/web/public/locales/pt.json index 6d19e3ad92..3902c04e80 100644 --- a/invokeai/frontend/web/public/locales/pt.json +++ b/invokeai/frontend/web/public/locales/pt.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Comunidade", "greenTheme": "Verde", "langArabic": "العربية", "themeLabel": "Tema", diff --git a/invokeai/frontend/web/public/locales/pt_BR.json b/invokeai/frontend/web/public/locales/pt_BR.json index e77ef14719..46d6572692 100644 --- a/invokeai/frontend/web/public/locales/pt_BR.json +++ b/invokeai/frontend/web/public/locales/pt_BR.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Comunidade", "hotkeysLabel": "Teclas de atalho", "themeLabel": "Tema", "languagePickerLabel": "Seletor de Idioma", diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json index 822389d78a..1bd5239a83 100644 --- a/invokeai/frontend/web/public/locales/ru.json +++ b/invokeai/frontend/web/public/locales/ru.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Сообщество", "hotkeysLabel": "Горячие клавиши", "themeLabel": "Тема", "languagePickerLabel": "Язык", diff --git a/invokeai/frontend/web/public/locales/sv.json b/invokeai/frontend/web/public/locales/sv.json index da2266135d..cd72516694 100644 --- a/invokeai/frontend/web/public/locales/sv.json +++ b/invokeai/frontend/web/public/locales/sv.json @@ -22,6 +22,7 @@ "showOptionsPanel": "Visa inställningspanelen" }, "common": { + "communityLabel": "Gemenskap", "hotkeysLabel": "Snabbtangenter", "reportBugLabel": "Rapportera bugg", "githubLabel": "Github", diff --git a/invokeai/frontend/web/public/locales/tr.json b/invokeai/frontend/web/public/locales/tr.json index 316908b4a9..bc99ed35b7 100644 --- a/invokeai/frontend/web/public/locales/tr.json +++ b/invokeai/frontend/web/public/locales/tr.json @@ -23,6 +23,7 @@ "showGallery": "Galeriyi Göster" }, "common": { + "communityLabel": "Toplum", "hotkeysLabel": "Kısayol Tuşları", "themeLabel": "Tema", "languagePickerLabel": "Dil Seçimi", diff --git a/invokeai/frontend/web/public/locales/uk.json b/invokeai/frontend/web/public/locales/uk.json index 8261aa82e0..55ec0262fe 100644 --- a/invokeai/frontend/web/public/locales/uk.json +++ b/invokeai/frontend/web/public/locales/uk.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "Спільнота", "hotkeysLabel": "Гарячi клавіші", "themeLabel": "Тема", "languagePickerLabel": "Мова", diff --git a/invokeai/frontend/web/public/locales/zh_CN.json b/invokeai/frontend/web/public/locales/zh_CN.json index d4d7746926..b2906497d5 100644 --- a/invokeai/frontend/web/public/locales/zh_CN.json +++ b/invokeai/frontend/web/public/locales/zh_CN.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "社区", "hotkeysLabel": "快捷键", "themeLabel": "主题", "languagePickerLabel": "语言", diff --git a/invokeai/frontend/web/public/locales/zh_Hant.json b/invokeai/frontend/web/public/locales/zh_Hant.json index 98b4882018..5f61cce63b 100644 --- a/invokeai/frontend/web/public/locales/zh_Hant.json +++ b/invokeai/frontend/web/public/locales/zh_Hant.json @@ -1,5 +1,6 @@ { "common": { + "communityLabel": "社區", "nodes": "節點", "img2img": "圖片轉圖片", "langSimplifiedChinese": "簡體中文", diff --git a/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx b/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx deleted file mode 100644 index 9bf748146c..0000000000 --- a/invokeai/frontend/web/src/features/system/components/ColorModeButton.tsx +++ /dev/null @@ -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 ( - - ) : ( - - ) - } - onClick={toggleColorMode} - variant="link" - /> - ); -}; - -export default ColorModeButton; diff --git a/invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx b/invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx deleted file mode 100644 index 0a88ac9215..0000000000 --- a/invokeai/frontend/web/src/features/system/components/LanguagePicker.tsx +++ /dev/null @@ -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 ( - - - } - variant="link" - aria-label={t('common.languagePickerLabel')} - fontSize={22} - minWidth={8} - /> - - - - {map(LANGUAGES, (languageName, l: keyof typeof LANGUAGES) => ( - dispatch(languageChanged(l))} - > - {languageName} - - ))} - - - - ); -} diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index 2deccfa46d..f25d72b082 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -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) => { 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) => { {t('settings.ui')} + { onChange={handleToggleNodes} /> )} + ({ + value, + label, + }))} + onChange={handleLanguageChanged} + /> {shouldShowDeveloperSettings && ( diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx index 758f03f19a..803dc4c140 100644 --- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx @@ -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 ( { - - + } + aria-label={t('accessibility.menu')} + tooltip={t('accessibility.menu')} + icon={} /> - - - {isLocalizationEnabled && } - - {isBugLinkEnabled && ( - - } - /> - - )} - - {isGithubLinkEnabled && ( - - } - /> - - )} - - {isDiscordLinkEnabled && ( - - } - /> - - )} - - - - - } - /> - + + + {isGithubLinkEnabled && ( + }> + {t('common.githubLabel')} + + )} + {isBugLinkEnabled && ( + }> + {t('common.reportBugLabel')} + + )} + {isDiscordLinkEnabled && ( + }> + {t('common.discordLabel')} + + )} + + + + }> + {t('common.hotkeysLabel')} + + + + }> + {t('common.settingsLabel')} + + + + + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx deleted file mode 100644 index ba135be8d1..0000000000 --- a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx +++ /dev/null @@ -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 ( - - - } - /> - - - {isLocalizationEnabled && } - - {isBugLinkEnabled && ( - - } - /> - - )} - - {isGithubLinkEnabled && ( - - } - /> - - )} - - {isDiscordLinkEnabled && ( - - } - /> - - )} - - - } - /> - - - ); -}; - -SiteHeaderMenu.displayName = 'SiteHeaderMenu'; -export default SiteHeaderMenu; diff --git a/invokeai/frontend/web/src/index.ts b/invokeai/frontend/web/src/index.ts index add4999b6d..57dbeab0e5 100644 --- a/invokeai/frontend/web/src/index.ts +++ b/invokeai/frontend/web/src/index.ts @@ -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';