filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-27 10:52:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(objectPreview): add hover to see description

Browse Source
This commit is contained in:
Aminejv 2021-07-20 12:31:47 +01:00
parent c40fb9887f
commit 7dad0cad06
1 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/core/ObjectPreview/ObjectPreviewPrimitive.js
View File

@ -23,12 +23,20 @@ const STYLES_DESCRIPTION = (theme) => css`
border-radius: 0px 0px 16px 16px; border-radius: 0px 0px 16px 16px;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 9px 16px 8px; max-height: 61px;
@media (max-width: ${theme.sizes.mobile}px) { @media (max-width: ${theme.sizes.mobile}px) {
padding: 8px; padding: 8px;
} }
`; `;
const STYLES_DESCRIPTION_INNER = (theme) => css`
background-color: ${theme.semantic.bgLight};
padding: 9px 16px 8px;
border-radius: 16px;
height: calc(170px + 61px);
`;
const STYLES_PREVIEW = css` const STYLES_PREVIEW = css`
overflow: hidden; overflow: hidden;
`; `;
@ -60,10 +68,16 @@ export default function ObjectPreviewPrimitive({
}) { }) {
const { like, isLiked, likeCount } = useLikeHandler({ file, viewer }); const { like, isLiked, likeCount } = useLikeHandler({ file, viewer });
const { save, isSaved, saveCount } = useSaveHandler({ file, viewer }); const { save, isSaved, saveCount } = useSaveHandler({ file, viewer });
const showSaveButton = viewer?.id !== file?.ownerId;
const [showControls, setShowControls] = React.useState(false); const [areControlsVisible, setShowControls] = React.useState(false);
const showControlsVisibility = () => setShowControls(true); const showControls = () => setShowControls(true);
const hideControlsVisibility = () => setShowControls(false); const hideControls = () => setShowControls(false);
const [isBodyVisible, setShowBody] = React.useState(false);
const showBody = () => setShowBody(true);
const hideBody = () => setShowBody(false);
const body = file?.data?.body;
const title = file.data.name || file.filename; const title = file.data.name || file.filename;
@ -78,11 +92,9 @@ export default function ObjectPreviewPrimitive({
/> />
); );
} }
const showSaveButton = viewer?.id !== file?.ownerId;
return ( return (
<div <div
onMouseEnter={showControlsVisibility}
onMouseLeave={hideControlsVisibility}
css={[ css={[
STYLES_WRAPPER, STYLES_WRAPPER,
css({ css({
@ -92,7 +104,7 @@ export default function ObjectPreviewPrimitive({
]} ]}
> >
<AnimatePresence> <AnimatePresence>
{showControls && ( {areControlsVisible && (
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
@ -105,23 +117,34 @@ export default function ObjectPreviewPrimitive({
)} )}
</AnimatePresence> </AnimatePresence>
<AspectRatio ratio={248 / 248}> <AspectRatio ratio={248 / 248}>
<div css={STYLES_PREVIEW}>{children}</div> <div css={STYLES_PREVIEW} onMouseEnter={showControls} onMouseLeave={hideControls}>
{children}
</div>
</AspectRatio> </AspectRatio>
<article css={STYLES_DESCRIPTION}> <article css={STYLES_DESCRIPTION} onMouseEnter={showBody} onMouseLeave={hideBody}>
<div> <motion.div
css={STYLES_DESCRIPTION_INNER}
initial={{ y: 0 }}
animate={{ y: isBodyVisible ? -170 : 0 }}
transition={{ type: "spring", stiffness: 170, damping: 26 }}
>
<H5 nbrOflines={1} color="textBlack"> <H5 nbrOflines={1} color="textBlack">
{title} {title}
</H5> </H5>
<P3 <P3 css={css({ marginTop: 3, textTransform: "uppercase" })} color="textGray">
css={css({
marginTop: 3,
textTransform: "uppercase",
})}
color="textGray"
>
{tag} {tag}
</P3> </P3>
</div> <H5
as={motion.h5}
initial={{ opacity: 0 }}
animate={{ opacity: isBodyVisible ? 1 : 0 }}
style={{ marginTop: 5 }}
nbrOflines={8}
color="textGrayDark"
>
{body ? body : "sorry, no description available."}
</H5>
</motion.div>
</article> </article>
</div> </div>
); );