filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-11 22:07:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ObjectPreviewPrimitive): replace EditChannels with EditSlates jumper

Browse Source
This commit is contained in:
Aminejv 2022-01-20 16:04:28 +01:00 committed by Martina
parent 8e007d235d
commit 4b67d6caa6
3 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,9 +6,9 @@ import * as SVG from "~/common/svg";
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 { AnimatePresence, motion, useAnimation } from "framer-motion";
import { useMounted, useMediaQuery } from "~/common/hooks";
import { TagsButton } from "~/components/core/ObjectPreview/components";
import { SlatesButton } from "~/components/core/ObjectPreview/components";
import { useTagsOnboardingContext } from "~/components/core/Onboarding/Tags";
import ImageObjectPreview from "~/components/core/ObjectPreview/ImageObjectPreview";
@ -27,22 +27,27 @@ const STYLES_CONTROLS_DESKTOP = css`
function DesktopControls({ file, viewer }) {
const onboardingContext = useTagsOnboardingContext();
const [isTagsJumperVisible, setTagsJumperVisibility] = React.useState(false);
const showTagsJumper = () => setTagsJumperVisibility(true);
const hideTagsJumper = () => setTagsJumperVisibility(false);
const [isSlatesJumperVisible, setSlatesJumperVisibility] = React.useState(false);
const showSlatesJumper = () => setSlatesJumperVisibility(true);
const hideSlatesJumper = () => setSlatesJumperVisibility(false);
return (
<>
{/** NOTE(amine): controls visibility handled by STYLES_WRAPPER*/}
<motion.div id="object_preview_controls" css={STYLES_CONTROLS_DESKTOP}>
<TagsButton onClick={() => (showTagsJumper(), onboardingContext?.goToNextStep?.call())} />
<SlatesButton
onClick={() => (showSlatesJumper(), onboardingContext?.goToNextStep?.call())}
/>
</motion.div>
<ObjectJumpers.EditChannels
file={file}
viewer={viewer}
isOpen={isTagsJumperVisible}
onClose={() => (hideTagsJumper(), onboardingContext?.goToNextStep?.call())}
/>
<AnimatePresence>
{isSlatesJumperVisible ? (
<ObjectJumpers.EditSlates
file={file}
viewer={viewer}
onClose={() => (hideSlatesJumper(), onboardingContext?.goToNextStep?.call())}
/>
) : null}
</AnimatePresence>
</>
);
}
@ -85,9 +90,9 @@ function MobileControls({ file, viewer }) {
const toggleControls = () => setShowControls((prev) => !prev);
const hideControls = () => setShowControls(false);
const [isTagsJumperVisible, setTagsJumperVisibility] = React.useState(false);
const showTagsJumper = () => setTagsJumperVisibility(true);
const hideTagsJumper = () => setTagsJumperVisibility(false);
const [isSlatesJumperVisible, setSlatesJumperVisibility] = React.useState(false);
const showSlatesJumper = () => setSlatesJumperVisibility(true);
const hideSlatesJumper = () => setSlatesJumperVisibility(false);
return (
<>
@ -104,14 +109,21 @@ function MobileControls({ file, viewer }) {
css={STYLES_CONTROLS_MOBILE}
onClick={(e) => (e.stopPropagation(), toggleControls())}
>
<TagsButton onClick={() => (showTagsJumper(), onboardingContext?.goToNextStep?.call())} />
<SlatesButton
onClick={() => (showSlatesJumper(), onboardingContext?.goToNextStep?.call())}
/>
</motion.div>
<ObjectJumpers.EditChannelsMobile
file={file}
viewer={viewer}
isOpen={isTagsJumperVisible}
onClose={() => (hideTagsJumper(), hideControls(), onboardingContext?.goToNextStep?.call())}
/>
<AnimatePresence>
{isSlatesJumperVisible ? (
<ObjectJumpers.EditSlatesMobile
file={file}
viewer={viewer}
onClose={() => (
hideSlatesJumper(), hideControls(), onboardingContext?.goToNextStep?.call()
)}
/>
) : null}
</AnimatePresence>
</>
);
}

2
components/core/ObjectPreview/components/TagsButton.jsx → components/core/ObjectPreview/components/SlatesButton.jsx
View File

@ -30,7 +30,7 @@ const STYLES_BUTTON = (theme) => css`
}
`;
export default function TagsButton({ onClick, ...props }) {
export default function SlatesButton({ onClick, ...props }) {
const handleClick = (e) => {
e.preventDefault();
e.stopPropagation();

2
components/core/ObjectPreview/components/index.js
View File

@ -1,3 +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";
export { default as SlatesButton } from "~/components/core/ObjectPreview/components/SlatesButton";