Page: the 'settingsPage' option now automatically adds the sidebar.
This commit is contained in:
parent
6e152a4137
commit
1671deb0b2
2 changed files with 51 additions and 48 deletions
|
@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
|
|||
import classnames from 'classnames';
|
||||
import { lazyImport } from 'util/lazyImport';
|
||||
import SideNavigation from 'component/sideNavigation';
|
||||
import SettingsSideNavigation from 'component/settingsSideNavigation';
|
||||
import Header from 'component/header';
|
||||
/* @if TARGET='app' */
|
||||
import StatusBar from 'component/common/status-bar';
|
||||
|
@ -78,6 +79,24 @@ function Page(props: Props) {
|
|||
|
||||
const isAbsoluteSideNavHidden = (isOnFilePage || isMobile) && !sidebarOpen;
|
||||
|
||||
function getSideNavElem() {
|
||||
if (!authPage) {
|
||||
if (settingsPage) {
|
||||
return <SettingsSideNavigation />;
|
||||
} else if (!noSideNavigation) {
|
||||
return (
|
||||
<SideNavigation
|
||||
sidebarOpen={sidebarOpen}
|
||||
setSidebarOpen={setSidebarOpen}
|
||||
isMediumScreen={isMediumScreen}
|
||||
isOnFilePage={isOnFilePage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isOnFilePage || isMediumScreen) {
|
||||
setSidebarOpen(false);
|
||||
|
@ -102,14 +121,8 @@ function Page(props: Props) {
|
|||
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
|
||||
})}
|
||||
>
|
||||
{!authPage && !noSideNavigation && (
|
||||
<SideNavigation
|
||||
sidebarOpen={sidebarOpen}
|
||||
setSidebarOpen={setSidebarOpen}
|
||||
isMediumScreen={isMediumScreen}
|
||||
isOnFilePage={isOnFilePage}
|
||||
/>
|
||||
)}
|
||||
{getSideNavElem()}
|
||||
|
||||
<main
|
||||
id={'main-content'}
|
||||
className={classnames(MAIN_CLASS, className, {
|
||||
|
|
|
@ -8,7 +8,6 @@ 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';
|
||||
|
@ -45,48 +44,39 @@ class SettingsPage extends React.PureComponent<Props> {
|
|||
noFooter
|
||||
settingsPage
|
||||
noSideNavigation
|
||||
backout={{ title: __('Settings'), backLabel: __('Done') }}
|
||||
backout={{ title: __('Settings'), backLabel: __('Back') }}
|
||||
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 />
|
||||
{!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>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue