mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): layer layout tweaks
This commit is contained in:
parent
9d042baf48
commit
a20faca20f
@ -48,7 +48,7 @@ export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => {
|
|||||||
py="1px"
|
py="1px"
|
||||||
>
|
>
|
||||||
<Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base">
|
<Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base">
|
||||||
<Flex gap={3} alignItems="center">
|
<Flex gap={3} alignItems="center" cursor="pointer">
|
||||||
<RPLayerVisibilityToggle layerId={layerId} />
|
<RPLayerVisibilityToggle layerId={layerId} />
|
||||||
<LayerTitle type="control_adapter_layer" />
|
<LayerTitle type="control_adapter_layer" />
|
||||||
<Spacer />
|
<Spacer />
|
||||||
|
@ -4,7 +4,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|||||||
import ControlAdapterLayerConfig from 'features/regionalPrompts/components/controlAdapterOverrides/ControlAdapterLayerConfig';
|
import ControlAdapterLayerConfig from 'features/regionalPrompts/components/controlAdapterOverrides/ControlAdapterLayerConfig';
|
||||||
import { LayerTitle } from 'features/regionalPrompts/components/LayerTitle';
|
import { LayerTitle } from 'features/regionalPrompts/components/LayerTitle';
|
||||||
import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton';
|
import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton';
|
||||||
import { RPLayerMenu } from 'features/regionalPrompts/components/RPLayerMenu';
|
|
||||||
import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle';
|
import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle';
|
||||||
import {
|
import {
|
||||||
isIPAdapterLayer,
|
isIPAdapterLayer,
|
||||||
@ -44,7 +43,6 @@ export const IPAdapterLayerListItem = memo(({ layerId }: Props) => {
|
|||||||
<RPLayerVisibilityToggle layerId={layerId} />
|
<RPLayerVisibilityToggle layerId={layerId} />
|
||||||
<LayerTitle type="ip_adapter_layer" />
|
<LayerTitle type="ip_adapter_layer" />
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<RPLayerMenu layerId={layerId} />
|
|
||||||
<RPLayerDeleteButton layerId={layerId} />
|
<RPLayerDeleteButton layerId={layerId} />
|
||||||
</Flex>
|
</Flex>
|
||||||
<ControlAdapterLayerConfig id={ipAdapterId} />
|
<ControlAdapterLayerConfig id={ipAdapterId} />
|
||||||
|
@ -61,7 +61,7 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
|
|||||||
py="1px"
|
py="1px"
|
||||||
>
|
>
|
||||||
<Flex flexDir="column" w="full" bg="base.850" p={3} gap={3} borderRadius="base">
|
<Flex flexDir="column" w="full" bg="base.850" p={3} gap={3} borderRadius="base">
|
||||||
<Flex gap={3} alignItems="center">
|
<Flex gap={3} alignItems="center" cursor="pointer">
|
||||||
<RPLayerVisibilityToggle layerId={layerId} />
|
<RPLayerVisibilityToggle layerId={layerId} />
|
||||||
<LayerTitle type="masked_guidance_layer" />
|
<LayerTitle type="masked_guidance_layer" />
|
||||||
<Spacer />
|
<Spacer />
|
||||||
|
@ -32,9 +32,11 @@ export const RPLayerIPAdapterList = memo(({ layerId }: Props) => {
|
|||||||
<>
|
<>
|
||||||
{ipAdapterIds.map((id, index) => (
|
{ipAdapterIds.map((id, index) => (
|
||||||
<Flex flexDir="column" key={id}>
|
<Flex flexDir="column" key={id}>
|
||||||
|
{index > 0 && (
|
||||||
<Flex pb={3}>
|
<Flex pb={3}>
|
||||||
<Divider />
|
<Divider />
|
||||||
</Flex>
|
</Flex>
|
||||||
|
)}
|
||||||
<IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
|
<IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
|
||||||
</Flex>
|
</Flex>
|
||||||
))}
|
))}
|
||||||
|
@ -28,6 +28,7 @@ const ControlAdapterLayerConfig = (props: { id: string }) => {
|
|||||||
<ParamControlAdapterModel id={id} />{' '}
|
<ParamControlAdapterModel id={id} />{' '}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
{controlAdapterType !== 'ip_adapter' && (
|
||||||
<IconButton
|
<IconButton
|
||||||
size="sm"
|
size="sm"
|
||||||
tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
|
tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
|
||||||
@ -44,6 +45,7 @@ const ControlAdapterLayerConfig = (props: { id: string }) => {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex gap={4} w="full" alignItems="center">
|
<Flex gap={4} w="full" alignItems="center">
|
||||||
<Flex flexDir="column" gap={3} w="full">
|
<Flex flexDir="column" gap={3} w="full">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user