feat(ui): layer layout tweaks

This commit is contained in:
psychedelicious 2024-04-30 12:44:47 +10:00 committed by Kent Keirsey
parent 9d042baf48
commit a20faca20f
5 changed files with 25 additions and 23 deletions

View File

@ -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 />

View File

@ -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} />

View File

@ -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 />

View File

@ -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>
))} ))}

View File

@ -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">