mirror of
https://github.com/standardnotes/web.git
synced 2024-10-27 16:31:40 +03:00
feat: Preferences view layout on mobile has been updated, and can be dismissed by swiping from the right
This commit is contained in:
parent
7b44224314
commit
e5c580deab
@ -1,3 +1,5 @@
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.4167 6.90759L10.2417 10.7326L14.0667 6.90759L15.2417 8.09093L10.2417 13.0909L5.2417 8.09093L6.4167 6.90759Z" fill="#181818"/>
|
||||
</svg>
|
||||
<path
|
||||
d="M6.4167 6.90759L10.2417 10.7326L14.0667 6.90759L15.2417 8.09093L10.2417 13.0909L5.2417 8.09093L6.4167 6.90759Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
Before Width: | Height: | Size: 222 B After Width: | Height: | Size: 243 B |
@ -6,29 +6,32 @@ import { useModalAnimation } from '../Modal/useModalAnimation'
|
||||
type Props = {
|
||||
isOpen: boolean
|
||||
children: ReactNode
|
||||
animationVariant?: 'horizontal' | 'vertical'
|
||||
}
|
||||
|
||||
const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
|
||||
const [isMounted, setElement] = useModalAnimation(isOpen)
|
||||
const dialog = useDialogStore({
|
||||
open: isMounted,
|
||||
})
|
||||
const ModalOverlay = forwardRef(
|
||||
({ isOpen, children, animationVariant, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
|
||||
const [isMounted, setElement] = useModalAnimation(isOpen, animationVariant)
|
||||
const dialog = useDialogStore({
|
||||
open: isMounted,
|
||||
})
|
||||
|
||||
if (!isMounted) {
|
||||
return null
|
||||
}
|
||||
if (!isMounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
tabIndex={0}
|
||||
className="fixed top-0 left-0 z-modal h-full w-full"
|
||||
ref={mergeRefs([setElement, ref])}
|
||||
store={dialog}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<Dialog
|
||||
tabIndex={0}
|
||||
className="fixed top-0 left-0 z-modal h-full w-full"
|
||||
ref={mergeRefs([setElement, ref])}
|
||||
store={dialog}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
export default ModalOverlay
|
||||
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -110,7 +110,7 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
<PreferencesSegment>
|
||||
<Title>Email</Title>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Mute sign-in notification emails</Subtitle>
|
||||
{isMuteSignInEmailsFeatureAvailable ? (
|
||||
@ -132,7 +132,7 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
)}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<Spinner className="ml-2 flex-shrink-0" />
|
||||
<Spinner className="h-5 w-5 flex-shrink-0" />
|
||||
) : (
|
||||
isMuteSignInEmailsFeatureAvailable && (
|
||||
<Switch
|
||||
@ -143,13 +143,13 @@ const Email: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
)}
|
||||
</div>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Mute marketing notification emails</Subtitle>
|
||||
<Text>Disables email notifications with special deals and promotions.</Text>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<Spinner className="ml-2 flex-shrink-0" />
|
||||
<Spinner className="h-5 w-5 flex-shrink-0" />
|
||||
) : (
|
||||
<Switch
|
||||
onChange={toggleMuteMarketingEmails}
|
||||
|
@ -116,7 +116,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
|
||||
<PreferencesSegment>
|
||||
<Title>Themes</Title>
|
||||
<div className="mt-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Use system color scheme</Subtitle>
|
||||
<Text>Automatically change active theme based on your system settings.</Text>
|
||||
|
@ -80,7 +80,7 @@ const EditorDefaults = ({ application }: Props) => {
|
||||
<PreferencesSegment>
|
||||
<Title>Editor appearance</Title>
|
||||
<div className="mt-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Monospace Font</Subtitle>
|
||||
<Text>Toggles the font style in plaintext and Super notes</Text>
|
||||
|
@ -122,7 +122,7 @@ const EmailBackups = ({ application }: Props) => {
|
||||
<Text>How often to receive backups.</Text>
|
||||
<div className="mt-2">
|
||||
{isLoading ? (
|
||||
<Spinner className="h-4 w-4" />
|
||||
<Spinner className="h-5 w-5 flex-shrink-0" />
|
||||
) : (
|
||||
<Dropdown
|
||||
label="Select email frequency"
|
||||
@ -134,12 +134,12 @@ const EmailBackups = ({ application }: Props) => {
|
||||
</div>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<Subtitle>Email preferences</Subtitle>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Text>Receive a notification email if an email backup fails.</Text>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<Spinner className="h-4 w-4" />
|
||||
<Spinner className="h-5 w-5 flex-shrink-0" />
|
||||
) : (
|
||||
<Switch onChange={toggleMuteFailedBackupEmails} checked={!isFailedBackupEmailMuted} />
|
||||
)}
|
||||
|
@ -44,7 +44,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
|
||||
<Title>Defaults</Title>
|
||||
{application.platform === Platform.Android && (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Always ask before closing app (Android)</Subtitle>
|
||||
<Text>Whether a confirmation dialog should be shown before closing the app.</Text>
|
||||
@ -54,7 +54,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
</>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Spellcheck</Subtitle>
|
||||
<Text>
|
||||
@ -65,7 +65,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {
|
||||
<Switch onChange={toggleSpellcheck} checked={spellcheck} />
|
||||
</div>
|
||||
<HorizontalSeparator classes="my-4" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
|
||||
<Text>When enabled, adding a nested tag to a note will automatically add all associated parent tags.</Text>
|
||||
|
@ -62,13 +62,14 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
|
||||
const premiumModal = usePremiumModal()
|
||||
|
||||
const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
|
||||
const canShowPaneGesturesOption = isMobileScreen && typeof isPaneGesturesEnabled === 'boolean'
|
||||
|
||||
return (
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<Title>Labs</Title>
|
||||
<div>
|
||||
{isMobileScreen && (
|
||||
{canShowPaneGesturesOption && (
|
||||
<LabsFeature
|
||||
name="Pane switch gestures"
|
||||
description="Allows using gestures to navigate"
|
||||
@ -103,7 +104,7 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
{(experimentalFeatures.length === 0 || typeof isPaneGesturesEnabled === 'boolean') && (
|
||||
{experimentalFeatures.length === 0 && !canShowPaneGesturesOption && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<Text>No experimental features available.</Text>
|
||||
|
@ -10,7 +10,7 @@ type Props = {
|
||||
|
||||
const LabsFeature = ({ name, description, toggleFeature, isEnabled }: Props) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>{name}</Subtitle>
|
||||
<Text>{description}</Text>
|
||||
|
@ -27,7 +27,7 @@ const Tools: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
<PreferencesSegment>
|
||||
<Title>Tools</Title>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Show note saving status while editing</Subtitle>
|
||||
<Text>
|
||||
|
@ -77,7 +77,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
<PreferencesSegment>
|
||||
<Title>Privacy</Title>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex justify-between gap-2 md:items-center">
|
||||
<div className="flex flex-col">
|
||||
<Subtitle>Session user agent logging</Subtitle>
|
||||
<Text>
|
||||
@ -87,7 +87,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
|
||||
</Text>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<Spinner className="ml-2 flex-shrink-0" />
|
||||
<Spinner className="h-5 w-5 flex-shrink-0" />
|
||||
) : (
|
||||
<Switch
|
||||
onChange={toggleSessionLogging}
|
||||
|
@ -91,14 +91,12 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth, application }) => {
|
||||
<>
|
||||
<PreferencesGroup>
|
||||
<PreferencesSegment>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="flex flex-row gap-2 md:items-center">
|
||||
<div className="flex flex-grow flex-col">
|
||||
<TwoFactorTitle auth={auth} />
|
||||
<TwoFactorDescription auth={auth} />
|
||||
</div>
|
||||
<div className="flex min-w-15 flex-col items-center justify-center">
|
||||
<TwoFactorSwitch auth={auth} />
|
||||
</div>
|
||||
<TwoFactorSwitch auth={auth} />
|
||||
</div>
|
||||
</PreferencesSegment>
|
||||
|
||||
|
@ -6,7 +6,7 @@ import PaneSelector from './PaneSelector'
|
||||
import { PreferencesProps } from './PreferencesProps'
|
||||
|
||||
const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = (props) => (
|
||||
<div className="flex min-h-0 flex-grow flex-col-reverse md:flex-row md:justify-between">
|
||||
<div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
|
||||
<PreferencesMenuView menu={props.menu} />
|
||||
<div className="min-h-0 flex-grow overflow-auto bg-contrast">
|
||||
<PaneSelector {...props} />
|
||||
|
@ -30,7 +30,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0',
|
||||
'border-b border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0',
|
||||
hasBottomInset ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
|
||||
)}
|
||||
>
|
||||
@ -60,7 +60,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
|
||||
wrapper: 'relative',
|
||||
button: 'focus:outline-none focus:shadow-none focus:ring-none',
|
||||
}}
|
||||
popoverPlacement="top"
|
||||
popoverPlacement="bottom"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -47,7 +47,11 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
|
||||
})
|
||||
|
||||
return (
|
||||
<ModalOverlay isOpen={viewControllerManager.preferencesController.isOpen} ref={setElement}>
|
||||
<ModalOverlay
|
||||
isOpen={viewControllerManager.preferencesController.isOpen}
|
||||
ref={setElement}
|
||||
animationVariant="horizontal"
|
||||
>
|
||||
<PreferencesView
|
||||
closePreferences={viewControllerManager.preferencesController.closePreferences}
|
||||
application={application}
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { FunctionComponent, ReactNode, useRef, useState } from 'react'
|
||||
import { ArrowDownCheckmarkIcon } from '@standardnotes/icons'
|
||||
import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
|
||||
import { classNames } from '@standardnotes/snjs'
|
||||
|
||||
type Props = {
|
||||
title: string | JSX.Element
|
||||
@ -21,12 +22,7 @@ const AccordionItem: FunctionComponent<Props> = ({ title, className = '', childr
|
||||
}}
|
||||
>
|
||||
<Title>{title}</Title>
|
||||
<ArrowDownCheckmarkIcon
|
||||
className="sn-accordion-arrow-icon"
|
||||
width={20}
|
||||
height={20}
|
||||
data-is-expanded={isExpanded}
|
||||
/>
|
||||
<ArrowDownCheckmarkIcon className={classNames('h-5 w-5 text-info', isExpanded && 'rotate-180')} />
|
||||
</div>
|
||||
<div className={'accordion-contents-container cursor-auto'} data-is-expanded={isExpanded} ref={elementRef}>
|
||||
{children}
|
||||
|
@ -16,12 +16,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sn-accordion-arrow-icon {
|
||||
&[data-is-expanded='true'] {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-contents-container {
|
||||
transition: all 0.23s ease-out;
|
||||
transform-origin: top;
|
||||
|
Loading…
Reference in New Issue
Block a user