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): refine workflow list UI

Browse Source
This commit is contained in:
psychedelicious 2023-12-02 19:52:17 +11:00
parent 5a0e8261bf
commit 78face3481
2 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -136,14 +136,6 @@ const WorkflowLibraryList = () => {
setPage(0); setPage(0);
}, []); }, []);
if (isLoading) {
return <IAINoContentFallbackWithSpinner label={t('workflows.loading')} />;
}
if (!data || isError) {
return <IAINoContentFallback label={t('workflows.problemLoading')} />;
}
return ( return (
<> <>
<Flex gap={4} alignItems="center" h={10} flexShrink={0} flexGrow={0}> <Flex gap={4} alignItems="center" h={10} flexShrink={0} flexGrow={0}>
@ -172,7 +164,7 @@ const WorkflowLibraryList = () => {
data={ORDER_BY_DATA} data={ORDER_BY_DATA}
onChange={handleChangeOrderBy} onChange={handleChangeOrderBy}
formControlProps={{ formControlProps={{
w: '12rem', w: 48,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 2, gap: 2,
@ -185,7 +177,7 @@ const WorkflowLibraryList = () => {
data={DIRECTION_DATA} data={DIRECTION_DATA}
onChange={handleChangeDirection} onChange={handleChangeDirection}
formControlProps={{ formControlProps={{
w: '12rem', w: 48,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 2, gap: 2,
@ -217,7 +209,11 @@ const WorkflowLibraryList = () => {
</InputGroup> </InputGroup>
</Flex> </Flex>
<Divider /> <Divider />
{data.items.length ? ( {isLoading ? (
<IAINoContentFallbackWithSpinner label={t('workflows.loading')} />
) : !data || isError ? (
<IAINoContentFallback label={t('workflows.problemLoading')} />
) : data.items.length ? (
<ScrollableContent> <ScrollableContent>
<Flex w="full" h="full" gap={2} px={1} flexDir="column"> <Flex w="full" h="full" gap={2} px={1} flexDir="column">
{data.items.map((w) => ( {data.items.map((w) => (
@ -229,9 +225,15 @@ const WorkflowLibraryList = () => {
<IAINoContentFallback label={t('workflows.noUserWorkflows')} /> <IAINoContentFallback label={t('workflows.noUserWorkflows')} />
)} )}
<Divider /> <Divider />
{data && (
<Flex w="full" justifyContent="space-around"> <Flex w="full" justifyContent="space-around">
<WorkflowLibraryPagination data={data} page={page} setPage={setPage} /> <WorkflowLibraryPagination
data={data}
page={page}
setPage={setPage}
/>
</Flex> </Flex>
)}
</> </>
); );
}; };

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

@ -29,9 +29,9 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
return ( return (
<Flex key={workflowDTO.workflow_id} w="full"> <Flex key={workflowDTO.workflow_id} w="full">
<Flex w="full" alignItems="center" gap={2}> <Flex w="full" alignItems="center" gap={2} h={12}>
<Flex flexDir="column" flexGrow={1}> <Flex flexDir="column" flexGrow={1} h="full">
<Flex alignItems="center" w="full"> <Flex alignItems="center" w="full" h="50%">
<Heading size="sm"> <Heading size="sm">
{workflowDTO.name || t('workflows.unnamedWorkflow')} {workflowDTO.name || t('workflows.unnamedWorkflow')}
</Heading> </Heading>
@ -44,7 +44,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
</Text> </Text>
)} )}
</Flex> </Flex>
<Flex alignItems="center" w="full"> <Flex alignItems="center" w="full" h="50%">
{workflowDTO.description ? ( {workflowDTO.description ? (
<Text fontSize="sm" noOfLines={1}> <Text fontSize="sm" noOfLines={1}>
{workflowDTO.description} {workflowDTO.description}