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(ui): add button to disable info popovers from info popover

Browse Source
This commit is contained in:
psychedelicious 2024-07-25 15:33:39 +10:00 committed by Mary Hipp Rogers
parent 95661c8b21
commit ba747373db
2 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,6 +105,7 @@
"negativePrompt": "Negative Prompt", "negativePrompt": "Negative Prompt",
"discordLabel": "Discord", "discordLabel": "Discord",
"dontAskMeAgain": "Don't ask me again", "dontAskMeAgain": "Don't ask me again",
"dontShowMeThese": "Don't show me these",
"editor": "Editor", "editor": "Editor",
"error": "Error", "error": "Error",
"file": "File", "file": "File",
@ -1099,6 +1100,8 @@
"displayInProgress": "Display Progress Images", "displayInProgress": "Display Progress Images",
"enableImageDebugging": "Enable Image Debugging", "enableImageDebugging": "Enable Image Debugging",
"enableInformationalPopovers": "Enable Informational Popovers", "enableInformationalPopovers": "Enable Informational Popovers",
"informationalPopoversDisabled": "Informational Popovers Disabled",
"informationalPopoversDisabledDesc": "Informational popovers have been disabled. Enable them in Settings.",
"enableInvisibleWatermark": "Enable Invisible Watermark", "enableInvisibleWatermark": "Enable Invisible Watermark",
"enableNSFWChecker": "Enable NSFW Checker", "enableNSFWChecker": "Enable NSFW Checker",
"general": "General", "general": "General",

45
invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx
View File

@ -10,9 +10,12 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
Portal, Portal,
Spacer,
Text, Text,
} from '@invoke-ai/ui-library'; } 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 { merge, omit } from 'lodash-es';
import type { ReactElement } from 'react'; import type { ReactElement } from 'react';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
@ -71,7 +74,7 @@ type ContentProps = {
const Content = ({ data, feature }: ContentProps) => { const Content = ({ data, feature }: ContentProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch();
const heading = useMemo<string | undefined>(() => t(`popovers.${feature}.heading`), [feature, t]); const heading = useMemo<string | undefined>(() => t(`popovers.${feature}.heading`), [feature, t]);
const paragraphs = useMemo<string[]>( const paragraphs = useMemo<string[]>(
@ -82,16 +85,25 @@ const Content = ({ data, feature }: ContentProps) => {
[feature, t] [feature, t]
); );
const handleClick = useCallback(() => { const onClickLearnMore = useCallback(() => {
if (!data?.href) { if (!data?.href) {
return; return;
} }
window.open(data.href); window.open(data.href);
}, [data?.href]); }, [data?.href]);
const onClickDontShowMeThese = useCallback(() => {
dispatch(setShouldEnableInformationalPopovers(false));
toast({
title: t('settings.informationalPopoversDisabled'),
description: t('settings.informationalPopoversDisabledDesc'),
status: 'info',
});
}, [dispatch, t]);
return ( return (
<PopoverContent w={96}> <PopoverContent maxW={300}>
<PopoverCloseButton /> <PopoverCloseButton top={2} />
<PopoverBody> <PopoverBody>
<Flex gap={2} flexDirection="column" alignItems="flex-start"> <Flex gap={2} flexDirection="column" alignItems="flex-start">
{heading && ( {heading && (
@ -116,20 +128,19 @@ const Content = ({ data, feature }: ContentProps) => {
{paragraphs.map((p) => ( {paragraphs.map((p) => (
<Text key={p}>{p}</Text> <Text key={p}>{p}</Text>
))} ))}
{data?.href && (
<> <Divider />
<Divider /> <Flex alignItems="center" justifyContent="space-between" w="full">
<Button <Button onClick={onClickDontShowMeThese} variant="link" size="sm">
pt={1} {t('common.dontShowMeThese')}
onClick={handleClick} </Button>
leftIcon={<PiArrowSquareOutBold />} <Spacer />
alignSelf="flex-end" {data?.href && (
variant="link" <Button onClick={onClickLearnMore} leftIcon={<PiArrowSquareOutBold />} variant="link" size="sm">
>
{t('common.learnMore') ?? heading} {t('common.learnMore') ?? heading}
</Button> </Button>
</> )}
)} </Flex>
</Flex> </Flex>
</PopoverBody> </PopoverBody>
</PopoverContent> </PopoverContent>