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): workflow settings styling

Browse Source 
Got borked in the redesign.
This commit is contained in:
psychedelicious 2024-02-01 00:02:39 +11:00 committed by Kent Keirsey
parent 74ae4d7774
commit f48a2c5fd2
1 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
View File

@ -1,7 +1,9 @@
import type { FormLabelProps } from '@invoke-ai/ui-library';
import {
Divider,
Flex,
FormControl,
FormControlGroup,
FormHelperText,
FormLabel,
Heading,
@ -30,6 +32,8 @@ import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { SelectionMode } from 'reactflow';
const formLabelProps: FormLabelProps = { flexGrow: 1 };
const selector = createMemoizedSelector(selectNodesSlice, (nodes) => {
const { shouldAnimateEdges, shouldValidateGraph, shouldSnapToGrid, shouldColorEdges, selectionMode } = nodes;
return {
@ -100,37 +104,51 @@ const WorkflowEditorSettings = ({ children }: Props) => {
<ModalBody>
<Flex flexDirection="column" gap={4} py={4}>
<Heading size="sm">{t('parameters.general')}</Heading>
<FormControl>
<FormLabel>{t('nodes.animatedEdges')}</FormLabel>
<Switch onChange={handleChangeShouldAnimate} isChecked={shouldAnimateEdges} />
<FormHelperText>{t('nodes.animatedEdgesHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl>
<FormLabel>{t('nodes.snapToGrid')}</FormLabel>
<Switch isChecked={shouldSnapToGrid} onChange={handleChangeShouldSnap} />
<FormHelperText>{t('nodes.snapToGridHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl>
<FormLabel>{t('nodes.colorCodeEdges')}</FormLabel>
<Switch isChecked={shouldColorEdges} onChange={handleChangeShouldColor} />
<FormHelperText>{t('nodes.colorCodeEdgesHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl>
<FormLabel>{t('nodes.fullyContainNodes')}</FormLabel>
<Switch isChecked={selectionModeIsChecked} onChange={handleChangeSelectionMode} />
<FormHelperText>{t('nodes.fullyContainNodesHelp')}</FormHelperText>
</FormControl>
<Heading size="sm" pt={4}>
{t('common.advanced')}
</Heading>
<FormControl>
<FormLabel>{t('nodes.validateConnections')}</FormLabel>
<Switch isChecked={shouldValidateGraph} onChange={handleChangeShouldValidate} />
<FormHelperText>{t('nodes.validateConnectionsHelp')}</FormHelperText>
</FormControl>
<FormControlGroup orientation="vertical" formLabelProps={formLabelProps}>
<FormControl>
<Flex w="full">
<FormLabel>{t('nodes.animatedEdges')}</FormLabel>
<Switch onChange={handleChangeShouldAnimate} isChecked={shouldAnimateEdges} />
</Flex>
<FormHelperText>{t('nodes.animatedEdgesHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl>
<Flex w="full">
<FormLabel>{t('nodes.snapToGrid')}</FormLabel>
<Switch isChecked={shouldSnapToGrid} onChange={handleChangeShouldSnap} />
</Flex>
<FormHelperText>{t('nodes.snapToGridHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl>
<Flex w="full">
<FormLabel>{t('nodes.colorCodeEdges')}</FormLabel>
<Switch isChecked={shouldColorEdges} onChange={handleChangeShouldColor} />
</Flex>
<FormHelperText>{t('nodes.colorCodeEdgesHelp')}</FormHelperText>
</FormControl>
<Divider />
<FormControl>
<Flex w="full">
<FormLabel>{t('nodes.fullyContainNodes')}</FormLabel>
<Switch isChecked={selectionModeIsChecked} onChange={handleChangeSelectionMode} />
</Flex>
<FormHelperText>{t('nodes.fullyContainNodesHelp')}</FormHelperText>
</FormControl>
<Divider />
<Heading size="sm" pt={4}>
{t('common.advanced')}
</Heading>
<FormControl>
<Flex w="full">
<FormLabel>{t('nodes.validateConnections')}</FormLabel>
<Switch isChecked={shouldValidateGraph} onChange={handleChangeShouldValidate} />
</Flex>
<FormHelperText>{t('nodes.validateConnectionsHelp')}</FormHelperText>
</FormControl>
<Divider />
</FormControlGroup>
<ReloadNodeTemplatesButton />
</Flex>
</ModalBody>