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): layer layout tweaks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/regionalPrompts/components/ControlAdapterLayerListItem.tsx
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 />

2
invokeai/frontend/web/src/features/regionalPrompts/components/IPAdapterLayerListItem.tsx
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} />

2
invokeai/frontend/web/src/features/regionalPrompts/components/MaskedGuidanceLayerListItem.tsx
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 />

8
invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerIPAdapterList.tsx
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}>
<Flex pb={3}> {index > 0 && (
<Divider /> <Flex pb={3}>
</Flex> <Divider />
</Flex>
)}
<IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} /> <IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
</Flex> </Flex>
))} ))}

34
invokeai/frontend/web/src/features/regionalPrompts/components/controlAdapterOverrides/ControlAdapterLayerConfig.tsx
View File

@ -28,22 +28,24 @@ const ControlAdapterLayerConfig = (props: { id: string }) => {
<ParamControlAdapterModel id={id} />{' '} <ParamControlAdapterModel id={id} />{' '}
</Box> </Box>
<IconButton {controlAdapterType !== 'ip_adapter' && (
size="sm" <IconButton
tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')} size="sm"
aria-label={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')} tooltip={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
onClick={toggleIsExpanded} aria-label={isExpanded ? t('controlnet.hideAdvanced') : t('controlnet.showAdvanced')}
variant="ghost" onClick={toggleIsExpanded}
icon={ variant="ghost"
<Icon icon={
boxSize={4} <Icon
as={PiCaretUpBold} boxSize={4}
transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'} as={PiCaretUpBold}
transitionProperty="common" transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
transitionDuration="normal" transitionProperty="common"
/> transitionDuration="normal"
} />
/> }
/>
)}
</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">