Page: the 'settingsPage' option now automatically adds the sidebar.

This commit is contained in:
infinite-persistence 2021-08-19 09:36:43 +08:00
parent 6e152a4137
commit 1671deb0b2
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 51 additions and 48 deletions

View file

@ -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, {

View file

@ -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,12 +44,9 @@ 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 />
<div>
{!isAuthenticated && IS_WEB && ( {!isAuthenticated && IS_WEB && (
<> <>
<SettingUnauthenticated /> <SettingUnauthenticated />
@ -61,12 +57,7 @@ class SettingsPage extends React.PureComponent<Props> {
subtitle={__('Unlock new buttons that change things.')} subtitle={__('Unlock new buttons that change things.')}
actions={ actions={
<div className="section__actions"> <div className="section__actions">
<Button <Button button="primary" icon={ICONS.SIGN_UP} label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
button="primary"
icon={ICONS.SIGN_UP}
label={__('Sign Up')}
navigate={`/$/${PAGES.AUTH}`}
/>
</div> </div>
} }
/> />
@ -86,7 +77,6 @@ class SettingsPage extends React.PureComponent<Props> {
<SettingSystem /> <SettingSystem />
</div> </div>
)} )}
</div>
</Page> </Page>
); );
} }