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): tweak control adapter layout

Browse Source
This commit is contained in:
psychedelicious 2024-05-02 08:50:19 +10:00 committed by Kent Keirsey
parent ffba4871d0
commit efb571401c
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapter.tsx
View File

@ -1,4 +1,4 @@
import { Box, Flex, Icon, IconButton } from '@invoke-ai/ui-library'; import { Box, Divider, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
import { ControlAdapterModelCombobox } from 'features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox'; import { ControlAdapterModelCombobox } from 'features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox';
import type { import type {
ControlMode, ControlMode,
@ -48,7 +48,7 @@ export const ControlAdapter = memo(
const [isExpanded, toggleIsExpanded] = useToggle(false); const [isExpanded, toggleIsExpanded] = useToggle(false);
return ( return (
<Flex flexDir="column" gap={4} position="relative" w="full"> <Flex flexDir="column" gap={3} position="relative" w="full">
<Flex gap={3} alignItems="center" w="full"> <Flex gap={3} alignItems="center" w="full">
<Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s"> <Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
<ControlAdapterModelCombobox modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} /> <ControlAdapterModelCombobox modelKey={controlAdapter.model?.key ?? null} onChange={onChangeModel} />
@ -71,7 +71,7 @@ export const ControlAdapter = memo(
} }
/> />
</Flex> </Flex>
<Flex gap={4} w="full" alignItems="center"> <Flex gap={3} w="full" alignItems="center">
<Flex flexDir="column" gap={3} w="full"> <Flex flexDir="column" gap={3} w="full">
{controlAdapter.type === 'controlnet' && ( {controlAdapter.type === 'controlnet' && (
<ControlAdapterControlModeSelect <ControlAdapterControlModeSelect
@ -95,13 +95,19 @@ export const ControlAdapter = memo(
</Flex> </Flex>
</Flex> </Flex>
{isExpanded && ( {isExpanded && (
<Flex flexDir="column" gap={3} w="full"> <>
<ControlAdapterProcessorTypeSelect <Divider />
config={controlAdapter.processorConfig} <Flex flexDir="column" gap={3} w="full">
onChange={onChangeProcessorConfig} <ControlAdapterProcessorTypeSelect
/> config={controlAdapter.processorConfig}
<ControlAdapterProcessorConfig config={controlAdapter.processorConfig} onChange={onChangeProcessorConfig} /> onChange={onChangeProcessorConfig}
</Flex> />
<ControlAdapterProcessorConfig
config={controlAdapter.processorConfig}
onChange={onChangeProcessorConfig}
/>
</Flex>
</>
)} )}
</Flex> </Flex>
); );