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

View File

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

View File

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

View File

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

View File

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