Page MenuHomePhorge
Files F32468834

D6346.1765374351.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6346.1765374351.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
@@ -51,10 +51,12 @@
import AccountSettings from './settings/account-settings.react.js';
import DangerZone from './settings/danger-zone.react.js';
import LeftLayoutAside from './sidebar/left-layout-aside.react.js';
+import SettingsSwitcher from './sidebar/settings-switcher.react.js';
import Splash from './splash/splash.react.js';
import './typography.css';
import css from './style.css';
import getTitle from './title/getTitle.js';
+import Topbar from './topbar/topbar.react.js';
import { type NavInfo } from './types/nav-types.js';
import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js';
import { WagmiENSCacheProvider, wagmiClient } from './utils/wagmi-utils.js';
@@ -176,21 +178,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) {
@@ -238,15 +226,51 @@
</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() {
+ const { tab, settingsSection } = this.props.navInfo;
+ let mainContent;
+
+ 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>
+ );
+ }
+
+ if (tab === 'calendar') {
+ mainContent = <Calendar url={this.props.location.pathname} />;
+ } else if (tab === 'chat') {
+ mainContent = <Chat />;
+ } else if (tab === 'apps') {
+ mainContent = <AppsDirectory />;
+ }
+
+ const mainContentClass = classnames(
+ css['main-content-container'],
+ css['main-content-container-column'],
+ );
+ return (
+ <div className={mainContentClass}>
+ <Topbar />
+ <div className={css['main-content']}>{mainContent}</div>
+ </div>
+ );
+ }
}
const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -1,7 +1,7 @@
div.container {
position: fixed;
width: 300px;
- top: 62px;
+ top: 126px;
bottom: 0;
background-attachment: fixed;
display: flex;
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, 1:45 PM (20 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5860866
Default Alt Text
D6346.1765374351.diff (3 KB)

Event Timeline