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

ui: Add SubParametersWrapper

Browse Source
This commit is contained in:
blessedcoolant 2023-08-30 05:05:54 +12:00
parent 9eed8cdc27
commit 176d41d624
3 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
import { Divider, Flex, Text } from '@chakra-ui/react'; import { Divider, Flex } from '@chakra-ui/react';
import IAICollapse from 'common/components/IAICollapse'; import IAICollapse from 'common/components/IAICollapse';
import { PropsWithChildren, memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import SubParametersWrapper from '../../SubParametersWrapper';
import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps'; import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps';
import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength'; import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength';
import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur'; import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur';
@ -13,45 +14,18 @@ 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 }}>
<CompositingSettingsWrapper> <SubParametersWrapper label={t('parameters.maskAdjustmentsHeader')}>
<Text fontSize="sm" fontWeight="bold">
{t('parameters.maskAdjustmentsHeader')}
</Text>
<ParamMaskBlur /> <ParamMaskBlur />
<ParamMaskBlurMethod /> <ParamMaskBlurMethod />
</CompositingSettingsWrapper> </SubParametersWrapper>
<Divider /> <Divider />
<CompositingSettingsWrapper> <SubParametersWrapper label={t('parameters.coherencePassHeader')}>
<Text fontSize="sm" fontWeight="bold">
{t('parameters.coherencePassHeader')}
</Text>
<ParamCanvasCoherenceSteps /> <ParamCanvasCoherenceSteps />
<ParamCanvasCoherenceStrength /> <ParamCanvasCoherenceStrength />
</CompositingSettingsWrapper> </SubParametersWrapper>
</Flex> </Flex>
</IAICollapse> </IAICollapse>
); );
}; };
const CompositingSettingsWrapper = memo((props: PropsWithChildren) => (
<Flex
sx={{
flexDir: 'column',
gap: 2,
bg: 'base.100',
px: 4,
pt: 2,
pb: 4,
borderRadius: 'base',
_dark: {
bg: 'base.750',
},
}}
>
{props.children}
</Flex>
));
CompositingSettingsWrapper.displayName = 'CompositingSettingsWrapper';
export default memo(ParamCompositingSettingsCollapse); export default memo(ParamCompositingSettingsCollapse);

8
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx
View File

@ -1,8 +1,9 @@
import { Flex } from '@chakra-ui/react'; import { Divider, Flex } from '@chakra-ui/react';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import IAICollapse from 'common/components/IAICollapse'; import IAICollapse from 'common/components/IAICollapse';
import SubParametersWrapper from '../../SubParametersWrapper';
import ParamInfillMethod from './ParamInfillMethod'; import ParamInfillMethod from './ParamInfillMethod';
import ParamInfillTilesize from './ParamInfillTilesize'; import ParamInfillTilesize from './ParamInfillTilesize';
import ParamScaleBeforeProcessing from './ParamScaleBeforeProcessing'; import ParamScaleBeforeProcessing from './ParamScaleBeforeProcessing';
@ -15,11 +16,16 @@ const ParamInfillCollapse = () => {
return ( return (
<IAICollapse label={t('parameters.infillScalingHeader')}> <IAICollapse label={t('parameters.infillScalingHeader')}>
<Flex sx={{ gap: 2, flexDirection: 'column', pb: 2 }}> <Flex sx={{ gap: 2, flexDirection: 'column', pb: 2 }}>
<SubParametersWrapper>
<ParamInfillMethod /> <ParamInfillMethod />
<ParamInfillTilesize /> <ParamInfillTilesize />
</SubParametersWrapper>
<Divider />
<SubParametersWrapper>
<ParamScaleBeforeProcessing /> <ParamScaleBeforeProcessing />
<ParamScaledWidth /> <ParamScaledWidth />
<ParamScaledHeight /> <ParamScaledHeight />
</SubParametersWrapper>
</Flex> </Flex>
</IAICollapse> </IAICollapse>
); );

39
invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Flex, Text } from '@chakra-ui/react';
import { ReactNode, memo } from 'react';
type SubParameterWrapperProps = {
children: ReactNode[];
label?: string;
};
const SubParametersWrapper = (props: SubParameterWrapperProps) => (
<Flex
sx={{
flexDir: 'column',
gap: 2,
bg: 'base.100',
px: 4,
pt: 2,
pb: 4,
borderRadius: 'base',
_dark: {
bg: 'base.750',
},
}}
>
{props.label && (
<Text
fontSize="sm"
fontWeight="bold"
sx={{ color: 'base.600', _dark: { color: 'base.300' } }}
>
{props.label}
</Text>
)}
{props.children}
</Flex>
);
SubParametersWrapper.displayName = 'SubSettingsWrapper';
export default memo(SubParametersWrapper);