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): gallery prev/next buttons animations

Browse Source
This commit is contained in:
psychedelicious 2024-05-03 09:50:20 +10:00 committed by Kent Keirsey
parent 33617fc06a
commit 98664fc46f
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
View File

@ -24,6 +24,7 @@ const selectLastSelectedImageName = createSelector(
); );
const CurrentImagePreview = () => { const CurrentImagePreview = () => {
const { t } = useTranslation();
const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails); const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
const imageName = useAppSelector(selectLastSelectedImageName); const imageName = useAppSelector(selectLastSelectedImageName);
const hasDenoiseProgress = useAppSelector((s) => Boolean(s.system.denoiseProgress)); const hasDenoiseProgress = useAppSelector((s) => Boolean(s.system.denoiseProgress));
@ -51,26 +52,18 @@ const CurrentImagePreview = () => {
// Show and hide the next/prev buttons on mouse move // Show and hide the next/prev buttons on mouse move
const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = useState<boolean>(false); const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = useState<boolean>(false);
const timeoutId = useRef(0); const timeoutId = useRef(0);
const onMouseMove = useCallback(() => {
const { t } = useTranslation();
const handleMouseOver = useCallback(() => {
setShouldShowNextPrevButtons(true); setShouldShowNextPrevButtons(true);
window.clearTimeout(timeoutId.current); window.clearTimeout(timeoutId.current);
}, []);
const handleMouseOut = useCallback(() => {
timeoutId.current = window.setTimeout(() => { timeoutId.current = window.setTimeout(() => {
setShouldShowNextPrevButtons(false); setShouldShowNextPrevButtons(false);
}, 500); }, 1000);
}, []); }, []);
return ( return (
<Flex <Flex
onMouseOver={handleMouseOver} onMouseMove={onMouseMove}
onMouseOut={handleMouseOut}
width="full" width="full"
height="full" height="full"
alignItems="center" alignItems="center"
@ -93,12 +86,12 @@ const CurrentImagePreview = () => {
/> />
)} )}
{shouldShowImageDetails && imageDTO && ( {shouldShowImageDetails && imageDTO && (
<Box position="absolute" top="0" width="full" height="full" borderRadius="base"> <Box position="absolute" top="0" width="full" height="full" borderRadius="base" opacity={0.8}>
<ImageMetadataViewer image={imageDTO} /> <ImageMetadataViewer image={imageDTO} />
</Box> </Box>
)} )}
<AnimatePresence> <AnimatePresence>
{!shouldShowImageDetails && imageDTO && shouldShowNextPrevButtons && ( {shouldShowNextPrevButtons && imageDTO && (
<motion.div key="nextPrevButtons" initial={initial} animate={animate} exit={exit} style={motionStyles}> <motion.div key="nextPrevButtons" initial={initial} animate={animate} exit={exit} style={motionStyles}>
<NextPrevImageButtons /> <NextPrevImageButtons />
</motion.div> </motion.div>
@ -115,11 +108,11 @@ const initial: AnimationProps['initial'] = {
}; };
const animate: AnimationProps['animate'] = { const animate: AnimationProps['animate'] = {
opacity: 1, opacity: 1,
transition: { duration: 0.1 }, transition: { duration: 0.07 },
}; };
const exit: AnimationProps['exit'] = { const exit: AnimationProps['exit'] = {
opacity: 0, opacity: 0,
transition: { duration: 0.1 }, transition: { duration: 0.07 },
}; };
const motionStyles: CSSProperties = { const motionStyles: CSSProperties = {
position: 'absolute', position: 'absolute',