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

add toggle for shouldDisableInformationalPopovers

Browse Source
This commit is contained in:
Mary Hipp
2023-09-12 16:33:46 -04:00
parent 63f94579c5
commit 7b2e6deaf1
3 changed files with 83 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
View File

@ -13,6 +13,8 @@ import {
Image,
} from '@chakra-ui/react';
import { ReactNode } from 'react';
import { useAppSelector } from '../../app/store/storeHooks';
import { systemSelector } from '../../features/system/store/systemSelectors';
interface Props extends PopoverProps {
heading: string;
@ -31,68 +33,74 @@ function IAIInformationalPopover({
buttonHref,
triggerComponent,
}: Props) {
return (
<Popover
placement="top"
closeOnBlur={false}
trigger="hover"
variant="informational"
>
<PopoverTrigger>
<div>{triggerComponent}</div>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
const { shouldDisableInformationalPopovers } = useAppSelector(systemSelector);
<PopoverBody>
<Flex
sx={{
gap: 3,
flexDirection: 'column',
width: '100%',
}}
>
{image && (
<Image
sx={{
objectFit: 'contain',
maxW: '100%',
maxH: 'full',
backgroundColor: 'white',
}}
src={image}
alt="Optional Image"
/>
)}
if (shouldDisableInformationalPopovers) {
return triggerComponent;
} else {
return (
<Popover
placement="top"
closeOnBlur={false}
trigger="hover"
variant="informational"
>
<PopoverTrigger>
<div>{triggerComponent}</div>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverBody>
<Flex
sx={{
gap: 3,
flexDirection: 'column',
p: 3,
pt: 0,
width: '100%',
}}
>
<PopoverHeader>{heading}</PopoverHeader>
<Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
{buttonLabel && (
<Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
<Button
onClick={() => window.open(buttonHref)}
size="sm"
variant="invokeAIOutline"
>
{buttonLabel}
</Button>
</Flex>
{image && (
<Image
sx={{
objectFit: 'contain',
maxW: '100%',
maxH: 'full',
backgroundColor: 'white',
}}
src={image}
alt="Optional Image"
/>
)}
<Flex
sx={{
gap: 3,
flexDirection: 'column',
p: 3,
pt: 0,
}}
>
<PopoverHeader>{heading}</PopoverHeader>
<Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
{buttonLabel && (
<Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
<Button
onClick={() => window.open(buttonHref)}
size="sm"
variant="invokeAIOutline"
>
{buttonLabel}
</Button>
</Flex>
)}
</Flex>
</Flex>
</Flex>
</PopoverBody>
</PopoverContent>
</Popover>
);
</PopoverBody>
</PopoverContent>
</Popover>
);
}
}
export default IAIInformationalPopover;