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

Smaller Gallery Images

Browse Source
This commit is contained in:
blessedcoolant 2022-10-09 11:03:45 +13:00 committed by Lincoln Stein
parent f15fd2c3d3
commit 1b02074fea
7 changed files with 164 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/dist/assets/index.3c84aaa4.css → frontend/dist/assets/index.787a8262.css vendored
View File

File diff suppressed because one or more lines are too long

78
frontend/dist/assets/index.43106324.js → frontend/dist/assets/index.a564edff.js vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InvokeAI - A Stable Diffusion Toolkit</title> <title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" /> <link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="/assets/index.43106324.js"></script> <script type="module" crossorigin src="/assets/index.a564edff.js"></script>
<link rel="stylesheet" href="/assets/index.3c84aaa4.css"> <link rel="stylesheet" href="/assets/index.787a8262.css">
</head> </head>
<body> <body>

56
frontend/src/features/gallery/HoverableImage.scss Normal file
View File

@ -0,0 +1,56 @@
.hoverable-image {
display: grid;
grid-template-areas: 'hoverable-image';
transition: transform 0.2s ease-out;
&:hover {
cursor: pointer;
border-radius: 0.5rem;
z-index: 2;
}
.hoverable-image-image,
.hoverable-image-content,
.hoverable-image-icons {
grid-area: hoverable-image;
}
.hoverable-image-image {
width: 80px;
height: 80px;
}
.hoverable-image-content {
display: grid;
place-items: center;
.hoverable-image-check {
fill: var(--status-good-color);
}
}
.hoverable-image-icons {
grid-area: hoverable-image;
position: absolute;
bottom: -2rem;
display: grid;
grid-template-columns: repeat(2, max-content);
border-radius: 0.4rem;
background-color: var(--background-color-secondary);
padding: 0.2rem;
gap: 0.2rem;
grid-auto-rows: max-content;
place-self: center;
button {
width: 12px;
height: 12px;
border-radius: 0.2rem;
padding: 10px 0;
svg {
width: 12px;
height: 12px;
}
}
}
}

78
frontend/src/features/gallery/HoverableImage.tsx
View File

