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): gallery bulk select styling

Browse Source
This commit is contained in:
psychedelicious 2024-06-26 22:37:57 +10:00
parent 280ec9d4b3
commit 2dd172c2c6
3 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
invokeai/frontend/web/src/features/gallery/components/GalleryBulkSelect.tsx
View File

@ -1,10 +1,10 @@
import { Flex, IconButton, Spacer, Tag, TagCloseButton, TagLabel, Tooltip } from '@invoke-ai/ui-library'; import { Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
import { selectionChanged } from 'features/gallery/store/gallerySlice'; import { selectionChanged } from 'features/gallery/store/gallerySlice';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { BiSelectMultiple } from 'react-icons/bi';
export const GalleryBulkSelect = () => { export const GalleryBulkSelect = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -12,38 +12,38 @@ export const GalleryBulkSelect = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { imageDTOs } = useGalleryImages(); const { imageDTOs } = useGalleryImages();
const onClickClearSelection = useCallback(() => { const onClearSelection = useCallback(() => {
dispatch(selectionChanged([])); dispatch(selectionChanged([]));
}, [dispatch]); }, [dispatch]);
const onClickSelectAllPage = useCallback(() => { const onSelectPage = useCallback(() => {
dispatch(selectionChanged(selection.concat(imageDTOs))); dispatch(selectionChanged(imageDTOs));
}, [dispatch, imageDTOs, selection]); }, [dispatch, imageDTOs]);
useHotkeys(['ctrl+a', 'meta+a'], onSelectPage, { preventDefault: true }, [onSelectPage]);
if (selection.length <= 1) {
return null;
}
return ( return (
<Flex alignItems="center" justifyContent="space-between"> <Tag
{selection.length > 0 ? ( position="absolute"
<Tag> bg="invokeBlue.800"
<TagLabel> color="base.50"
{selection.length} {t('common.selected')} py={1}
</TagLabel> px={3}
<Tooltip label="Clear selection"> userSelect="none"
<TagCloseButton onClick={onClickClearSelection} /> shadow="dark-lg"
</Tooltip> fontWeight="semibold"
</Tag> border={1}
) : ( borderStyle="solid"
<Spacer /> borderColor="whiteAlpha.300"
)} >
<TagLabel>
<Tooltip label={t('gallery.selectAllOnPage')}> {selection.length} {t('common.selected')}
<IconButton </TagLabel>
variant="outline" <TagCloseButton onClick={onClearSelection} />
size="sm" </Tag>
icon={<BiSelectMultiple />}
aria-label="Bulk select"
onClick={onClickSelectAllPage}
/>
</Tooltip>
</Flex>
); );
}; };

13
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -10,7 +10,6 @@ import { RiServerLine } from 'react-icons/ri';
import BoardsList from './Boards/BoardsList/BoardsList'; import BoardsList from './Boards/BoardsList/BoardsList';
import GalleryBoardName from './GalleryBoardName'; import GalleryBoardName from './GalleryBoardName';
import { GalleryBulkSelect } from './GalleryBulkSelect';
import GallerySettingsPopover from './GallerySettingsPopover'; import GallerySettingsPopover from './GallerySettingsPopover';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid'; import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
import { GalleryPagination } from './ImageGrid/GalleryPagination'; import { GalleryPagination } from './ImageGrid/GalleryPagination';
@ -31,7 +30,16 @@ const ImageGalleryContent = () => {
}, [dispatch]); }, [dispatch]);
return ( return (
<Flex layerStyle="first" flexDirection="column" h="full" w="full" borderRadius="base" p={2} gap={2}> <Flex
layerStyle="first"
position="relative"
flexDirection="column"
h="full"
w="full"
borderRadius="base"
p={2}
gap={2}
>
{galleryHeader} {galleryHeader}
<Box> <Box>
<Flex alignItems="center" justifyContent="space-between" gap={2}> <Flex alignItems="center" justifyContent="space-between" gap={2}>
@ -72,7 +80,6 @@ const ImageGalleryContent = () => {
</TabList> </TabList>
</Tabs> </Tabs>
</Flex> </Flex>
<GalleryBulkSelect />
<GalleryImageGrid /> <GalleryImageGrid />
<GalleryPagination /> <GalleryPagination />

2
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -2,6 +2,7 @@ import { Box, Flex, Grid } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants'; import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback'; import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import { GalleryBulkSelect } from 'features/gallery/components/GalleryBulkSelect';
import { useGalleryHotkeys } from 'features/gallery/hooks/useGalleryHotkeys'; import { useGalleryHotkeys } from 'features/gallery/hooks/useGalleryHotkeys';
import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors'; import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { limitChanged } from 'features/gallery/store/gallerySlice'; import { limitChanged } from 'features/gallery/store/gallerySlice';
@ -144,6 +145,7 @@ const Content = () => {
))} ))}
</Grid> </Grid>
</Box> </Box>
<GalleryBulkSelect />
</Box> </Box>
); );
}; };