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

fix(Jumper): add minHeight and overflow

Browse Source
This commit is contained in:
Aminejv 2021-10-27 09:46:50 +01:00
parent b176a5a797
commit abcc7375c9
1 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/core/Jumper/index.js
View File

@ -6,7 +6,7 @@ import * as Constants from "~/common/constants";
import { ModalPortal } from "~/components/core/ModalPortal"; import { ModalPortal } from "~/components/core/ModalPortal";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { motion } from "framer-motion"; import { AnimateSharedLayout, motion } from "framer-motion";
import { useEscapeKey } from "~/common/hooks"; import { useEscapeKey } from "~/common/hooks";
import { Show } from "~/components/utility/Show"; import { Show } from "~/components/utility/Show";
@ -20,14 +20,16 @@ const JUMPER_WIDTH = 640;
const JUMPER_HEIGHT = 400; const JUMPER_HEIGHT = 400;
const STYLES_JUMPER_ROOT = (theme) => css` const STYLES_JUMPER_ROOT = (theme) => css`
${Styles.VERTICAL_CONTAINER};
position: fixed; position: fixed;
top: calc(50% - ${JUMPER_HEIGHT / 2}px); top: calc(50% - ${JUMPER_HEIGHT / 2}px);
left: calc(50% - ${JUMPER_WIDTH / 2}px); left: calc(50% - ${JUMPER_WIDTH / 2}px);
width: ${JUMPER_WIDTH}px; width: ${JUMPER_WIDTH}px;
height: ${JUMPER_HEIGHT}px; min-height: ${JUMPER_HEIGHT}px;
z-index: ${theme.zindex.jumper}; z-index: ${theme.zindex.jumper};
border-radius: 16px; border-radius: 16px;
border: 1px solid ${theme.semantic.borderGrayLight}; border: 1px solid ${theme.semantic.borderGrayLight};
overflow: hidden;
background-color: ${theme.semantic.bgWhite}; background-color: ${theme.semantic.bgWhite};
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) { @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
-webkit-backdrop-filter: blur(75px); -webkit-backdrop-filter: blur(75px);
@ -105,36 +107,29 @@ function Divider({ children, ...props }) {
function ObjectPreview({ file }) { function ObjectPreview({ file }) {
return ( return (
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}> <div
<div css={Styles.HORIZONTAL_CONTAINER_CENTERED}
css={Styles.HORIZONTAL_CONTAINER_CENTERED} style={{ color: Constants.system.green, width: "100%" }}
style={{ color: Constants.system.green, width: "100%" }} >
> <div>
<SVG.CheckCircle /> <SVG.CheckCircle />
<div style={{ marginLeft: 12, marginRight: 12 }}> </div>
<AnimateSharedLayout> <div style={{ marginLeft: 12, marginRight: 12 }}>
<motion.div layoutId={`${file.id}-title`} key={`${file.id}-title`}> <AnimateSharedLayout>
<System.H5 <motion.div layoutId={`${file.id}-title`} key={`${file.id}-title`}>
nbrOflines={1} <System.H5 nbrOflines={1} as="h1" style={{ wordBreak: "break-all" }} color="textBlack">
as="h1" {file?.name || file?.filename}
style={{ wordBreak: "break-all" }} </System.H5>
color="textBlack" </motion.div>
> </AnimateSharedLayout>
{file?.name || file?.filename} <Show when={file?.source}>
</System.H5> <System.P3 nbrOflines={1} color="textBlack" style={{ marginTop: 3 }}>
</motion.div> {file?.source}
</AnimateSharedLayout> </System.P3>
<Show when={file?.source}> </Show>
<System.P3 nbrOflines={1} color="textBlack" style={{ marginTop: 3 }}> </div>
{file?.source} <div style={{ marginLeft: "auto" }}>
</System.P3> <ObjectBoxPreview file={file} placeholderRatio={2} style={{ width: 28, height: 39 }} />
</Show>
</div>
<ObjectBoxPreview
file={file}
placeholderRatio={2}
style={{ width: 28, height: 39, marginLeft: "auto" }}
/>
</div> </div>
</div> </div>
); );