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 classnames from 'classnames';
|
||||||
import { lazyImport } from 'util/lazyImport';
|
import { lazyImport } from 'util/lazyImport';
|
||||||
import SideNavigation from 'component/sideNavigation';
|
import SideNavigation from 'component/sideNavigation';
|
||||||
|
import SettingsSideNavigation from 'component/settingsSideNavigation';
|
||||||
import Header from 'component/header';
|
import Header from 'component/header';
|
||||||
/* @if TARGET='app' */
|
/* @if TARGET='app' */
|
||||||
import StatusBar from 'component/common/status-bar';
|
import StatusBar from 'component/common/status-bar';
|
||||||
|
@ -78,6 +79,24 @@ function Page(props: Props) {
|
||||||
|
|
||||||
const isAbsoluteSideNavHidden = (isOnFilePage || isMobile) && !sidebarOpen;
|
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(() => {
|
React.useEffect(() => {
|
||||||
if (isOnFilePage || isMediumScreen) {
|
if (isOnFilePage || isMediumScreen) {
|
||||||
setSidebarOpen(false);
|
setSidebarOpen(false);
|
||||||
|
@ -102,14 +121,8 @@ function Page(props: Props) {
|
||||||
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
|
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{!authPage && !noSideNavigation && (
|
{getSideNavElem()}
|
||||||
<SideNavigation
|
|
||||||
sidebarOpen={sidebarOpen}
|
|
||||||
setSidebarOpen={setSidebarOpen}
|
|
||||||
isMediumScreen={isMediumScreen}
|
|
||||||
isOnFilePage={isOnFilePage}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<main
|
<main
|
||||||
id={'main-content'}
|
id={'main-content'}
|
||||||
className={classnames(MAIN_CLASS, className, {
|
className={classnames(MAIN_CLASS, className, {
|
||||||
|
|
|
@ -8,7 +8,6 @@ import Page from 'component/page';
|
||||||
import SettingAccount from 'component/settingAccount';
|
import SettingAccount from 'component/settingAccount';
|
||||||
import SettingAppearance from 'component/settingAppearance';
|
import SettingAppearance from 'component/settingAppearance';
|
||||||
import SettingContent from 'component/settingContent';
|
import SettingContent from 'component/settingContent';
|
||||||
import SettingsSideNavigation from 'component/settingsSideNavigation';
|
|
||||||
import SettingSystem from 'component/settingSystem';
|
import SettingSystem from 'component/settingSystem';
|
||||||
import SettingUnauthenticated from 'component/settingUnauthenticated';
|
import SettingUnauthenticated from 'component/settingUnauthenticated';
|
||||||
import Yrbl from 'component/yrbl';
|
import Yrbl from 'component/yrbl';
|
||||||
|
@ -45,48 +44,39 @@ class SettingsPage extends React.PureComponent<Props> {
|
||||||
noFooter
|
noFooter
|
||||||
settingsPage
|
settingsPage
|
||||||
noSideNavigation
|
noSideNavigation
|
||||||
backout={{ title: __('Settings'), backLabel: __('Done') }}
|
backout={{ title: __('Settings'), backLabel: __('Back') }}
|
||||||
className="card-stack"
|
className="card-stack"
|
||||||
>
|
>
|
||||||
<SettingsSideNavigation />
|
{!isAuthenticated && IS_WEB && (
|
||||||
|
<>
|
||||||
<div>
|
<SettingUnauthenticated />
|
||||||
{!isAuthenticated && IS_WEB && (
|
<div className="main--empty">
|
||||||
<>
|
<Yrbl
|
||||||
<SettingUnauthenticated />
|
type="happy"
|
||||||
<div className="main--empty">
|
title={__('Sign up for full control')}
|
||||||
<Yrbl
|
subtitle={__('Unlock new buttons that change things.')}
|
||||||
type="happy"
|
actions={
|
||||||
title={__('Sign up for full control')}
|
<div className="section__actions">
|
||||||
subtitle={__('Unlock new buttons that change things.')}
|
<Button button="primary" icon={ICONS.SIGN_UP} label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
|
||||||
actions={
|
</div>
|
||||||
<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>
|
||||||
)}
|
</>
|
||||||
</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>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue