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): fix field title styling

Browse Source
This commit is contained in:
psychedelicious
2023-12-30 09:13:23 +11:00
committed by Kent Keirsey
parent 966919ea4a
commit 2a41fd0b29
5 changed files with 82 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
View File

@ -77,7 +77,11 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
}
openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
>
<Flex
<Editable
value={localTitle}
onChange={handleChange}
onSubmit={handleSubmit}
as={Flex}
ref={ref}
position="relative"
overflow="hidden"
@ -86,24 +90,15 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
gap={1}
h="full"
>
<Editable
value={localTitle}
onChange={handleChange}
onSubmit={handleSubmit}
as={Flex}
position="relative"
alignItems="center"
h="full"
>
<EditablePreview
fontWeight={isMissingInput ? 'bold' : 'normal'}
sx={editablePreviewStyles}
noOfLines={1}
/>
<EditableInput className="nodrag" sx={editableInputStyles} />
<EditableControls />
</Editable>
</Flex>
<EditablePreview
fontWeight="semibold"
sx={editablePreviewStyles}
noOfLines={1}
color={isMissingInput ? 'error.300' : 'base.300'}
/>
<EditableInput className="nodrag" sx={editableInputStyles} />
<EditableControls />
</Editable>
</InvTooltip>
);
});

57
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
View File

@ -79,38 +79,49 @@ const InputField = ({ nodeId, fieldName }: Props) => {
);
}
if (fieldTemplate.input === 'connection') {
return (
<InputFieldWrapper shouldDim={shouldDim}>
<InvControl isInvalid={isMissingInput} isDisabled={isConnected} px={2}>
<EditableFieldTitle
nodeId={nodeId}
fieldName={fieldName}
kind="input"
isMissingInput={isMissingInput}
withTooltip
/>
</InvControl>
<FieldHandle
fieldTemplate={fieldTemplate}
handleType="target"
isConnectionInProgress={isConnectionInProgress}
isConnectionStartField={isConnectionStartField}
connectionError={connectionError}
/>
</InputFieldWrapper>
);
}
return (
<InputFieldWrapper shouldDim={shouldDim}>
<FieldContextMenu nodeId={nodeId} fieldName={fieldName} kind="input">
{(ref) => (
<InvControl
ref={ref}
isInvalid={isMissingInput}
isDisabled={isConnected}
orientation="vertical"
ps={fieldTemplate.input === 'direct' ? 0 : 2}
alignItems="stretch"
justifyContent="space-between"
flexDir="column"
gap={2}
h="full"
w="full"
pe={2}
>
<InvLabel
ref={ref}
display="flex"
alignItems="center"
mb={0}
px={1}
gap={2}
h="full"
>
<EditableFieldTitle
nodeId={nodeId}
fieldName={fieldName}
kind="input"
isMissingInput={isMissingInput}
withTooltip
/>
</InvLabel>
<EditableFieldTitle
nodeId={nodeId}
fieldName={fieldName}
kind="input"
isMissingInput={isMissingInput}
withTooltip
/>
<InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
</InvControl>
)}