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): fix logo version tooltip

Browse Source
This commit is contained in:
psychedelicious 2024-01-04 16:34:31 +11:00 committed by Kent Keirsey
parent 8f9e9e639e
commit 360b6cb286
1 changed files with 9 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
View File

@ -1,41 +1,23 @@
/* eslint-disable i18next/no-literal-string */ /* eslint-disable i18next/no-literal-string */
import { Flex, Image } from '@chakra-ui/react'; import { Image } from '@chakra-ui/react';
import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg'; import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg';
import { InvText } from 'common/components/InvText/wrapper'; import { InvText } from 'common/components/InvText/wrapper';
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import type { AnimationProps } from 'framer-motion'; import { memo, useMemo, useRef } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { memo, useRef } from 'react';
import { useHoverDirty } from 'react-use';
import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo'; import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
const InvokeAILogoComponent = () => { const InvokeAILogoComponent = () => {
const { data: appVersion } = useGetAppVersionQuery(); const { data: appVersion } = useGetAppVersionQuery();
const ref = useRef(null); const ref = useRef(null);
const isHovered = useHoverDirty(ref); const tooltip = useMemo(() => {
if (appVersion) {
return <InvText fontWeight="semibold">v{appVersion.version}</InvText>;
}
return null;
}, [appVersion]);
return ( return (
<InvTooltip <InvTooltip placement="right" label={tooltip} p={1} px={2} gutter={16}>
placement="right"
label={
<Flex gap={3} alignItems="center">
<AnimatePresence>
{isHovered && appVersion && (
<motion.div
key="statusText"
initial={initial}
animate={animate}
exit={exit}
>
<InvText fontWeight="semibold" marginTop={1} color="base.900">
v{appVersion.version}
</InvText>
</motion.div>
)}
</AnimatePresence>
</Flex>
}
>
<Image <Image
ref={ref} ref={ref}
src={InvokeLogoYellow} src={InvokeLogoYellow}
@ -51,15 +33,3 @@ const InvokeAILogoComponent = () => {
}; };
export default memo(InvokeAILogoComponent); export default memo(InvokeAILogoComponent);
const initial: AnimationProps['initial'] = {
opacity: 0,
};
const animate: AnimationProps['animate'] = {
opacity: 1,
transition: { duration: 0.1 },
};
const exit: AnimationProps['exit'] = {
opacity: 0,
transition: { delay: 0.8 },
};