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): add hover show/hide to appVersion

Browse Source
This commit is contained in:
psychedelicious 2023-07-08 19:55:19 +10:00
parent 3333805821
commit 078a829b3a
1 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,17 @@
import { Flex, Image, Text } from '@chakra-ui/react'; import { Flex, Image, Text } from '@chakra-ui/react';
import InvokeAILogoImage from 'assets/images/logo.png'; import InvokeAILogoImage from 'assets/images/logo.png';
import { AnimatePresence, motion } from 'framer-motion';
import { 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 isHovered = useHoverDirty(ref);
return ( return (
<Flex alignItems="center" gap={3} ps={1}> <Flex alignItems="center" gap={3} ps={1} ref={ref}>
<Image <Image
src={InvokeAILogoImage} src={InvokeAILogoImage}
alt="invoke-ai-logo" alt="invoke-ai-logo"
@ -22,19 +27,36 @@ const InvokeAILogoComponent = () => {
<Text sx={{ fontSize: 'xl', userSelect: 'none' }}> <Text sx={{ fontSize: 'xl', userSelect: 'none' }}>
invoke <strong>ai</strong> invoke <strong>ai</strong>
</Text> </Text>
{appVersion && ( <AnimatePresence>
<Text {isHovered && appVersion && (
sx={{ <motion.div
fontWeight: 600, key="statusText"
marginTop: 1, initial={{
color: 'base.300', opacity: 0,
fontSize: 14, }}
}} animate={{
variant="subtext" opacity: 1,
> transition: { duration: 0.15 },
{appVersion.version} }}
</Text> exit={{
)} opacity: 0,
transition: { delay: 0.8 },
}}
>
<Text
sx={{
fontWeight: 600,
marginTop: 1,
color: 'base.300',
fontSize: 14,
}}
variant="subtext"
>
{appVersion.version}
</Text>
</motion.div>
)}
</AnimatePresence>
</Flex> </Flex>
</Flex> </Flex>
); );