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): janky editable field title

Browse Source 
- Do not allow whitespace-only field titles
- Make only preview text trigger editable
- Tooltip over the preview, not the whole "row"
This commit is contained in:
psychedelicious 2024-05-16 22:13:02 +10:00
parent e3a143eaed
commit 8ea596b1e9
1 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,8 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
const [localTitle, setLocalTitle] = useState(label || fieldTemplateTitle || t('nodes.unknownField')); const [localTitle, setLocalTitle] = useState(label || fieldTemplateTitle || t('nodes.unknownField'));
const handleSubmit = useCallback( const handleSubmit = useCallback(
async (newTitle: string) => { async (newTitleRaw: string) => {
const newTitle = newTitleRaw.trim();
if (newTitle && (newTitle === label || newTitle === fieldTemplateTitle)) { if (newTitle && (newTitle === label || newTitle === fieldTemplateTitle)) {
return; return;
} }
@ -57,22 +58,22 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
}, [label, fieldTemplateTitle, t]); }, [label, fieldTemplateTitle, t]);
return ( return (
<Tooltip <Editable
label={withTooltip ? <FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" /> : undefined} value={localTitle}
openDelay={HANDLE_TOOLTIP_OPEN_DELAY} onChange={handleChange}
onSubmit={handleSubmit}
as={Flex}
ref={ref}
position="relative"
overflow="hidden"
alignItems="center"
justifyContent="flex-start"
gap={1}
w="full"
> >
<Editable <Tooltip
value={localTitle} label={withTooltip ? <FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" /> : undefined}
onChange={handleChange} openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
onSubmit={handleSubmit}
as={Flex}
ref={ref}
position="relative"
overflow="hidden"
alignItems="center"
justifyContent="flex-start"
gap={1}
w="full"
> >
<EditablePreview <EditablePreview
fontWeight="semibold" fontWeight="semibold"
@ -80,10 +81,10 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
noOfLines={1} noOfLines={1}
color={isMissingInput ? 'error.300' : 'base.300'} color={isMissingInput ? 'error.300' : 'base.300'}
/> />
<EditableInput className="nodrag" sx={editableInputStyles} /> </Tooltip>
<EditableControls /> <EditableInput className="nodrag" sx={editableInputStyles} />
</Editable> <EditableControls />
</Tooltip> </Editable>
); );
}); });
@ -127,7 +128,15 @@ const EditableControls = memo(() => {
} }
return ( return (
<Flex onClick={handleClick} position="absolute" w="full" h="full" top={0} insetInlineStart={0} cursor="text" /> <Flex
onClick={handleClick}
position="absolute"
w="min-content"
h="full"
top={0}
insetInlineStart={0}
cursor="text"
/>
); );
}); });