filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 01:23:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(CollectionPreview): display popup when only hovering over title and description

Browse Source
This commit is contained in:
Aminejv 2021-08-09 09:59:20 +01:00
parent c16c8af3ae
commit 321140a08a
1 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/core/CollectionPreviewBlock/index.js
View File

@ -120,31 +120,31 @@ export default function CollectionPreview({ collection, viewer, owner, onAction
</motion.div>
</Preview>
<motion.article
css={STYLES_DESCRIPTION}
onMouseMove={showDescription}
onMouseLeave={hideDescription}
>
<motion.article css={STYLES_DESCRIPTION}>
<div style={{ position: "relative", paddingTop: 9 }}>
<H5 nbrOflines={1} style={{ visibility: "hidden" }}>
{title}
</H5>
<div ref={descriptionRef}>
<P3
style={{ paddingTop: 3, visibility: "hidden" }}
nbrOflines={1}
color="textGrayDark"
>
{description}
</P3>
</div>
{description && (
<div ref={descriptionRef}>
<P3
style={{ paddingTop: 3, visibility: "hidden" }}
nbrOflines={1}
color="textGrayDark"
>
{description}
</P3>
</div>
)}
<motion.div
css={STYLES_INNER_DESCRIPTION}
initial={false}
animate={isDescriptionVisible ? "hovered" : "initial"}
variants={animationController.containerVariants}
onMouseMove={showDescription}
onMouseLeave={hideDescription}
>
<H5 color="textBlack" nbrOflines={1} title={title}>
{title}
@ -283,10 +283,11 @@ const useAnimateDescription = ({
useMounted(() => {
if (isDescriptionVisible) {
descriptionControls.start({ opacity: 1, transition: { delay: 0.2 } });
descriptionControls.start({ visibility: "initial", opacity: 1, transition: { delay: 0.2 } });
return;
}
descriptionControls.set({ opacity: 0 });
descriptionControls.set({ opacity: 0, visibility: "hidden" });
}, [isDescriptionVisible]);
return { containerVariants, descriptionControls };