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

fix(ui): better node footer spacing

Browse Source
This commit is contained in:
psychedelicious
2024-01-06 08:43:55 +11:00
parent 6e06935e75
commit f51e8eeae1
3 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/src/common/components/InvControl/InvControl.tsx
View File

@ -45,6 +45,7 @@ export const InvControl = memo(
orientation={orientation} orientation={orientation}
isDisabled={isDisabled} isDisabled={isDisabled}
{...formControlProps} {...formControlProps}
{...ctx.controlProps}
> >
<Flex className="invcontrol-label-wrapper"> <Flex className="invcontrol-label-wrapper">
{label && ( {label && (

3
invokeai/frontend/web/src/common/components/InvControl/InvControlGroup.tsx
View File

@ -1,9 +1,10 @@
import type { FormLabelProps } from '@chakra-ui/react'; import type { FormControlProps, FormLabelProps } from '@chakra-ui/react';
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import { createContext, memo } from 'react'; import { createContext, memo } from 'react';
export type InvControlGroupProps = { export type InvControlGroupProps = {
labelProps?: FormLabelProps; labelProps?: FormLabelProps;
controlProps?: FormControlProps;
isDisabled?: boolean; isDisabled?: boolean;
orientation?: 'horizontal' | 'vertical'; orientation?: 'horizontal' | 'vertical';
}; };

11
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
View File

@ -1,4 +1,6 @@
import type { ChakraProps } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput'; import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants'; import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
@ -11,6 +13,8 @@ type Props = {
nodeId: string; nodeId: string;
}; };
const props: ChakraProps = { w: 'unset' };
const InvocationNodeFooter = ({ nodeId }: Props) => { const InvocationNodeFooter = ({ nodeId }: Props) => {
const hasImageOutput = useHasImageOutput(nodeId); const hasImageOutput = useHasImageOutput(nodeId);
const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled; const isCacheEnabled = useFeatureStatus('invocationCache').isFeatureEnabled;
@ -20,13 +24,16 @@ const InvocationNodeFooter = ({ nodeId }: Props) => {
layerStyle="nodeFooter" layerStyle="nodeFooter"
w="full" w="full"
borderBottomRadius="base" borderBottomRadius="base"
gap={4}
px={2} px={2}
py={0} py={0}
h={8} h={8}
justifyContent="space-between" justifyContent="space-between"
> >
{isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />} <InvControlGroup controlProps={props} labelProps={props}>
{hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />} {isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />}
{hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />}
</InvControlGroup>
</Flex> </Flex>
); );
}; };