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

fix(ui): fixed requested changes and made the badge display on hover

Browse Source
This commit is contained in:
Rohinish 2024-02-20 18:48:13 +05:30 committed by psychedelicious
parent e076898798
commit d919022ba5
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -1,6 +1,5 @@
import { Text } from '@chakra-ui/react';
import type { SystemStyleObject } from '@invoke-ai/ui-library'; import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Box, Flex, useShiftModifier } from '@invoke-ai/ui-library'; import { Box, Flex, Text, useShiftModifier } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { $customStarUI } from 'app/store/nanostores/customStarUI';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@ -23,6 +22,16 @@ const imageIconStyleOverrides: SystemStyleObject = {
bottom: 2, bottom: 2,
top: 'auto', top: 'auto',
}; };
const boxSx: SystemStyleObject = {
containerType: 'inline-size',
};
const badgeSx: SystemStyleObject = {
'@container (max-width: 80px)': {
'&': { display: 'none' },
},
};
interface HoverableImageProps { interface HoverableImageProps {
imageName: string; imageName: string;
index: number; index: number;
@ -122,10 +131,7 @@ const GalleryImage = (props: HoverableImageProps) => {
} }
return ( return (
<Box w="full" h="full" className="gallerygrid-image" data-testid={dataTestId} <Box w="full" h="full" className="gallerygrid-image" data-testid={dataTestId} sx={boxSx}>
sx={{
containerType: "inline-size",
}}>
<Flex <Flex
ref={imageContainerRef} ref={imageContainerRef}
userSelect="none" userSelect="none"
@ -148,21 +154,21 @@ const GalleryImage = (props: HoverableImageProps) => {
onMouseOver={handleMouseOver} onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut} onMouseOut={handleMouseOut}
> >
<>
{isHovered && (
<Text <Text
position="absolute" position="absolute"
background="white" background="white"
color="black" color="black"
fontSize="12px" fontSize="base.50"
bottom={0} bottom={0}
right={0} right={0}
px={2} px={2}
sx={{ opacity={0.7}
"@container (max-width: 80px)": { borderTopLeftRadius="base"
"&": { display: "none" }, borderBottomRightRadius="base"
}, sx={badgeSx}
}} >{`${imageDTO.width}x${imageDTO.height}`}</Text>)}
>{`${imageDTO.width}x${imageDTO.height}`}</Text>
<>
<IAIDndImageIcon onClick={toggleStarredState} icon={starIcon} tooltip={starTooltip} /> <IAIDndImageIcon onClick={toggleStarredState} icon={starIcon} tooltip={starTooltip} />
{isHovered && shift && ( {isHovered && shift && (