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

feat(ui): workflow library styling

Browse Source
This commit is contained in:
psychedelicious 2024-01-12 01:05:49 +11:00 committed by Kent Keirsey
parent f81d36c95f
commit b55c2b99a7
3 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
View File

@ -180,6 +180,7 @@ const WorkflowLibraryList = () => {
label={t('common.orderBy')}
isDisabled={isFetching}
w={64}
minW={56}
>
<InvSelect
value={valueOrderBy}
@ -191,6 +192,7 @@ const WorkflowLibraryList = () => {
label={t('common.direction')}
isDisabled={isFetching}
w={64}
minW={56}
>
<InvSelect
value={valueDirection}
@ -207,6 +209,7 @@ const WorkflowLibraryList = () => {
onKeyDown={handleKeydownFilterText}
onChange={handleChangeFilterText}
data-testid="workflow-search-input"
minW={64}
/>
{query.trim().length && (
<InputRightElement>
@ -229,7 +232,7 @@ const WorkflowLibraryList = () => {
<IAINoContentFallback label={t('workflows.problemLoading')} />
) : data.items.length ? (
<ScrollableContent>
<Flex w="full" h="full" gap={2} px={1} flexDir="column">
<Flex w="full" h="full" flexDir="column">
{data.items.map((w) => (
<WorkflowLibraryListItem key={w.workflow_id} workflowDTO={w} />
))}

32
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
View File

@ -36,16 +36,31 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
);
return (
<Flex key={workflowDTO.workflow_id} w="full">
<Flex
key={workflowDTO.workflow_id}
w="full"
p={2}
borderRadius="base"
_hover={{ bg: 'base.750' }}
>
<Flex w="full" alignItems="center" gap={2} h={12}>
<Flex flexDir="column" flexGrow={1} h="full">
<Flex alignItems="center" w="full" h="50%">
<Heading size="sm" variant={isOpen ? 'invokeBlue' : undefined}>
<Heading
size="sm"
noOfLines={1}
variant={isOpen ? 'invokeBlue' : undefined}
>
{workflowDTO.name || t('workflows.unnamedWorkflow')}
</Heading>
<Spacer />
{workflowDTO.category === 'user' && (
<InvText fontSize="sm" variant="subtext">
<InvText
fontSize="sm"
variant="subtext"
flexShrink={0}
noOfLines={1}
>
{t('common.updated')}:{' '}
{dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
{dateFormat(workflowDTO.updated_at, masks.shortTime)}
@ -54,7 +69,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
</Flex>
<Flex alignItems="center" w="full" h="50%">
{workflowDTO.description ? (
<InvText fontSize="sm" noOfLines={1} w="70%">
<InvText fontSize="sm" noOfLines={1}>
{workflowDTO.description}
</InvText>
) : (
@ -69,7 +84,12 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
)}
<Spacer />
{workflowDTO.category === 'user' && (
<InvText fontSize="sm" variant="subtext">
<InvText
fontSize="sm"
variant="subtext"
flexShrink={0}
noOfLines={1}
>
{t('common.created')}:{' '}
{dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
{dateFormat(workflowDTO.created_at, masks.shortTime)}
@ -78,6 +98,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
</Flex>
</Flex>
<InvButton
flexShrink={0}
isDisabled={isOpen}
onClick={handleGetAndLoadWorkflow}
isLoading={getAndLoadWorkflowResult.isLoading}
@ -87,6 +108,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
</InvButton>
{workflowDTO.category === 'user' && (
<InvButton
flexShrink={0}
colorScheme="error"
isDisabled={isOpen}
onClick={handleDeleteWorkflow}

4
invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
View File

@ -23,8 +23,8 @@ const WorkflowLibraryModal = () => {
h="80%"
minW="unset"
minH="unset"
maxW= "1200px"
maxH= "600px"
maxW="1200px"
maxH="664px"
>
<InvModalHeader>{t('workflows.workflowLibrary')}</InvModalHeader>
<InvModalCloseButton />