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

chore(ui): Make the Node UI Legend Responsive

Browse Source
This commit is contained in:
blessedcoolant 2023-04-23 00:55:22 +12:00
parent 2e70848aa0
commit f258aba6d1
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/nodes/components/FieldTypeLegend.tsx
View File

@ -1,20 +1,24 @@
import 'reactflow/dist/style.css'; import 'reactflow/dist/style.css';
import { Tooltip, Badge, HStack } from '@chakra-ui/react'; import { Tooltip, Badge, Flex } from '@chakra-ui/react';
import { map } from 'lodash'; import { map } from 'lodash';
import { FIELDS } from '../types/constants'; import { FIELDS } from '../types/constants';
import { memo } from 'react'; import { memo } from 'react';
const FieldTypeLegend = () => { const FieldTypeLegend = () => {
return ( return (
<HStack> <Flex gap={2} flexDirection={{ base: 'column', xl: 'row' }}>
{map(FIELDS, ({ title, description, color }, key) => ( {map(FIELDS, ({ title, description, color }, key) => (
<Tooltip key={key} label={description}> <Tooltip key={key} label={description}>
<Badge colorScheme={color} sx={{ userSelect: 'none' }}> <Badge
colorScheme={color}
sx={{ userSelect: 'none' }}
textAlign="center"
>
{title} {title}
</Badge> </Badge>
</Tooltip> </Tooltip>
))} ))}
</HStack> </Flex>
); );
}; };