diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 1d21249278..524be21a28 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -105,6 +105,7 @@ "negativePrompt": "Negative Prompt", "discordLabel": "Discord", "dontAskMeAgain": "Don't ask me again", + "dontShowMeThese": "Don't show me these", "editor": "Editor", "error": "Error", "file": "File", @@ -1099,6 +1100,8 @@ "displayInProgress": "Display Progress Images", "enableImageDebugging": "Enable Image Debugging", "enableInformationalPopovers": "Enable Informational Popovers", + "informationalPopoversDisabled": "Informational Popovers Disabled", + "informationalPopoversDisabledDesc": "Informational popovers have been disabled. Enable them in Settings.", "enableInvisibleWatermark": "Enable Invisible Watermark", "enableNSFWChecker": "Enable NSFW Checker", "general": "General", diff --git a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx index 935212ee58..cb295bb0f4 100644 --- a/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx +++ b/invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx @@ -10,9 +10,12 @@ import { PopoverContent, PopoverTrigger, Portal, + Spacer, Text, } from '@invoke-ai/ui-library'; -import { useAppSelector } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { setShouldEnableInformationalPopovers } from 'features/system/store/systemSlice'; +import { toast } from 'features/toast/toast'; import { merge, omit } from 'lodash-es'; import type { ReactElement } from 'react'; import { memo, useCallback, useMemo } from 'react'; @@ -71,7 +74,7 @@ type ContentProps = { const Content = ({ data, feature }: ContentProps) => { const { t } = useTranslation(); - + const dispatch = useAppDispatch(); const heading = useMemo(() => t(`popovers.${feature}.heading`), [feature, t]); const paragraphs = useMemo( @@ -82,16 +85,25 @@ const Content = ({ data, feature }: ContentProps) => { [feature, t] ); - const handleClick = useCallback(() => { + const onClickLearnMore = useCallback(() => { if (!data?.href) { return; } window.open(data.href); }, [data?.href]); + const onClickDontShowMeThese = useCallback(() => { + dispatch(setShouldEnableInformationalPopovers(false)); + toast({ + title: t('settings.informationalPopoversDisabled'), + description: t('settings.informationalPopoversDisabledDesc'), + status: 'info', + }); + }, [dispatch, t]); + return ( - - + + {heading && ( @@ -116,20 +128,19 @@ const Content = ({ data, feature }: ContentProps) => { {paragraphs.map((p) => ( {p} ))} - {data?.href && ( - <> - - + + {data?.href && ( + - - )} + )} +