diff --git a/components/core/DataView.js b/components/core/DataView.js index a5af3ca2..ccfc526a 100644 --- a/components/core/DataView.js +++ b/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} /> diff --git a/components/core/ObjectPreview/ObjectPreviewPrimitive.js b/components/core/ObjectPreview/ObjectPreviewPrimitive.js index 1e3295d7..0de2344a 100644 --- a/components/core/ObjectPreview/ObjectPreviewPrimitive.js +++ b/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 (
-
- {/* - {areControlsVisible && ( - - - - )} - */} +
+ {isOwner && ( + + <> + (showTagsJumper(), onboardingContext?.goToNextStep?.call())} + /> + ( + hideTagsJumper(), hideControls(), onboardingContext?.goToNextStep?.call() + )} + /> + + + )} + {children}
diff --git a/components/core/ObjectPreview/components/TagsButton.jsx b/components/core/ObjectPreview/components/TagsButton.jsx new file mode 100644 index 00000000..6b73401c --- /dev/null +++ b/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 ( + + ); +} diff --git a/components/core/ObjectPreview/components/index.js b/components/core/ObjectPreview/components/index.js index 97045fb5..75dcb52f 100644 --- a/components/core/ObjectPreview/components/index.js +++ b/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";