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

feat(GlobalCarousel): show the file sharing jumper only when the file is public

Browse Source
This commit is contained in:
Aminejv 2021-10-27 16:40:32 +01:00
parent b920a05ec6
commit 108d2293a5
1 changed files with 86 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
components/system/components/GlobalCarousel/index.js
View File

@ -7,7 +7,7 @@ import * as Jumpers from "~/components/system/components/GlobalCarousel/jumpers"
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { Alert } from "~/components/core/Alert"; import { Alert } from "~/components/core/Alert";
import { motion } from "framer-motion"; import { motion, AnimateSharedLayout } from "framer-motion";
import { import {
useDetectTextOverflow, useDetectTextOverflow,
useEscapeKey, useEscapeKey,
@ -215,29 +215,52 @@ function CarouselHeader({
</div> </div>
</div> </div>
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ marginLeft: "auto" }}> <div css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ marginLeft: "auto" }}>
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}> <AnimateSharedLayout>
<Show when={isOwner}> <div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
<button onClick={showEditInfo} css={STYLES_ACTION_BUTTON}> <Show when={isOwner}>
<SVG.Edit style={{ pointerEvents: "none" }} /> <motion.button
</button> layoutId="jumper-desktop-edit"
</Show> onClick={showEditInfo}
<Show when={isOwner}> css={STYLES_ACTION_BUTTON}
<button >
onClick={showEditChannels} <SVG.Edit style={{ pointerEvents: "none" }} />
</motion.button>
</Show>
<Show when={isOwner}>
<motion.button
layoutId="jumper-desktop-channels"
onClick={showEditChannels}
style={{ marginLeft: 4 }}
css={STYLES_ACTION_BUTTON}
>
<SVG.Hash style={{ pointerEvents: "none" }} />
</motion.button>
</Show>
<Show when={file.isPublic}>
<motion.button
layoutId="jumper-desktop-share"
onClick={showShareFile}
style={{ marginLeft: 4 }}
css={STYLES_ACTION_BUTTON}
>
<SVG.Share style={{ pointerEvents: "none" }} />
</motion.button>
</Show>
<motion.button
layoutId="jumper-desktop-info"
onClick={showMoreInfo}
style={{ marginLeft: 4 }} style={{ marginLeft: 4 }}
css={STYLES_ACTION_BUTTON} css={STYLES_ACTION_BUTTON}
> >
<SVG.Hash style={{ pointerEvents: "none" }} /> <SVG.InfoCircle style={{ pointerEvents: "none" }} />
</button> </motion.button>
</Show>
<button onClick={showShareFile} style={{ marginLeft: 4 }} css={STYLES_ACTION_BUTTON}> {file.isLink ? <VisitLinkButton file={file} /> : null}
<SVG.Share style={{ pointerEvents: "none" }} /> </div>
</button> </AnimateSharedLayout>
<button onClick={showMoreInfo} style={{ marginLeft: 4 }} css={STYLES_ACTION_BUTTON}>
<SVG.InfoCircle style={{ pointerEvents: "none" }} />
</button>
{file.isLink ? <VisitLinkButton file={file} /> : null}
</div>
<div style={{ marginLeft: 80 }}> <div style={{ marginLeft: 80 }}>
<button onClick={onClose} css={STYLES_ACTION_BUTTON}> <button onClick={onClose} css={STYLES_ACTION_BUTTON}>
<SVG.Dismiss /> <SVG.Dismiss />
@ -355,25 +378,48 @@ function CarouselFooterMobile({ file, onAction, external, isOwner, data, viewer
onClose={hideMoreInfo} onClose={hideMoreInfo}
/> />
</ModalPortal> </ModalPortal>
<nav css={STYLES_CAROUSEL_MOBILE_FOOTER}> <AnimateSharedLayout>
<Show when={isOwner}> <nav css={STYLES_CAROUSEL_MOBILE_FOOTER}>
<button css={STYLES_ACTION_BUTTON} onClick={showEditInfo}> <Show when={isOwner}>
<SVG.Edit /> <motion.button
</button> layoutId="jumper-mobile-edit"
</Show> css={STYLES_ACTION_BUTTON}
<Show when={isOwner}> onClick={showEditInfo}
<button style={{ marginLeft: 4 }} css={STYLES_ACTION_BUTTON} onClick={showEditChannels}> >
<SVG.Hash /> <SVG.Edit />
</button> </motion.button>
</Show> </Show>
<button style={{ marginLeft: 4 }} css={STYLES_ACTION_BUTTON} onClick={showShareFile}> <Show when={isOwner}>
<SVG.Share /> <motion.button
</button> layoutId="jumper-mobile-channels"
<button style={{ marginLeft: 4 }} css={STYLES_ACTION_BUTTON} onClick={showMoreInfo}> style={{ marginLeft: 4 }}
<SVG.InfoCircle /> css={STYLES_ACTION_BUTTON}
</button> onClick={showEditChannels}
{file.isLink ? <VisitLinkButton file={file} /> : null} >
</nav> <SVG.Hash />
</motion.button>
</Show>
<Show when={file.isPublic}>
<motion.button
layoutId="jumper-mobile-share"
style={{ marginLeft: 4 }}
css={STYLES_ACTION_BUTTON}
onClick={showShareFile}
>
<SVG.Share />
</motion.button>
</Show>
<motion.button
layoutId="jumper-mobile-info"
style={{ marginLeft: 4 }}
css={STYLES_ACTION_BUTTON}
onClick={showMoreInfo}
>
<SVG.InfoCircle />
</motion.button>
{file.isLink ? <VisitLinkButton file={file} /> : null}
</nav>
</AnimateSharedLayout>
</> </>
); );
} }