@ -1,12 +1,4 @@
import { import { Box, Icon, IconButton, Image, Tooltip } from '@chakra-ui/react';
Box,
Flex,
Icon,
IconButton,
Image,
Tooltip,
useColorModeValue,
} from '@chakra-ui/react';
import { RootState, useAppDispatch, useAppSelector } from '../../app/store'; import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
import { setCurrentImage } from './gallerySlice'; import { setCurrentImage } from './gallerySlice';
import { FaCheck, FaImage, FaSeedling, FaTrashAlt } from 'react-icons/fa'; import { FaCheck, FaImage, FaSeedling, FaTrashAlt } from 'react-icons/fa';
@ -42,13 +34,6 @@ const HoverableImage = memo((props: HoverableImageProps) => {
(state: RootState) => state.options.activeTab (state: RootState) => state.options.activeTab
); );
const checkColor = useColorModeValue('green.600', 'green.300');
const bgColor = useColorModeValue('gray.200', 'gray.700');
const bgGradient = useColorModeValue(
'radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 20%, rgba(0,0,0,0) 100%)',
'radial-gradient(circle, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0) 100%)'
);
const { image, isSelected } = props; const { image, isSelected } = props;
const { url, uuid, metadata } = image; const { url, uuid, metadata } = image;
@ -76,43 +61,35 @@ const HoverableImage = memo((props: HoverableImageProps) => {
const handleClickImage = () => dispatch(setCurrentImage(image)); const handleClickImage = () => dispatch(setCurrentImage(image));
return ( return (
<Box position={'relative'} key={uuid}> <Box
position={'relative'}
key={uuid}
className="hoverable-image"
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
<Image <Image
width={120} width={80}
height={120} height={80}
objectFit="cover" objectFit="cover"
rounded={'md'} rounded={'md'}
src={url} src={url}
loading={'lazy'} loading={'lazy'}
backgroundColor={bgColor} className="hoverable-image-image"
/> />
<Flex <div className="hoverable-image-content" onClick={handleClickImage}>
cursor={'pointer'}
position={'absolute'}
top={0}
left={0}
rounded={'md'}
width="100%"
height="100%"
alignItems={'center'}
justifyContent={'center'}
background={isSelected ? bgGradient : undefined}
onClick={handleClickImage}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
>
{isSelected && ( {isSelected && (
<Icon fill={checkColor} width={'50%'} height={'50%'} as={FaCheck} /> <Icon
width={'50%'}
height={'50%'}
as={FaCheck}
className="hoverable-image-check"
/>
)} )}
</div>
{isHovered && ( {isHovered && (
<Flex <div className="hoverable-image-icons">
direction={'column'} <Tooltip label={'Delete image'} hasArrow>
gap={1}
position={'absolute'}
top={1}
right={1}
>
<Tooltip label={'Delete image'}>
<DeleteImageModal image={image}> <DeleteImageModal image={image}>
<IconButton <IconButton
colorScheme="red" colorScheme="red"
@ -125,9 +102,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
</DeleteImageModal> </DeleteImageModal>
</Tooltip> </Tooltip>
{['txt2img', 'img2img'].includes(image?.metadata?.image?.type) && ( {['txt2img', 'img2img'].includes(image?.metadata?.image?.type) && (
<Tooltip label="Use all parameters"> <Tooltip label="Use All Parameters" hasArrow>
<IconButton <IconButton
aria-label="Use all parameters" aria-label="Use All Parameters"
icon={<IoArrowUndoCircleOutline />} icon={<IoArrowUndoCircleOutline />}
size="xs" size="xs"
fontSize={18} fontSize={18}
@ -137,9 +114,9 @@ const HoverableImage = memo((props: HoverableImageProps) => {
</Tooltip> </Tooltip>
)} )}
{image?.metadata?.image?.seed !== undefined && ( {image?.metadata?.image?.seed !== undefined && (
<Tooltip label="Use seed"> <Tooltip label="Use Seed" hasArrow>
<IconButton <IconButton
aria-label="Use seed" aria-label="Use Seed"
icon={<FaSeedling />} icon={<FaSeedling />}
size="xs" size="xs"
fontSize={16} fontSize={16}
@ -148,7 +125,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
/> />
</Tooltip> </Tooltip>
)} )}
<Tooltip label="Send To Image To Image"> <Tooltip label="Send To Image To Image" hasArrow>
<IconButton <IconButton
aria-label="Send To Image To Image" aria-label="Send To Image To Image"
icon={<FaImage />} icon={<FaImage />}
@ -158,9 +135,8 @@ const HoverableImage = memo((props: HoverableImageProps) => {
onClickCapture={handleSetInitImage} onClickCapture={handleSetInitImage}
/> />
</Tooltip> </Tooltip>
</Flex> </div>
)} )}
</Flex>
</Box> </Box>
); );
}, memoEqualityCheck); }, memoEqualityCheck);

4
frontend/src/features/gallery/ImageGallery.scss
View File

@ -57,8 +57,8 @@
.image-gallery { .image-gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, auto)); grid-template-columns: repeat(auto-fill, minmax(80px, auto));
gap: 0.6rem; gap: 0.5rem;
justify-items: center; justify-items: center;
} }

1
frontend/src/styles/index.scss
View File

@ -26,6 +26,7 @@
// gallery // gallery
@use '../features/gallery/CurrentImageDisplay.scss'; @use '../features/gallery/CurrentImageDisplay.scss';
@use '../features/gallery/ImageGallery.scss'; @use '../features/gallery/ImageGallery.scss';
@use '../features/gallery/HoverableImage.scss';
@use '../features/gallery/InvokePopover.scss'; @use '../features/gallery/InvokePopover.scss';
@use '../features/gallery/ImageMetaDataViewer/ImageMetadataViewer.scss'; @use '../features/gallery/ImageMetaDataViewer/ImageMetadataViewer.scss';