Page MenuHomePhorge
Files F32600311

D6733.1767431639.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6733.1767431639.diff
View Options

diff --git a/web/navigation-panels/app-switcher.react.js b/web/navigation-panels/app-switcher.react.js
--- a/web/navigation-panels/app-switcher.react.js
+++ b/web/navigation-panels/app-switcher.react.js
@@ -97,36 +97,10 @@
);
}, [isCalendarEnabled, onClickCalendar]);
- const onClickApps = React.useCallback(
- (event: SyntheticEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- dispatch({
- type: updateNavInfoActionType,
- payload: {
- tab: 'apps',
- },
- });
- },
- [dispatch],
- );
-
- const appNavigationItem = React.useMemo(
- () => (
- <NavigationPanel.Item tab="apps">
- <a className={css.navigationPanelTab} onClick={onClickApps}>
- <SWMansionIcon icon="globe-1" size={24} />
- <p>Apps</p>
- </a>
- </NavigationPanel.Item>
- ),
- [onClickApps],
- );
-
return (
<NavigationPanel.Container tabSelector={navTabSelector} horizontal={true}>
{chatNavigationItem}
{calendarNavigationItem}
- {appNavigationItem}
</NavigationPanel.Container>
);
}
diff --git a/web/navigation-panels/topbar.css b/web/navigation-panels/topbar.css
--- a/web/navigation-panels/topbar.css
+++ b/web/navigation-panels/topbar.css
@@ -1,6 +1,9 @@
.container {
border-bottom: 1px solid var(--border);
height: 60px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
.navigationPanelContainer {
@@ -9,6 +12,23 @@
height: 60px;
}
+.plusButton {
+ margin: 12px;
+ display: flex;
+ cursor: pointer;
+ color: var(--topbar-button-fg);
+ align-items: center;
+ justify-content: center;
+ background-color: var(--topbar-button-bg);
+ border-radius: 4px;
+ width: 32px;
+ height: 32px;
+}
+
+.plusButton:hover {
+ background-color: var(--topbar-button-bg-hover);
+}
+
.navigationPanelTab {
display: flex;
flex-direction: row;
@@ -62,3 +82,9 @@
font-size: 8px;
line-height: 1.25;
}
+
+.tabs {
+ display: flex;
+ overflow: auto;
+ max-width: calc(100% - 56px);
+}
diff --git a/web/navigation-panels/topbar.react.js b/web/navigation-panels/topbar.react.js
--- a/web/navigation-panels/topbar.react.js
+++ b/web/navigation-panels/topbar.react.js
@@ -1,14 +1,45 @@
// @flow
import * as React from 'react';
+import { useDispatch } from 'react-redux';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import AppSwitcher from './app-switcher.react.js';
import css from './topbar.css';
+import { updateNavInfoActionType } from '../redux/action-types.js';
function Topbar(): React.Node {
+ const dispatch = useDispatch();
+
+ const onClickApps = React.useCallback(
+ (event: SyntheticEvent<HTMLAnchorElement>) => {
+ event.preventDefault();
+ dispatch({
+ type: updateNavInfoActionType,
+ payload: {
+ tab: 'apps',
+ },
+ });
+ },
+ [dispatch],
+ );
+
+ const appNavigationItem = React.useMemo(
+ () => (
+ <a className={css.plusButton} onClick={onClickApps}>
+ <SWMansionIcon icon="plus-small" size={24} />
+ </a>
+ ),
+ [onClickApps],
+ );
+
return (
<div className={css.container}>
- <AppSwitcher />
+ <div className={css.tabs}>
+ <AppSwitcher />
+ </div>
+ {appNavigationItem}
</div>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -202,4 +202,7 @@
--drawer-open-community-bg: #191919;
--active-drawer-item-bg: rgba(0, 0, 0, 0.5);
--community-drawer-lines: rgba(255, 255, 255, 0.08);
+ --topbar-button-bg: var(--shades-black-90);
+ --topbar-button-bg-hover: var(--shades-black-80);
+ --topbar-button-fg: var(--shades-white-60);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 3, 9:13 AM (9 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5887454
Default Alt Text
D6733.1767431639.diff (3 KB)

Event Timeline