Skip to content

Commit

Permalink
Merge pull request #851 from filecoin-project/@aminejv/preview-tweaks
Browse files Browse the repository at this point in the history 
Tweaks: Block Previews
  • Loading branch information
@martinalong
martinalong committed Aug 5, 2021
2 parents ad5fa73 + a6173d5 commit a0174ad
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 114 deletions.
1 change: 1 addition & 0 deletions common/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const LINK = css`
const TEXT = css`
box-sizing: border-box;
overflow-wrap: break-word;
text-align: left;
a {
${LINK}
Expand Down
191 changes: 103 additions & 88 deletions components/core/CollectionPreviewBlock/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { css } from "@emotion/react";
import { FollowButton } from "~/components/core/CollectionPreviewBlock/components";
import { useFollowHandler } from "~/components/core/CollectionPreviewBlock/hooks";
import { Link } from "~/components/core/Link";
import { AnimatePresence, motion } from "framer-motion";
import { motion } from "framer-motion";

import ObjectPlaceholder from "~/components/core/ObjectPreview/placeholders";

Expand Down Expand Up @@ -46,9 +46,11 @@ const STYLES_PREVIEW = css`
`;

const STYLES_DESCRIPTION_CONTAINER = (theme) => css`
background-color: ${theme.semantic.bgLight};
position: absolute;
bottom: 0%;
display: flex;
flex-direction: column;
position: relative;
padding: 9px 16px 12px;
border-radius: 0px 0px 16px 16px;
box-shadow: 0 -0.5px 0.5px ${theme.system.grayLight4};
Expand All @@ -68,11 +70,8 @@ const STYLES_PROFILE_IMAGE = (theme) => css`
object-fit: cover;
`;

const STYLES_METRICS = (theme) => css`
margin-top: 7px;
@media (max-width: ${theme.sizes.mobile}px) {
margin-top: 12px;
}
const STYLES_METRICS = css`
margin-top: auto;
${Styles.CONTAINER_CENTERED};
${STYLES_SPACE_BETWEEN}
`;
Expand Down Expand Up @@ -129,11 +128,6 @@ const getObjectToPreview = (objects = []) => {
return { ...objects[objectIdx], isImage };
};

const STYLES_DESCRIPTION_INNER = (theme) => css`
background-color: ${theme.semantic.bgLight};
border-radius: 16px;
`;

const Preview = ({ collection, children, ...props }) => {
const [isLoading, setLoading] = React.useState(true);
const handleOnLoaded = () => setLoading(false);
Expand Down Expand Up @@ -199,10 +193,8 @@ export default function CollectionPreview({ collection, viewer, owner, onAction
const showControls = () => setShowControls(true);
const hideControls = () => setShowControls(false);

// const [isBodyVisible, setShowBody] = React.useState(false);
// const showBody = () => setShowBody(true);
// const hideBody = () => setShowBody(false);
// const body = collection?.data?.body;
const { isDescriptionVisible, showDescription, hideDescription } = useShowDescription();
const description = collection?.data?.body;

const { follow, followCount, isFollowed } = useFollowHandler({ collection, viewer });

Expand All @@ -211,89 +203,112 @@ export default function CollectionPreview({ collection, viewer, owner, onAction
return (
<div css={STYLES_CONTAINER}>
<Preview collection={collection} onMouseEnter={showControls} onMouseLeave={hideControls}>
<AnimatePresence>
{areControlsVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
css={STYLES_CONTROLS}
>
<FollowButton
onClick={follow}
isFollowed={isFollowed}
followCount={followCount}
disabled={collection.ownerId === viewer?.id}
/>
</motion.div>
)}
</AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: areControlsVisible ? 1 : 0 }}
css={STYLES_CONTROLS}
>
<FollowButton
onClick={follow}
isFollowed={isFollowed}
followCount={followCount}
disabled={collection.ownerId === viewer?.id}
/>
</motion.div>
</Preview>
<div
css={STYLES_DESCRIPTION_CONTAINER}
// onMouseEnter={showBody} onMouseLeave={hideBody}
>
<div
css={STYLES_DESCRIPTION_INNER}
// initial={{ y: 0 }}
// animate={{ y: isBodyVisible ? -170 : 0 }}
// transition={{ type: "spring", stiffness: 170, damping: 26 }}

<div style={{ position: "relative", height: 61 }}>
<motion.div
css={STYLES_DESCRIPTION_CONTAINER}
onMouseEnter={showDescription}
onMouseLeave={hideDescription}
transition={{ duration: 0.4, ease: "easeOut" }}
>
<div css={[Styles.HORIZONTAL_CONTAINER_CENTERED, STYLES_SPACE_BETWEEN]}>
<Typography.H5 color="textBlack" nbrOflines={1}>
<Typography.H5 color="textBlack" nbrOflines={1} title={collection.slatename}>
{collection.slatename}
</Typography.H5>
</div>

{/* {isBodyVisible && (
<div
<motion.div
style={{ marginTop: 4 }}
initial={{ opacity: 0 }}
animate={{ opacity: isBodyVisible ? 1 : 0 }}
initial={{ height: 0 }}
animate={{
height: isDescriptionVisible ? 108 : 0,
}}
transition={{
type: "spring",
stiffness: 170,
damping: 26,
delay: isDescriptionVisible ? 0 : 0.25,
}}
>
<Typography.P2
as={motion.p}
initial={{ opacity: 0 }}
animate={{
opacity: isDescriptionVisible ? 1 : 0,
}}
transition={{ delay: isDescriptionVisible ? 0.25 : 0 }}
color="textGrayDark"
nbrOflines={5}
>
<Typography.P2 color="textGrayDark" nbrOflines={5}>
{body || ""}
</Typography.P2>
{description || ""}
</Typography.P2>
</motion.div>
<div css={STYLES_METRICS}>
<div css={[Styles.CONTAINER_CENTERED, STYLES_TEXT_GRAY]}>
<SVG.Box />
<Typography.P3 style={{ marginLeft: 4 }} color="textGray">
{fileCount}
</Typography.P3>
</div>
)} */}
</div>

<div css={STYLES_METRICS}>
<div css={[Styles.CONTAINER_CENTERED, STYLES_TEXT_GRAY]}>
<SVG.Box />
<Typography.P3 style={{ marginLeft: 4 }} color="textGray">
{fileCount}
</Typography.P3>
{owner && (
<div style={{ alignItems: "end" }} css={Styles.CONTAINER_CENTERED}>
<Link
href={`/$/user/${owner.id}`}
onAction={onAction}
aria-label={`Visit ${owner.username}'s profile`}
title={`Visit ${owner.username}'s profile`}
>
<img
css={STYLES_PROFILE_IMAGE}
src={owner?.data?.photo}
alt={`${owner.username} profile`}
onError={(e) => (e.target.src = Constants.profileDefaultPicture)}
/>
</Link>
<Link
href={`/$/user/${owner.id}`}
onAction={onAction}
aria-label={`Visit ${owner.username}'s profile`}
title={`Visit ${owner.username}'s profile`}
>
<Typography.P3 style={{ marginLeft: 8 }} color="textGray">
{owner.username}
</Typography.P3>
</Link>
</div>
)}
</div>
{owner && (
<div style={{ alignItems: "end" }} css={Styles.CONTAINER_CENTERED}>
<Link
href={`/$/user/${owner.id}`}
onAction={onAction}
aria-label={`Visit ${owner.username}'s profile`}
title={`Visit ${owner.username}'s profile`}
>
<img
css={STYLES_PROFILE_IMAGE}
src={owner?.data?.photo}
alt={`${owner.username} profile`}
onError={(e) => (e.target.src = Constants.profileDefaultPicture)}
/>
</Link>
<Link
href={`/$/user/${owner.id}`}
onAction={onAction}
aria-label={`Visit ${owner.username}'s profile`}
title={`Visit ${owner.username}'s profile`}
>
<Typography.P3 style={{ marginLeft: 8 }} color="textGray">
{owner.username}
</Typography.P3>
</Link>
</div>
)}
</div>
</motion.div>
</div>
</div>
);
}

const useShowDescription = () => {
const [isDescriptionVisible, setShowDescription] = React.useState(false);
const timeoutId = React.useRef();

const showDescription = () => {
clearTimeout(timeoutId.current);
const id = setTimeout(() => setShowDescription(true), 250);
timeoutId.current = id;
};
const hideDescription = () => {
clearTimeout(timeoutId.current);
setShowDescription(false);
};

return { isDescriptionVisible, showDescription, hideDescription };
};
1 change: 0 additions & 1 deletion components/core/DataView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -753,7 +753,6 @@ export default class DataView extends React.Component {
height: 24,
width: 24,
borderRadius: "8px",
boxShadow: `0 0 0 1px ${Constants.system.white}`,
backgroundColor: this.state.checked[i]
? Constants.system.blue
: "rgba(255, 255, 255, 0.75)",
Expand Down
60 changes: 39 additions & 21 deletions components/core/ObjectPreview/ObjectPreviewPrimitive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,22 @@ const STYLES_WRAPPER = (theme) => css`
`;

const STYLES_DESCRIPTION = (theme) => css`
position: relative;
box-shadow: 0 -0.5px 0.5px ${theme.system.grayLight4};
border-radius: 0px 0px 16px 16px;
box-sizing: border-box;
width: 100%;
max-height: 61px;
background-color: ${theme.semantic.bgLight};
border-radius: 16px;
height: calc(170px + 61px);
padding: 9px 16px 8px;
z-index: 1;
@media (max-width: ${theme.sizes.mobile}px) {
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`
overflow: hidden;
position: relative;
Expand Down Expand Up @@ -73,6 +71,7 @@ export default function ObjectPreviewPrimitive({
isImage,
onAction,
}) {
const { isDescriptionVisible, showDescription, hideDescription } = useShowDescription();
// const { like, isLiked, likeCount } = useLikeHandler({ file, viewer });
// const { save, isSaved, saveCount } = useSaveHandler({ file, viewer });
// const showSaveButton = viewer?.id !== file?.ownerId;
Expand All @@ -81,11 +80,8 @@ export default function ObjectPreviewPrimitive({
// const showControls = () => setShowControls(true);
// const hideControls = () => setShowControls(false);

const [isBodyVisible, setShowBody] = React.useState(false);
const showBody = () => setShowBody(true);
const hideBody = () => setShowBody(false);
const body = file?.data?.body;
const isLink = file.isLink;
const { isLink } = file;

const title = file.data.name || file.filename;

Expand Down Expand Up @@ -126,17 +122,22 @@ export default function ObjectPreviewPrimitive({
<div>{children}</div>
</AspectRatio>
</div>
<article css={STYLES_DESCRIPTION} onMouseEnter={showBody} onMouseLeave={hideBody}>
<motion.div
css={STYLES_DESCRIPTION_INNER}
<div style={{ maxHeight: 61 }}>
<motion.article
css={STYLES_DESCRIPTION}
onMouseMove={showDescription}
onMouseLeave={hideDescription}
initial={{ y: 0 }}
animate={{ y: isBodyVisible ? -170 : 0 }}
animate={{
y: isDescriptionVisible ? -170 : 0,
borderRadius: isDescriptionVisible ? "16px" : "0px",
}}
transition={{ type: "spring", stiffness: 170, damping: 26 }}
>
<H5 as="h2" nbrOflines={1} color="textBlack">
<H5 as="h2" nbrOflines={1} color="textBlack" title={title}>
{title}
</H5>
<div style={{ marginTop: 3 }}>
<div style={{ marginTop: 3, display: "flex" }}>
{typeof tag === "string" ? (
<P3 as="small" css={STYLES_UPPERCASE} color="textGray">
{tag}
Expand All @@ -148,15 +149,32 @@ export default function ObjectPreviewPrimitive({
<H5
as={motion.p}
initial={{ opacity: 0 }}
animate={{ opacity: isBodyVisible ? 1 : 0 }}
animate={{ opacity: isDescriptionVisible ? 1 : 0 }}
style={{ marginTop: 5 }}
nbrOflines={8}
color="textGrayDark"
>
{body || ""}
</H5>
</motion.div>
</article>
</motion.article>
</div>
</div>
);
}

const useShowDescription = () => {
const [isDescriptionVisible, setShowDescription] = React.useState(false);
const timeoutId = React.useRef();

const showDescription = () => {
clearTimeout(timeoutId.current);
const id = setTimeout(() => setShowDescription(true), 250);
timeoutId.current = id;
};
const hideDescription = () => {
clearTimeout(timeoutId.current);
setShowDescription(false);
};

return { isDescriptionVisible, showDescription, hideDescription };
};
2 changes: 1 addition & 1 deletion components/system/components/CheckBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const STYLES_CHECKBOX = css`

const STYLES_CHECKBOX_FIGURE = css`
box-sizing: border-box;
box-shadow: 0 0 0 1px ${Constants.semantic.borderGrayLight};
box-shadow: 0 0 0 1px ${Constants.system.grayLight4};
background-color: ${Constants.system.white};
border-radius: 4px;
display: inline-flex;
Expand Down
Loading

0 comments on commit a0174ad

Please sign in to comment.