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,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>
); );
} }