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

feat(ui): WorkflowListItem simplify layout

Browse Source
This commit is contained in:
psychedelicious
2024-10-08 21:33:02 +10:00
committed by Mary Hipp Rogers
parent 7c9779b496
commit 7882e9beae
1 changed files with 49 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
View File

@@ -1,4 +1,13 @@
import { Badge, ConfirmationAlertDialog, Flex, IconButton, Text, Tooltip, useDisclosure } from '@invoke-ai/ui-library'; import {
Badge,
ConfirmationAlertDialog,
Flex,
IconButton,
Spacer,
Text,
Tooltip,
useDisclosure,
} from '@invoke-ai/ui-library';
import { EMPTY_OBJECT } from 'app/store/constants'; import { EMPTY_OBJECT } from 'app/store/constants';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $isWorkflowListMenuIsOpen } from 'features/nodes/store/workflowListMenu'; import { $isWorkflowListMenuIsOpen } from 'features/nodes/store/workflowListMenu';
@@ -70,73 +79,51 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
onClick={handleClickLoad} onClick={handleClickLoad}
cursor="pointer" cursor="pointer"
_hover={{ backgroundColor: 'base.750' }} _hover={{ backgroundColor: 'base.750' }}
py={3} p={2}
px={2} ps={3}
borderRadius="base" borderRadius="base"
alignItems="flex-start"
w="full" w="full"
onMouseOver={handleMouseOver} onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut} onMouseOut={handleMouseOut}
alignItems="center"
> >
<Flex flexDir="column" w="full"> <Tooltip label={workflow.description}>
<Flex w="full" justifyContent="space-between" alignItems="flex-start"> <Text noOfLines={2}>{workflow.name}</Text>
<Flex alignItems="center" gap={2} w="full"> </Tooltip>
<Flex flexDir="column" gap={2} w="full"> {isActive && (
<Flex alignItems="center" gap={1} justifyContent="space-between" w="full" minH={8}> <Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
<Flex alignItems="center" gap={3}> {t('stylePresets.active')}
<Tooltip label={workflow.description}> </Badge>
<Text fontSize="md" noOfLines={2}> )}
{workflow.name} <Spacer />
</Text>
</Tooltip>
{isActive && (
<Badge
color="invokeBlue.400"
borderColor="invokeBlue.700"
borderWidth={1}
bg="transparent"
flexShrink={0}
>
{t('stylePresets.active')}
</Badge>
)}
</Flex>
<Flex alignItems="center" gap={1} opacity={isHovered ? 1 : 0}> <Flex alignItems="center" gap={1} opacity={isHovered ? 1 : 0}>
<IconButton <IconButton
size="sm" size="sm"
variant="outline" variant="ghost"
aria-label="Edit" aria-label="Edit"
onClick={handleClickEdit} onClick={handleClickEdit}
isLoading={deleteWorkflowResult.isLoading} isLoading={deleteWorkflowResult.isLoading}
icon={<PiPencilBold />} icon={<PiPencilBold />}
isDisabled={!isHovered} />
/> <IconButton
<IconButton size="sm"
size="sm" variant="ghost"
variant="outline" aria-label="Download"
aria-label="Download" onClick={downloadWorkflow}
onClick={downloadWorkflow} icon={<PiDownloadSimpleBold />}
icon={<PiDownloadSimpleBold />} />
isDisabled={!isHovered} {workflow.category !== 'default' && (
/> <IconButton
{workflow.category !== 'default' && ( size="sm"
<IconButton variant="ghost"
size="sm" aria-label={t('stylePresets.deleteTemplate')}
variant="outline" onClick={handleClickDelete}
aria-label={t('stylePresets.deleteTemplate')} isLoading={deleteWorkflowResult.isLoading}
onClick={handleClickDelete} colorScheme="error"
isLoading={deleteWorkflowResult.isLoading} icon={<PiTrashBold />}
colorScheme="error" />
icon={<PiTrashBold />} )}
isDisabled={!isHovered}
/>
)}
</Flex>
</Flex>
</Flex>
</Flex>
</Flex>
</Flex> </Flex>
</Flex> </Flex>
<ConfirmationAlertDialog <ConfirmationAlertDialog