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"
|
||||
>
|
||||
<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} />
|
||||
<LayerTitle type="control_adapter_layer" />
|
||||
<Spacer />
|
||||
|
@ -4,7 +4,6 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
||||
import ControlAdapterLayerConfig from 'features/regionalPrompts/components/controlAdapterOverrides/ControlAdapterLayerConfig';
|
||||
import { LayerTitle } from 'features/regionalPrompts/components/LayerTitle';
|
||||
import { RPLayerDeleteButton } from 'features/regionalPrompts/components/RPLayerDeleteButton';
|
||||
import { RPLayerMenu } from 'features/regionalPrompts/components/RPLayerMenu';
|
||||
import { RPLayerVisibilityToggle } from 'features/regionalPrompts/components/RPLayerVisibilityToggle';
|
||||
import {
|
||||
isIPAdapterLayer,
|
||||
@ -44,7 +43,6 @@ export const IPAdapterLayerListItem = memo(({ layerId }: Props) => {
|
||||
<RPLayerVisibilityToggle layerId={layerId} />
|
||||
<LayerTitle type="ip_adapter_layer" />
|
||||
<Spacer />
|
||||
<RPLayerMenu layerId={layerId} />
|
||||
<RPLayerDeleteButton layerId={layerId} />
|
||||
</Flex>
|
||||
<ControlAdapterLayerConfig id={ipAdapterId} />
|
||||
|
@ -61,7 +61,7 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
|
||||
py="1px"
|
||||
>
|
||||
<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} />
|
||||
<LayerTitle type="masked_guidance_layer" />
|
||||
<Spacer />
|
||||
|
@ -32,9 +32,11 @@ export const RPLayerIPAdapterList = memo(({ layerId }: Props) => {
|
||||
<>
|
||||
{ipAdapterIds.map((id, index) => (
|
||||
<Flex flexDir="column" key={id}>
|
||||
<Flex pb={3}>
|
||||
<Divider />
|
||||
</Flex>
|
||||
{index > 0 && (
|
||||
<Flex pb={3}>
|
||||
<Divider />
|
||||
</Flex>
|
||||
)}
|
||||
<IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
|
||||
</Flex>
|
||||
))}
|
||||
|
@ -28,22 +28,24 @@ const ControlAdapterLayerConfig = (props: { id: string }) => {
|
||||
<ParamControlAdapterModel id={id} />{' '}
|
||||
</Box>
|
||||
|
||||
<IconButton
|
||||
size="sm"
|
||||
tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
|
||||
aria-label={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
|
||||
onClick={toggleIsExpanded}
|
||||
variant="ghost"
|
||||
icon={
|
||||
<Icon
|
||||
boxSize={4}
|
||||
as={PiCaretUpBold}
|
||||
transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
|
||||
transitionProperty="common"
|
||||
transitionDuration="normal"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{controlAdapterType !== 'ip_adapter' && (
|
||||
<IconButton
|
||||
size="sm"
|
||||
tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
|
||||
aria-label={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
|
||||
onClick={toggleIsExpanded}
|
||||
variant="ghost"
|
||||
icon={
|
||||
<Icon
|
||||
boxSize={4}
|
||||
as={PiCaretUpBold}
|
||||
transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
|
||||
transitionProperty="common"
|
||||
transitionDuration="normal"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex gap={4} w="full" alignItems="center">
|
||||
<Flex flexDir="column" gap={3} w="full">
|
||||
|
Loading…
Reference in New Issue
Block a user