github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 05:05:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): minor cleanup

Browse Source
This commit is contained in:
psychedelicious
2025-08-11 22:34:04 +10:00
parent 8c159942eb
commit f4981a6ba9
4 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
View File

@@ -8,7 +8,6 @@ import {
useInputFieldNamesConnection,
useInputFieldNamesMissing,
} from 'features/nodes/hooks/useInputFieldNamesByStatus';
import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
import { useOutputFieldNames } from 'features/nodes/hooks/useOutputFieldNames';
import { useWithFooter } from 'features/nodes/hooks/useWithFooter';
import { memo } from 'react';
@@ -38,12 +37,11 @@ const sx: SystemStyleObject = {
};
const InvocationNode = ({ nodeId, isOpen }: Props) => {
const isInvalid = useNodeHasErrors();
const withFooter = useWithFooter();
return (
<>
<InvocationNodeHeader nodeId={nodeId} isOpen={isOpen} isInvalid={isInvalid} />
<InvocationNodeHeader nodeId={nodeId} isOpen={isOpen} />
{isOpen && (
<>
<Flex layerStyle="nodeBody" sx={sx} data-with-footer={withFooter}>

10
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
View File

@@ -1,8 +1,9 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Flex } from '@invoke-ai/ui-library';
import InvocationNodeTitle from 'features/nodes/components/flow/nodes/common/InvocationNodeTitle';
import NodeCollapseButton from 'features/nodes/components/flow/nodes/common/NodeCollapseButton';
import NodeTitle from 'features/nodes/components/flow/nodes/common/NodeTitle';
import InvocationNodeClassificationIcon from 'features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon';
import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
import { memo } from 'react';
import InvocationNodeCollapsedHandles from './InvocationNodeCollapsedHandles';
@@ -12,7 +13,6 @@ import InvocationNodeStatusIndicator from './InvocationNodeStatusIndicator';
type Props = {
nodeId: string;
isOpen: boolean;
isInvalid?: boolean;
};
const sx: SystemStyleObject = {
@@ -28,12 +28,14 @@ const sx: SystemStyleObject = {
},
};
const InvocationNodeHeader = ({ nodeId, isOpen, isInvalid }: Props) => {
const InvocationNodeHeader = ({ nodeId, isOpen }: Props) => {
const isInvalid = useNodeHasErrors();
return (
<Flex sx={sx} data-is-open={isOpen} data-is-invalid={isInvalid}>
<NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
<InvocationNodeClassificationIcon nodeId={nodeId} />
<NodeTitle nodeId={nodeId} isInvalid={isInvalid} />
<InvocationNodeTitle nodeId={nodeId} />
<Flex alignItems="center">
<InvocationNodeStatusIndicator nodeId={nodeId} />
<InvocationNodeInfoIcon nodeId={nodeId} />

6
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldTitle.tsx
View File

@@ -30,12 +30,12 @@ const labelSx: SystemStyleObject = {
_hover: {
fontWeight: 'semibold !important',
},
'&[data-is-added-to-form="true"]': {
color: 'blue.300',
},
'&[data-is-invalid="true"]': {
color: 'error.300',
},
'&[data-is-added-to-form="true"]': {
color: 'blue.300',
},
'&[data-is-disabled="true"]': {
opacity: 0.5,
},

7
invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx → invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/InvocationNodeTitle.tsx
View File

@@ -4,6 +4,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { useEditable } from 'common/hooks/useEditable';
import { useBatchGroupColorToken } from 'features/nodes/hooks/useBatchGroupColorToken';
import { useBatchGroupId } from 'features/nodes/hooks/useBatchGroupId';
import { useNodeHasErrors } from 'features/nodes/hooks/useNodeIsInvalid';
import { useNodeTemplateTitleSafe } from 'features/nodes/hooks/useNodeTemplateTitleSafe';
import { useNodeUserTitleSafe } from 'features/nodes/hooks/useNodeUserTitleSafe';
import { nodeLabelChanged } from 'features/nodes/store/nodesSlice';
@@ -21,11 +22,11 @@ const labelSx: SystemStyleObject = {
type Props = {
nodeId: string;
title?: string;
isInvalid?: boolean;
};
const NodeTitle = ({ nodeId, title, isInvalid }: Props) => {
const InvocationNodeTitle = ({ nodeId, title }: Props) => {
const dispatch = useAppDispatch();
const isInvalid = useNodeHasErrors();
const label = useNodeUserTitleSafe();
const batchGroupId = useBatchGroupId(nodeId);
const batchGroupColorToken = useBatchGroupColorToken(batchGroupId);
@@ -83,4 +84,4 @@ const NodeTitle = ({ nodeId, title, isInvalid }: Props) => {
);
};
export default memo(NodeTitle);
export default memo(InvocationNodeTitle);