feat(ObjectPreview): update hover animations to use transforms

filecoin-project · Aug 5, 2021 · ec7341b · ec7341b
1 parent 227d337
commit ec7341b
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 41 deletions.
diff --git a/components/core/ObjectPreview/ObjectPreviewPrimitive.js b/components/core/ObjectPreview/ObjectPreviewPrimitive.js
@@ -21,21 +21,30 @@ 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%;
   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_INNER_DESCRIPTION = (theme) => css`
+  background-color: ${theme.semantic.bgLight};
+  padding: 9px 16px 0px;
+  box-shadow: 0 -0.5px 0.5px ${theme.system.grayLight4};
+`;
+
+const STYLES_TAG = css`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  padding: 4px 16px 8px;
+`;
+
 const STYLES_PREVIEW = css`
   overflow: hidden;
   position: relative;
@@ -71,7 +80,6 @@ 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;
@@ -80,7 +88,20 @@ export default function ObjectPreviewPrimitive({
   // const showControls = () => setShowControls(true);
   // const hideControls = () => setShowControls(false);
 
-  const body = file?.data?.body;
+  const description = file?.data?.body;
+  const { isDescriptionVisible, showDescription, hideDescription } = useShowDescription({
+    disabled: !description,
+  });
+
+  const descriptionRef = React.useRef();
+  const descriptionHeight = React.useRef();
+  React.useEffect(() => {
+    const element = descriptionRef.current;
+    if (element) {
+      descriptionHeight.current = element.offsetHeight;
+    }
+  }, []);
+
   const { isLink } = file;
 
   const title = file.data.name || file.filename;
@@ -122,56 +143,82 @@ export default function ObjectPreviewPrimitive({
           <div>{children}</div>
         </AspectRatio>
       </div>
-      <div style={{ maxHeight: 61 }}>
-        <motion.article
-          css={STYLES_DESCRIPTION}
-          onMouseMove={showDescription}
-          onMouseLeave={hideDescription}
-          initial={{ y: 0 }}
-          animate={{
-            y: isDescriptionVisible ? -170 : 0,
-            borderRadius: isDescriptionVisible ? "16px" : "0px",
-          }}
-          transition={{ type: "spring", stiffness: 170, damping: 26 }}
-        >
-          <H5 as="h2" nbrOflines={1} color="textBlack" title={title}>
+
+      <motion.article
+        css={STYLES_DESCRIPTION}
+        onMouseMove={showDescription}
+        onMouseLeave={hideDescription}
+      >
+        <div style={{ position: "relative", paddingTop: 9 }}>
+          <H5 as="h2" nbrOflines={1} style={{ visibility: "hidden" }}>
             {title}
           </H5>
-          <div style={{ marginTop: 3, display: "flex" }}>
-            {typeof tag === "string" ? (
-              <P3 as="small" css={STYLES_UPPERCASE} color="textGray">
-                {tag}
-              </P3>
-            ) : (
-              tag
-            )}
-          </div>
-          <H5
-            as={motion.p}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: isDescriptionVisible ? 1 : 0 }}
-            style={{ marginTop: 5 }}
-            nbrOflines={8}
-            color="textGrayDark"
+
+          <motion.div
+            css={STYLES_INNER_DESCRIPTION}
+            style={{ position: "absolute", left: 0, top: 0 }}
+            initial={{ y: 0 }}
+            animate={{ y: isDescriptionVisible ? -descriptionHeight.current : 0 }}
+            transition={{
+              type: "spring",
+              stiffness: 170,
+              damping: 26,
+              delay: isDescriptionVisible ? 0 : 0.2,
+            }}
           >
-            {body || ""}
-          </H5>
-        </motion.article>
-      </div>
+            <H5 as="h2" nbrOflines={1} color="textBlack" title={title}>
+              {title}
+            </H5>
+            {description && (
+              <div ref={descriptionRef}>
+                <P3
+                  as={motion.p}
+                  style={{ paddingTop: 3 }}
+                  nbrOflines={1}
+                  color="textGrayDark"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: isDescriptionVisible ? 1 : 0 }}
+                  transition={{ delay: isDescriptionVisible ? 0.2 : 0 }}
+                >
+                  {description || ""}
+                </P3>
+              </div>
+            )}
+          </motion.div>
+        </div>
+
+        <TagComponent tag={tag} />
+      </motion.article>
     </div>
   );
 }
 
-const useShowDescription = () => {
+const TagComponent = ({ tag }) => (
+  <div css={STYLES_TAG}>
+    {typeof tag === "string" ? (
+      <P3 as="small" css={STYLES_UPPERCASE} color="textGray">
+        {tag}
+      </P3>
+    ) : (
+      tag
+    )}
+  </div>
+);
+
+const useShowDescription = ({ disabled }) => {
   const [isDescriptionVisible, setShowDescription] = React.useState(false);
   const timeoutId = React.useRef();
 
   const showDescription = () => {
+    if (disabled) return;
+
     clearTimeout(timeoutId.current);
     const id = setTimeout(() => setShowDescription(true), 250);
     timeoutId.current = id;
   };
   const hideDescription = () => {
+    if (disabled) return;
+
     clearTimeout(timeoutId.current);
     setShowDescription(false);
   };

diff --git a/components/system/components/Typography.js b/components/system/components/Typography.js
@@ -34,7 +34,6 @@ const truncateElements = (nbrOfLines) =>
   nbrOfLines &&
   css`
     overflow: hidden;
-    line-height: 1.5;
     word-break: break-word;
     text-overflow: ellipsis;
     -webkit-line-clamp: ${nbrOfLines};