github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tweak(ui): layout of workflow builder field settings

Browse Source
This commit is contained in:
psychedelicious
2025-02-11 16:50:57 +11:00
parent 9aabcfa4b8
commit fb93101085
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx
View File

@@ -1,9 +1,7 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Flex, forwardRef, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import {
NodeFieldElementResetToInitialValueIconButton,
} from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
import { NodeFieldElementResetToInitialValueIconButton } from 'features/nodes/components/flow/nodes/Invocation/fields/NodeFieldElementResetToInitialValueIconButton';
import { ContainerElementSettings } from 'features/nodes/components/sidePanel/builder/ContainerElementSettings';
import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
import { NodeFieldElementSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementSettings';
@@ -11,6 +9,7 @@ import { formElementRemoved } from 'features/nodes/store/workflowSlice';
import { type FormElement, isContainerElement, isNodeFieldElement } from 'features/nodes/types/workflow';
import { startCase } from 'lodash-es';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi';
const getHeaderLabel = (el: FormElement) => {
@@ -41,6 +40,7 @@ const sx: SystemStyleObject = {
export const FormElementEditModeHeader = memo(
forwardRef(({ element }: { element: FormElement }, ref) => {
const { t } = useTranslation();
const depth = useDepthContext();
const dispatch = useAppDispatch();
const removeElement = useCallback(() => {
@@ -53,11 +53,12 @@ export const FormElementEditModeHeader = memo(
{getHeaderLabel(element)} ({element.id})
</Text>
<Spacer />
{isNodeFieldElement(element) && <NodeFieldElementResetToInitialValueIconButton element={element} />}
{isContainerElement(element) && <ContainerElementSettings element={element} />}
{isNodeFieldElement(element) && <NodeFieldElementSettings element={element} />}
{isNodeFieldElement(element) && <NodeFieldElementResetToInitialValueIconButton element={element} />}
<IconButton
aria-label="delete"
tooltip={t('common.delete')}
aria-label={t('common.delete')}
onClick={removeElement}
icon={<PiXBold />}
variant="link"