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 in compositing settings header info popups

Browse Source
This commit is contained in:
Jennifer Player 2023-09-18 11:01:43 -04:00
parent c46d9b8768
commit 390a1c9fbb
4 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,7 +81,7 @@ function IAIInformationalPopover({
sx={{ sx={{
gap: 3, gap: 3,
flexDirection: 'column', flexDirection: 'column',
width: '100%',
p: 3, p: 3,
pt: heading ? 0 : 3, pt: heading ? 0 : 3,
}} }}

2
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx
View File

@ -29,7 +29,7 @@ export default function ParamMaskBlurMethod() {
}; };
return ( return (
<IAIInformationalPopover details="compositingBlur"> <IAIInformationalPopover details="compositingBlurMethod">
<IAIMantineSelect <IAIMantineSelect
value={maskBlurMethod} value={maskBlurMethod}
onChange={handleMaskBlurMethodChange} onChange={handleMaskBlurMethodChange}

10
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx
View File

@ -15,13 +15,19 @@ const ParamCompositingSettingsCollapse = () => {
return ( return (
<IAICollapse label={t('parameters.compositingSettingsHeader')}> <IAICollapse label={t('parameters.compositingSettingsHeader')}>
<Flex sx={{ flexDirection: 'column', gap: 2 }}> <Flex sx={{ flexDirection: 'column', gap: 2 }}>
<SubParametersWrapper label={t('parameters.coherencePassHeader')}> <SubParametersWrapper
label={t('parameters.coherencePassHeader')}
headerInfoPopover="compositingCoherencePass"
>
<ParamCanvasCoherenceMode /> <ParamCanvasCoherenceMode />
<ParamCanvasCoherenceSteps /> <ParamCanvasCoherenceSteps />
<ParamCanvasCoherenceStrength /> <ParamCanvasCoherenceStrength />
</SubParametersWrapper> </SubParametersWrapper>
<Divider /> <Divider />
<SubParametersWrapper label={t('parameters.maskAdjustmentsHeader')}> <SubParametersWrapper
label={t('parameters.maskAdjustmentsHeader')}
headerInfoPopover="compositingMaskAdjustments"
>
<ParamMaskBlur /> <ParamMaskBlur />
<ParamMaskBlurMethod /> <ParamMaskBlurMethod />
</SubParametersWrapper> </SubParametersWrapper>

15
invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx
View File

@ -1,9 +1,11 @@
import { Flex, Text } from '@chakra-ui/react'; import { Flex, Text } from '@chakra-ui/react';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover';
import { ReactNode, memo } from 'react'; import { ReactNode, memo } from 'react';
type SubParameterWrapperProps = { type SubParameterWrapperProps = {
children: ReactNode | ReactNode[]; children: ReactNode | ReactNode[];
label?: string; label?: string;
headerInfoPopover?: string;
}; };
const SubParametersWrapper = (props: SubParameterWrapperProps) => ( const SubParametersWrapper = (props: SubParameterWrapperProps) => (
@ -21,7 +23,18 @@ const SubParametersWrapper = (props: SubParameterWrapperProps) => (
}, },
}} }}
> >
{props.label && ( {props.headerInfoPopover && props.label && (
<IAIInformationalPopover details={props.headerInfoPopover}>
<Text
fontSize="sm"
fontWeight="bold"
sx={{ color: 'base.600', _dark: { color: 'base.300' } }}
>
{props.label}
</Text>
</IAIInformationalPopover>
)}
{!props.headerInfoPopover && props.label && (
<Text <Text
fontSize="sm" fontSize="sm"
fontWeight="bold" fontWeight="bold"