b3b4e54975
All <Setting*> components will have an ID that corresponds to the sidebar link. When clicked, we scroll to the position of the card by searching for the element with the ID. It behaves simiar to # anchor navigation. I like this model mainly because in Mobile, users don't need to keep opening the drawer to navigate -- they just need to scroll. This allows us to use the same design for Mobile and App.
95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
// @flow
|
|
import * as PAGES from 'constants/pages';
|
|
import * as ICONS from 'constants/icons';
|
|
import * as React from 'react';
|
|
import classnames from 'classnames';
|
|
import Button from 'component/button';
|
|
import Page from 'component/page';
|
|
import SettingAccount from 'component/settingAccount';
|
|
import SettingAppearance from 'component/settingAppearance';
|
|
import SettingContent from 'component/settingContent';
|
|
import SettingsSideNavigation from 'component/settingsSideNavigation';
|
|
import SettingSystem from 'component/settingSystem';
|
|
import SettingUnauthenticated from 'component/settingUnauthenticated';
|
|
import Yrbl from 'component/yrbl';
|
|
|
|
type DaemonSettings = {
|
|
download_dir: string,
|
|
share_usage_data: boolean,
|
|
};
|
|
|
|
type Props = {
|
|
daemonSettings: DaemonSettings,
|
|
isAuthenticated: boolean,
|
|
enterSettings: () => void,
|
|
exitSettings: () => void,
|
|
};
|
|
|
|
class SettingsPage extends React.PureComponent<Props> {
|
|
componentDidMount() {
|
|
const { enterSettings } = this.props;
|
|
enterSettings();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
const { exitSettings } = this.props;
|
|
exitSettings();
|
|
}
|
|
|
|
render() {
|
|
const { daemonSettings, isAuthenticated } = this.props;
|
|
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
|
|
|
|
return (
|
|
<Page
|
|
noFooter
|
|
settingsPage
|
|
noSideNavigation
|
|
backout={{ title: __('Settings'), backLabel: __('Done') }}
|
|
className="card-stack"
|
|
>
|
|
<SettingsSideNavigation />
|
|
|
|
<div>
|
|
{!isAuthenticated && IS_WEB && (
|
|
<>
|
|
<SettingUnauthenticated />
|
|
<div className="main--empty">
|
|
<Yrbl
|
|
type="happy"
|
|
title={__('Sign up for full control')}
|
|
subtitle={__('Unlock new buttons that change things.')}
|
|
actions={
|
|
<div className="section__actions">
|
|
<Button
|
|
button="primary"
|
|
icon={ICONS.SIGN_UP}
|
|
label={__('Sign Up')}
|
|
navigate={`/$/${PAGES.AUTH}`}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{!IS_WEB && noDaemonSettings ? (
|
|
<section className="card card--section">
|
|
<div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
|
|
</section>
|
|
) : (
|
|
<div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
|
|
<SettingAppearance />
|
|
<SettingAccount />
|
|
<SettingContent />
|
|
<SettingSystem />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Page>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SettingsPage;
|