From 0f641e05ad58c22f9979dd7b1cdf299e8a7c6985 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Tue, 16 May 2023 15:07:20 +0530 Subject: [PATCH] chore: preferences view swipe gesture --- .../javascripts/Components/Modal/Modal.tsx | 2 +- .../Components/Modal/useModalAnimation.ts | 6 ++-- .../Components/Panes/PaneAnimator.tsx | 2 +- .../Preferences/PreferencesView.tsx | 27 ++++++++++++++-- .../Preferences/PreferencesViewWrapper.tsx | 31 +++++++++++++++++-- 5 files changed, 59 insertions(+), 9 deletions(-) diff --git a/packages/web/src/javascripts/Components/Modal/Modal.tsx b/packages/web/src/javascripts/Components/Modal/Modal.tsx index 6f7a9f201..c7796c521 100644 --- a/packages/web/src/javascripts/Components/Modal/Modal.tsx +++ b/packages/web/src/javascripts/Components/Modal/Modal.tsx @@ -114,7 +114,7 @@ const Modal = ({ ) : (
diff --git a/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts b/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts index a101485b1..557110f1f 100644 --- a/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts +++ b/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts @@ -1,6 +1,8 @@ import { useLifecycleAnimation } from '@/Hooks/useLifecycleAnimation' import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery' +export const IosModalAnimationEasing = 'cubic-bezier(.36,.66,.04,1)' + export const useModalAnimation = (isOpen: boolean) => { const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) @@ -17,7 +19,7 @@ export const useModalAnimation = (isOpen: boolean) => { }, ], options: { - easing: 'cubic-bezier(.36,.66,.04,1)', + easing: IosModalAnimationEasing, duration: 250, fill: 'forwards', }, @@ -38,7 +40,7 @@ export const useModalAnimation = (isOpen: boolean) => { }, ], options: { - easing: 'cubic-bezier(.36,.66,.04,1)', + easing: IosModalAnimationEasing, duration: 250, fill: 'forwards', }, diff --git a/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx b/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx index ee807a171..d4a09e64e 100644 --- a/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx +++ b/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx @@ -64,7 +64,7 @@ export async function animatePaneExitTransitionOffscreenToTheRight(elementId: st * a Daily Notebook tag from navigation whereby two pane animations are simulatensouly triggered (the items panel, then * the editor panel), causing Safari to get tripped up. */ -function performSafariAnimationFix(element: HTMLElement): void { +export function performSafariAnimationFix(element: HTMLElement): void { const isSafari = /Safari/.test(navigator.userAgent) || /AppleWebKit/.test(navigator.userAgent) if (!isSafari) { return diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx index b41099558..0d625b6c8 100644 --- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx +++ b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx @@ -4,13 +4,14 @@ import { observer } from 'mobx-react-lite' import { PreferencesMenu } from './PreferencesMenu' import PreferencesCanvas from './PreferencesCanvas' import { PreferencesProps } from './PreferencesProps' -import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile' import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler' -import Modal from '../Modal/Modal' +import Modal, { ModalAction } from '../Modal/Modal' import { classNames } from '@standardnotes/snjs' import { useCommandService } from '../CommandProvider' import { ESCAPE_COMMAND } from '@standardnotes/ui-services' import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding' +import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' +import Icon from '../Icon/Icon' const PreferencesView: FunctionComponent = ({ application, @@ -30,7 +31,7 @@ const PreferencesView: FunctionComponent = ({ menu.selectPane(viewControllerManager.preferencesController.currentPane) }, [menu, viewControllerManager.preferencesController.currentPane]) - useDisableBodyScrollOnMobile() + const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) const addAndroidBackHandler = useAndroidBackHandler() @@ -58,6 +59,23 @@ const PreferencesView: FunctionComponent = ({ const { hasTopInset } = useAvailableSafeAreaPadding() + const modalActions = useMemo( + (): ModalAction[] => [ + { + label: ( + + + Back + + ), + type: 'primary', + mobileSlot: 'left', + onClick: closePreferences, + }, + ], + [closePreferences], + ) + return ( = ({ />
} + disableCustomHeader={isMobileScreen} + actions={modalActions} + customFooter={<>} > = ({ viewControllerManager, @@ -19,10 +22,34 @@ const PreferencesViewWrapper: FunctionComponent = ( }) }, [commandService, viewControllerManager]) + const [setElement] = usePaneSwipeGesture('right', async (element) => { + const animation = element.animate( + [ + { + transform: 'translateX(100%)', + opacity: 0, + }, + ], + { + easing: IosModalAnimationEasing, + duration: 250, + fill: 'both', + }, + ) + + await animation.finished + + performSafariAnimationFix(element) + + animation.finish() + + viewControllerManager.preferencesController.closePreferences() + }) + return ( - + viewControllerManager.preferencesController.closePreferences()} + closePreferences={viewControllerManager.preferencesController.closePreferences} application={application} viewControllerManager={viewControllerManager} mfaProvider={application}