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