115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
import { RoundIconButton } from '@/Components/Button/RoundIconButton'
|
|
import { TitleBar } from '@/Components/TitleBar/TitleBar'
|
|
import { Title } from '@/Components/TitleBar/Title'
|
|
import { FunctionComponent } from 'preact'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { AccountPreferences, HelpAndFeedback, Listed, General, Security } from './Panes'
|
|
import { PreferencesMenu } from './PreferencesMenu'
|
|
import { PreferencesMenuView } from './PreferencesMenuView'
|
|
import { WebApplication } from '@/UIModels/Application'
|
|
import { MfaProps } from './Panes/TwoFactorAuth/MfaProps'
|
|
import { AppState } from '@/UIModels/AppState'
|
|
import { useEffect, useMemo } from 'preact/hooks'
|
|
import { Backups } from '@/Components/Preferences/Panes/Backups'
|
|
import { Appearance } from './Panes/Appearance'
|
|
|
|
interface PreferencesProps extends MfaProps {
|
|
application: WebApplication
|
|
appState: AppState
|
|
closePreferences: () => void
|
|
}
|
|
|
|
const PaneSelector: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = observer(
|
|
({ menu, appState, application, mfaProvider, userProvider }) => {
|
|
switch (menu.selectedPaneId) {
|
|
case 'general':
|
|
return (
|
|
<General
|
|
appState={appState}
|
|
application={application}
|
|
extensionsLatestVersions={menu.extensionsLatestVersions}
|
|
/>
|
|
)
|
|
case 'account':
|
|
return <AccountPreferences application={application} appState={appState} />
|
|
case 'appearance':
|
|
return <Appearance application={application} />
|
|
case 'security':
|
|
return (
|
|
<Security
|
|
mfaProvider={mfaProvider}
|
|
userProvider={userProvider}
|
|
appState={appState}
|
|
application={application}
|
|
/>
|
|
)
|
|
case 'backups':
|
|
return <Backups application={application} appState={appState} />
|
|
case 'listed':
|
|
return <Listed application={application} />
|
|
case 'shortcuts':
|
|
return null
|
|
case 'accessibility':
|
|
return null
|
|
case 'get-free-month':
|
|
return null
|
|
case 'help-feedback':
|
|
return <HelpAndFeedback />
|
|
default:
|
|
return (
|
|
<General
|
|
appState={appState}
|
|
application={application}
|
|
extensionsLatestVersions={menu.extensionsLatestVersions}
|
|
/>
|
|
)
|
|
}
|
|
},
|
|
)
|
|
|
|
const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesMenu }> = observer((props) => (
|
|
<div className="flex flex-row flex-grow min-h-0 justify-between">
|
|
<PreferencesMenuView menu={props.menu} />
|
|
<PaneSelector {...props} />
|
|
</div>
|
|
))
|
|
|
|
export const PreferencesView: FunctionComponent<PreferencesProps> = observer((props) => {
|
|
const menu = useMemo(
|
|
() => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
|
|
[props.appState.enableUnfinishedFeatures, props.application],
|
|
)
|
|
|
|
useEffect(() => {
|
|
menu.selectPane(props.appState.preferences.currentPane)
|
|
const removeEscKeyObserver = props.application.io.addKeyObserver({
|
|
key: 'Escape',
|
|
onKeyDown: (event) => {
|
|
event.preventDefault()
|
|
props.closePreferences()
|
|
},
|
|
})
|
|
return () => {
|
|
removeEscKeyObserver()
|
|
}
|
|
}, [props, menu])
|
|
|
|
return (
|
|
<div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">
|
|
<TitleBar className="items-center justify-between">
|
|
{/* div is added so flex justify-between can center the title */}
|
|
<div className="h-8 w-8" />
|
|
<Title className="text-lg">Your preferences for Standard Notes</Title>
|
|
<RoundIconButton
|
|
onClick={() => {
|
|
props.closePreferences()
|
|
}}
|
|
type="normal"
|
|
icon="close"
|
|
/>
|
|
</TitleBar>
|
|
<PreferencesCanvas {...props} menu={menu} />
|
|
</div>
|
|
)
|
|
})
|