diff --git a/invokeai/frontend/web/public/assets/images/popoverImages/image-2.png b/invokeai/frontend/web/public/assets/images/popoverImages/image-2.png new file mode 100644 index 0000000000..8db14cde13 Binary files /dev/null and b/invokeai/frontend/web/public/assets/images/popoverImages/image-2.png differ diff --git a/invokeai/frontend/web/public/assets/images/popoverImages/image.png b/invokeai/frontend/web/public/assets/images/popoverImages/image.png new file mode 100644 index 0000000000..3c882aec48 Binary files /dev/null and b/invokeai/frontend/web/public/assets/images/popoverImages/image.png differ diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 0fe833db39..40e43eb73e 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -997,6 +997,7 @@ "problemSettingTitle": "Problem Setting Title", "reloadNodeTemplates": "Reload Node Templates", "removeLinearView": "Remove from Linear View", + "reorderLinearView": "Reorder Linear View", "newWorkflow": "New Workflow", "newWorkflowDesc": "Create a new workflow?", "newWorkflowDesc2": "Your current workflow has unsaved changes.", diff --git a/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx b/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx index de82af796f..b04980f6cf 100644 --- a/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx +++ b/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx @@ -1,6 +1,6 @@ import type { DragEndEvent } from '@dnd-kit/core'; import { MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'; -import { SortableContext } from '@dnd-kit/sortable'; +import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'; import type { PropsWithChildren } from 'react'; import { memo } from 'react'; @@ -24,7 +24,9 @@ const DndSortable = (props: Props) => { return ( - {props.children} + + {props.children} + ); }; diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx index 106e307889..b6187aa532 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx @@ -8,7 +8,7 @@ import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice' import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi'; +import { PiInfoBold, PiTrashSimpleBold, PiDotsSixVerticalBold } from 'react-icons/pi'; import EditableFieldTitle from './EditableFieldTitle'; import FieldTooltipContent from './FieldTooltipContent'; @@ -23,7 +23,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => { const dispatch = useAppDispatch(); const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId); const { t } = useTranslation(); - + const handleRemoveField = useCallback(() => { dispatch(workflowExposedFieldRemoved({ nodeId, fieldName })); }, [dispatch, fieldName, nodeId]); @@ -40,39 +40,49 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => { onMouseEnter={handleMouseOver} onMouseLeave={handleMouseOut} layerStyle="second" + alignItems="center" position="relative" borderRadius="base" w="full" p={4} - flexDir="column" + paddingLeft={0} ref={setNodeRef} style={style} - {...attributes} - {...listeners} > - - - - } - openDelay={HANDLE_TOOLTIP_OPEN_DELAY} - placement="top" - > - - - - - } - /> + } + {...listeners} + {...attributes} + mx={2} + height="full" + /> + + + + + } + openDelay={HANDLE_TOOLTIP_OPEN_DELAY} + placement="top" + > + + + + + } + /> + + + - - ); };