Page MenuHomePhorge
Files F32442540

D6346.1765361159.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6346.1765361159.diff
View Options

diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -49,10 +49,12 @@
import AccountSettings from './settings/account-settings.react';
import DangerZone from './settings/danger-zone.react';
import LeftLayoutAside from './sidebar/left-layout-aside.react';
+import SettingsSwitcher from './sidebar/settings-switcher.react';
import Splash from './splash/splash.react';
import './typography.css';
import css from './style.css';
import getTitle from './title/getTitle';
+import Topbar from './topbar/topbar.react';
import { type NavInfo } from './types/nav-types';
import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils';
@@ -169,21 +171,7 @@
stopDoubleClickPropagation = electron ? e => e.stopPropagation() : null;
renderMainContent() {
- let mainContent;
- const { tab, settingsSection } = this.props.navInfo;
- if (tab === 'calendar') {
- mainContent = <Calendar url={this.props.location.pathname} />;
- } else if (tab === 'chat') {
- mainContent = <Chat />;
- } else if (tab === 'apps') {
- mainContent = <AppsDirectory />;
- } else if (tab === 'settings') {
- if (settingsSection === 'account') {
- mainContent = <AccountSettings />;
- } else if (settingsSection === 'danger-zone') {
- mainContent = <DangerZone />;
- }
- }
+ const mainContent = this.getMainContentWithSwitcher();
let navigationArrows = null;
if (electron) {
@@ -230,15 +218,48 @@
</div>
</div>
</header>
- <InputStateContainer>
- <div className={css['main-content-container']}>
- <div className={css['main-content']}>{mainContent}</div>
- </div>
- </InputStateContainer>
+ <InputStateContainer>{mainContent}</InputStateContainer>
<LeftLayoutAside />
</div>
);
}
+
+ getMainContentWithSwitcher() {
+ let mainContent;
+ const { tab, settingsSection } = this.props.navInfo;
+ if (tab === 'calendar') {
+ mainContent = <Calendar url={this.props.location.pathname} />;
+ } else if (tab === 'chat') {
+ mainContent = <Chat />;
+ } else if (tab === 'apps') {
+ mainContent = <AppsDirectory />;
+ } else if (tab === 'settings') {
+ if (settingsSection === 'account') {
+ mainContent = <AccountSettings />;
+ } else if (settingsSection === 'danger-zone') {
+ mainContent = <DangerZone />;
+ }
+ return (
+ <div className={css['main-content-container']}>
+ <div className={css.switcher}>
+ <SettingsSwitcher />
+ </div>
+ <div className={css['main-content']}>{mainContent}</div>
+ </div>
+ );
+ }
+
+ const mainContentClass = classnames(
+ [css['main-content-container']],
+ [css['main-content-container-column']],
+ );
+ return (
+ <div className={mainContentClass}>
+ <Topbar navInfo={this.props.navInfo} />
+ <div className={css['main-content']}>{mainContent}</div>
+ </div>
+ );
+ }
}
const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -98,12 +98,19 @@
display: flex;
overflow: hidden;
}
+div.main-content-container-column {
+ flex-direction: column;
+}
div.main-content {
display: flex;
flex: 1;
overflow: hidden;
}
+.switcher {
+ border-right: 1px solid var(--border-color);
+}
+
div.upper-right {
position: absolute;
top: 0;

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 10:05 AM (22 h, 8 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5863126
Default Alt Text
D6346.1765361159.diff (3 KB)

Event Timeline