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 informational popover base component and sample

Browse Source
This commit is contained in:
Mary Hipp
2023-09-12 16:10:43 -04:00
parent e467ca7f1b
commit 63f94579c5
5 changed files with 166 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx Normal file
View File

@ -0,0 +1,16 @@
import { PropsWithChildren } from 'react';
import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
import InvokeAILogoImage from 'assets/images/logo.png';
export const ParamPositiveConditioningPopover = (props: PropsWithChildren) => {
return (
<IAIInformationalPopover
heading="Prompt Box"
paragraph="This is where you enter your prompt"
buttonLabel="Learn more"
buttonHref="http://google.com"
image={InvokeAILogoImage}
triggerComponent={props.children}
/>
);
};

36
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
View File

@ -1,4 +1,11 @@
import { Box, FormControl, useDisclosure } from '@chakra-ui/react';
import {
Box,
FormControl,
Text,
Tooltip,
useDisclosure,
Heading,
} from '@chakra-ui/react';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { ChangeEvent, KeyboardEvent, memo, useCallback, useRef } from 'react';
@ -20,6 +27,9 @@ import { flushSync } from 'react-dom';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
import IAIInformationalPopover from '../../../../../common/components/IAIInformationalPopover';
import InvokeAILogoImage from 'assets/images/logo.png';
import { ParamPositiveConditioningPopover } from '../../../../informationalPopovers/components/paramPositiveConditioning';
const promptInputSelector = createSelector(
[stateSelector, activeTabNameSelector],
@ -129,17 +139,19 @@ const ParamPositiveConditioning = () => {
onClose={onClose}
onSelect={handleSelectEmbedding}
>
<IAITextarea
id="prompt"
name="prompt"
ref={promptRef}
value={prompt}
placeholder={t('parameters.positivePromptPlaceholder')}
onChange={handleChangePrompt}
onKeyDown={handleKeyDown}
resize="vertical"
minH={32}
/>
<ParamPositiveConditioningPopover>
<IAITextarea
id="prompt"
name="prompt"
ref={promptRef}
value={prompt}
placeholder={t('parameters.positivePromptPlaceholder')}
onChange={handleChangePrompt}
onKeyDown={handleKeyDown}
resize="vertical"
minH={32}
/>
</ParamPositiveConditioningPopover>
</ParamEmbeddingPopover>
</FormControl>
{!isOpen && isEmbeddingEnabled && (