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): tweak pagination styles

Browse Source
This commit is contained in:
psychedelicious 2024-07-25 11:47:34 +10:00
parent 524647b1f1
commit 24609da6ab
1 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx
View File

@ -1,7 +1,7 @@
import { Button, Flex, Icon, IconButton } from '@invoke-ai/ui-library'; import { Button, Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { PiCaretLeftBold, PiCaretRightBold, PiDotsThreeBold } from 'react-icons/pi'; import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
import { JumpTo } from './JumpTo'; import { JumpTo } from './JumpTo';
@ -22,7 +22,7 @@ export const GalleryPagination = () => {
} }
return ( return (
<Flex justifyContent="center" alignItems="center" w="full" gap={1}> <Flex justifyContent="center" alignItems="center" w="full" gap={1} pt={2}>
<IconButton <IconButton
size="sm" size="sm"
aria-label="prev" aria-label="prev"
@ -31,21 +31,11 @@ export const GalleryPagination = () => {
isDisabled={!isPrevEnabled} isDisabled={!isPrevEnabled}
variant="ghost" variant="ghost"
/> />
{pageButtons.map((page, i) => { <Spacer />
if (page === ELLIPSIS) { {pageButtons.map((page, i) => (
return <Icon as={PiDotsThreeBold} boxSize="4" key={`ellipsis-${i}`} />; <PageButton key={`${page}_${i}`} page={page} currentPage={currentPage} goToPage={goToPage} />
} ))}
return ( <Spacer />
<Button
size="sm"
key={page}
onClick={goToPage.bind(null, page - 1)}
variant={currentPage === page - 1 ? 'solid' : 'outline'}
>
{page}
</Button>
);
})}
<IconButton <IconButton
size="sm" size="sm"
aria-label="next" aria-label="next"
@ -58,3 +48,24 @@ export const GalleryPagination = () => {
</Flex> </Flex>
); );
}; };
type PageButtonProps = {
page: number | typeof ELLIPSIS;
currentPage: number;
goToPage: (page: number) => void;
};
const PageButton = ({ page, currentPage, goToPage }: PageButtonProps) => {
if (page === ELLIPSIS) {
return (
<Button size="sm" variant="link" isDisabled>
...
</Button>
);
}
return (
<Button size="sm" onClick={goToPage.bind(null, page - 1)} variant={currentPage === page - 1 ? 'solid' : 'outline'}>
{page}
</Button>
);
};