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

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

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

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

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