feat(ObjectPreviewPrimitive): add tags button

components/core/DataView.js

@@ -856,6 +856,7 @@ export default class DataView extends React.Component {
                           viewer={this.props.viewer}
                           file={each}
                           onAction={this.props.onAction}
+                          isOwner={this.props.isOwner}
                           isSelected={i in this.state.checked}
                         />
                         <span css={STYLES_MOBILE_HIDDEN} style={{ pointerEvents: "auto" }}>

components/core/ObjectPreview/ObjectPreviewPrimitive.js

@@ -1,14 +1,16 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
+import * as ObjectJumpers from "~/components/system/components/GlobalCarousel/jumpers";
 
 import { css } from "@emotion/react";
 import { H5, P2, P3 } from "~/components/system/components/Typography";
 import { AspectRatio } from "~/components/system";
-
 import { motion, useAnimation } from "framer-motion";
 import { useMounted, useMediaQuery } from "~/common/hooks";
+import { TagsButton } from "~/components/core/ObjectPreview/components";
 
 import ImageObjectPreview from "~/components/core/ObjectPreview/ImageObjectPreview";
+import { useTagsOnboardingContext } from "~/components/core/Onboarding/Tags";
 
 const STYLES_WRAPPER = (theme) => css`
   position: relative;
@@ -56,15 +58,15 @@ const STYLES_SELECTED_RING = (theme) => css`
   box-shadow: 0 0 0 2px ${theme.system.blue};
 `;
 
-// const STYLES_CONTROLS = css`
-//   position: absolute;
-//   z-index: 1;
-//   right: 16px;
-//   top: 16px;
-//   & > * + * {
-//     margin-top: 8px !important;
-//   }
-// `;
+const STYLES_CONTROLS = css`
+  position: absolute;
+  z-index: 1;
+  right: 16px;
+  top: 16px;
+  & > * + * {
+    margin-top: 8px !important;
+  }
+`;
 
 const STYLES_UPPERCASE = css`
   text-transform: uppercase;
@@ -75,15 +77,22 @@ export default function ObjectPreviewPrimitive({
   tag = "FILE",
   file,
   isSelected,
-  // viewer,
+  viewer,
   owner,
+  isOwner,
   // NOTE(amine): internal prop used to display
   isImage,
   onAction,
 }) {
-  // const [areControlsVisible, setShowControls] = React.useState(false);
-  // const showControls = () => setShowControls(true);
-  // const hideControls = () => setShowControls(false);
+  const [isTagsJumperVisible, setTagsJumperVisibility] = React.useState(false);
+  const showTagsJumper = () => setTagsJumperVisibility(true);
+  const hideTagsJumper = () => setTagsJumperVisibility(false);
+  // const { save, isSaved, saveCount } = useSaveHandler({ file, viewer });
+  // const showSaveButton = viewer?.id !== file?.ownerId;
+
+  const [areControlsVisible, setShowControls] = React.useState(false);
+  const showControls = () => setShowControls(true);
+  const hideControls = () => setShowControls(false);
 
   const description = file?.body;
   const media = useMediaQuery();
@@ -104,6 +113,8 @@ export default function ObjectPreviewPrimitive({
 
   const title = file.name || file.filename;
 
+  const onboardingContext = useTagsOnboardingContext();
+
   if (file?.coverImage && !isImage && !isLink) {
     return (
       <ImageObjectPreview
@@ -120,22 +131,29 @@ export default function ObjectPreviewPrimitive({
     <div css={[STYLES_WRAPPER, isSelected && STYLES_SELECTED_RING]}>
       <AspectRatio ratio={248 / 248}>
         <div css={Styles.VERTICAL_CONTAINER}>
-          <div
-            css={STYLES_PREVIEW}
-            //  onMouseEnter={showControls} onMouseLeave={hideControls}
-          >
-            {/* <AnimatePresence>
-          {areControlsVisible && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              css={STYLES_CONTROLS}
-            >
-              <LikeButton onClick={like} isLiked={isLiked} likeCount={likeCount} />
-            </motion.div>
-          )}
-        </AnimatePresence> */}
+          <div css={STYLES_PREVIEW} onMouseEnter={showControls} onMouseLeave={hideControls}>
+            {isOwner && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: areControlsVisible ? 1 : 0 }}
+                css={STYLES_CONTROLS}
+              >
+                <>
+                  <TagsButton
+                    onClick={() => (showTagsJumper(), onboardingContext?.goToNextStep?.call())}
+                  />
+                  <ObjectJumpers.EditChannels
+                    file={file}
+                    viewer={viewer}
+                    isOpen={isTagsJumperVisible}
+                    onClose={() => (
+                      hideTagsJumper(), hideControls(), onboardingContext?.goToNextStep?.call()
+                    )}
+                  />
+                </>
+              </motion.div>
+            )}
+
             {children}
           </div>
 

components/core/ObjectPreview/components/TagsButton.jsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as Styles from "~/common/styles";
+import * as SVG from "~/common/svg";
+
+import { css } from "@emotion/react";
+
+const STYLES_BUTTON = (theme) => css`
+  display: flex;
+  background-color: ${theme.semantic.bgBlurWhite};
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px ${theme.system.grayLight5}, ${theme.shadow.lightLarge};
+  transition: box-shadow 0.3s;
+  :hover {
+    box-shadow: 0 0 0 1px ${theme.system.blue}, ${theme.shadow.lightLarge};
+  }
+
+  svg {
+    transition: fill 0.1s;
+  }
+  :hover svg {
+    fill: ${theme.system.pink};
+  }
+
+  path {
+    transition: stroke 0.3s;
+  }
+  :hover path {
+    stroke: ${theme.system.blue};
+  }
+`;
+
+export default function TagsButton({ onClick, ...props }) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onClick) onClick();
+  };
+
+  return (
+    <button css={[Styles.BUTTON_RESET, STYLES_BUTTON]} onClick={handleClick} {...props}>
+      <SVG.Hash width={16} />
+    </button>
+  );
+}

components/core/ObjectPreview/components/index.js

@@ -1,2 +1,3 @@
 export { default as LikeButton } from "~/components/core/ObjectPreview/components/LikeButton";
 export { default as SaveButton } from "~/components/core/ObjectPreview/components/SaveButton";
+export { default as TagsButton } from "~/components/core/ObjectPreview/components/TagsButton";