rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Preferences view layout on mobile has been updated, and can be dismissed by swiping from the right

Browse Source
This commit is contained in:
Aman Harwara
2023-05-17 19:42:08 +05:30
parent 7b44224314
commit e5c580deab
18 changed files with 114 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/web/src/javascripts/Components/Modal/useModalAnimation.ts
View File

@@ -3,49 +3,86 @@ import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/u
export const IosModalAnimationEasing = 'cubic-bezier(.36,.66,.04,1)'
export const useModalAnimation = (isOpen: boolean) => {
const Animations = {
vertical: {
enter: {
keyframes: [
{
transform: 'translateY(100%)',
},
{
transform: 'translateY(0)',
},
],
transformOrigin: 'bottom',
},
exit: {
keyframes: [
{
transform: 'translateY(0)',
},
{
transform: 'translateY(100%)',
},
],
transformOrigin: 'bottom',
},
},
horizontal: {
enter: {
keyframes: [
{
transform: 'translateX(100%)',
},
{
transform: 'translateX(0)',
},
],
transformOrigin: 'right',
},
exit: {
keyframes: [
{
transform: 'translateX(0)',
},
{
transform: 'translateX(100%)',
},
],
transformOrigin: 'right',
},
},
}
export const useModalAnimation = (isOpen: boolean, variant: 'horizontal' | 'vertical' = 'vertical') => {
const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
return useLifecycleAnimation(
{
open: isOpen,
enter: {
keyframes: [
{
transform: 'translateY(100%)',
},
{
transform: 'translateY(0)',
},
],
keyframes: Animations[variant].enter.keyframes,
options: {
easing: IosModalAnimationEasing,
duration: 250,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'bottom',
transformOrigin: Animations[variant].enter.transformOrigin,
},
},
enterCallback: (element) => {
element.scrollTop = 0
},
exit: {
keyframes: [
{
transform: 'translateY(0)',
},
{
transform: 'translateY(100%)',
},
],
keyframes: Animations[variant].exit.keyframes,
options: {
easing: IosModalAnimationEasing,
duration: 250,
fill: 'forwards',
},
initialStyle: {
transformOrigin: 'bottom',
transformOrigin: Animations[variant].exit.transformOrigin,
},
},
},