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

fix(Upload/Botton): add a bottom offset on mobile when the carousel is open

Browse Source
This commit is contained in:
Aminejv 2022-02-07 11:19:28 +01:00
parent f4caae60ad
commit 3267b42d1c
5 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/constants.js
View File

@ -9,6 +9,7 @@ export const sizes = {
intercomWidget: 60, intercomWidget: 60,
sidebar: 416, sidebar: 416,
filterNavbar: 42, filterNavbar: 42,
carouselMobileFooterHeight: 52,
topOffset: 0, //NOTE(martina): Pushes UI down. 16 when there is a persistent announcement banner, 0 otherwise topOffset: 0, //NOTE(martina): Pushes UI down. 16 when there is a persistent announcement banner, 0 otherwise
mobile: 768, mobile: 768,

2
components/core/ApplicationHeader.js
View File

@ -160,7 +160,7 @@ export default function ApplicationHeader({ viewer, page, data, onAction, isMobi
) : ( ) : (
<UploadOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}> <UploadOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}>
<Upload.Provider page={page} data={data} viewer={viewer}> <Upload.Provider page={page} data={data} viewer={viewer}>
<Upload.Root data={data} isMobile={isMobile}> <Upload.Root page={page} data={data} isMobile={isMobile}>
<div css={STYLES_RIGHT}> <div css={STYLES_RIGHT}>
<UserActions viewer={viewer} /> <UserActions viewer={viewer} />
</div> </div>

11
components/core/Upload/Popup.js
View File

@ -32,6 +32,12 @@ const STYLES_POPUP_WRAPPER = (theme) => css`
box-shadow: ${theme.shadow.lightLarge}; box-shadow: ${theme.shadow.lightLarge};
`; `;
const STYLES_POPUP_CAROUSEL_POSITION = (theme) => css`
@media (max-width: ${theme.sizes.mobile}px) {
bottom: ${Constants.sizes.carouselMobileFooterHeight + 16}px;
}
`;
const STYLES_DISMISS_BUTTON = (theme) => css` const STYLES_DISMISS_BUTTON = (theme) => css`
${Styles.BUTTON_RESET}; ${Styles.BUTTON_RESET};
position: absolute; position: absolute;
@ -161,7 +167,7 @@ const useUploadSummary = ({ fileLoading }) =>
}; };
}, [fileLoading]); }, [fileLoading]);
export function Popup({ isMobile }) { export function Popup({ page, isMobile }) {
const { const {
state: { isFinished, fileLoading }, state: { isFinished, fileLoading },
handlers: { resetUploadState }, handlers: { resetUploadState },
@ -176,11 +182,12 @@ export function Popup({ isMobile }) {
{ hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter }, { hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter },
] = useUploadPopup({ totalFilesSummary }); ] = useUploadPopup({ totalFilesSummary });
const isGlobalCarouselOpen = !!page.params.id;
return ( return (
<AnimatePresence> <AnimatePresence>
{popupState.isVisible ? ( {popupState.isVisible ? (
<motion.div <motion.div
css={STYLES_POPUP_WRAPPER} css={[STYLES_POPUP_WRAPPER, isGlobalCarouselOpen && STYLES_POPUP_CAROUSEL_POSITION]}
initial={{ opacity: 0, y: 0 }} initial={{ opacity: 0, y: 0 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }} exit={{ opacity: 0, y: 10 }}

4
components/core/Upload/index.js
View File

@ -14,13 +14,13 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
/* ------------------------------------------------------------------------------------------------- /* -------------------------------------------------------------------------------------------------
* Root * Root
* -----------------------------------------------------------------------------------------------*/ * -----------------------------------------------------------------------------------------------*/
const Root = ({ children, data, isMobile }) => { const Root = ({ children, page, data, isMobile }) => {
return ( return (
<> <>
{children} {children}
{isMobile ? <MobileUploadJumper data={data} /> : <UploadJumper data={data} />} {isMobile ? <MobileUploadJumper data={data} /> : <UploadJumper data={data} />}
<ModalPortal> <ModalPortal>
<Popup isMobile={isMobile} /> <Popup page={page} isMobile={isMobile} />
<DropIndicator data={data} /> <DropIndicator data={data} />
</ModalPortal> </ModalPortal>
</> </>

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

@ -559,8 +559,6 @@ function CarouselHeaderMobile({
); );
} }
const MOBILE_FOOTER_HEIGHT = 52;
const STYLES_CAROUSEL_MOBILE_FOOTER = (theme) => css` const STYLES_CAROUSEL_MOBILE_FOOTER = (theme) => css`
${Styles.HORIZONTAL_CONTAINER_CENTERED}; ${Styles.HORIZONTAL_CONTAINER_CENTERED};
position: fixed; position: fixed;
@ -571,7 +569,7 @@ const STYLES_CAROUSEL_MOBILE_FOOTER = (theme) => css`
padding: 8px 16px; padding: 8px 16px;
border-top: 1px solid ${theme.semantic.borderGrayLight}; border-top: 1px solid ${theme.semantic.borderGrayLight};
color: ${theme.semantic.textGrayDark}; color: ${theme.semantic.textGrayDark};
height: ${MOBILE_FOOTER_HEIGHT}px; height: ${Constants.sizes.carouselMobileFooterHeight}px;
background-color: ${theme.semantic.bgWhite}; background-color: ${theme.semantic.bgWhite};
@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) { @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
@ -623,7 +621,7 @@ function CarouselFooterMobile({ file, onAction, external, isOwner, data, viewer
<AnimatePresence> <AnimatePresence>
{isEditInfoVisible && ( {isEditInfoVisible && (
<Jumpers.EditInfoMobile <Jumpers.EditInfoMobile
footerStyle={{ bottom: MOBILE_FOOTER_HEIGHT }} footerStyle={{ bottom: Constants.sizes.carouselMobileFooterHeight }}
file={file} file={file}
onClose={hideEditInfo} onClose={hideEditInfo}
/> />