Page MenuHomePhabricator
Files F3509760

No OneTemporary
Actions

View Options

diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
index 2e0304726..c38a7e82e 100644
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -1,64 +1,34 @@
.container {
grid-area: sBar;
background: var(--bg);
display: flex;
width: 400px;
}
.navigationPanelContainer {
width: 160px;
margin-top: 12px;
}
.navigationPanelTab {
display: flex;
flex-direction: row;
padding: 12px 0 12px 28px;
cursor: pointer;
}
-.navigationPanelTab svg {
- padding-right: 12px;
- color: var(--color-disabled);
- stroke: var(--color-disabled);
- fill: var(--color-disabled);
-}
-
.navigationPanelTab p {
color: var(--color-disabled);
}
.navigationPanelTab:hover p,
-.navigationPanelTab:hover svg,
-div.current_tab p,
-div.current_tab svg {
+div.current_tab p {
color: var(--fg);
stroke: var(--fg);
fill: var(--fg);
}
.container p {
display: flex;
align-content: center;
}
-
-.chatIconWrapper {
- position: relative;
-}
-
-span.chatBadge {
- position: absolute;
- top: -4px;
- left: 13px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 16px;
- height: 16px;
- color: var(--fg);
- background: var(--unread-bg);
- border-radius: 13px;
- font-size: 8px;
- line-height: 1.25;
-}
diff --git a/web/topbar/app-switcher.react.js b/web/topbar/app-switcher.react.js
index 3884025dd..6870475bc 100644
--- a/web/topbar/app-switcher.react.js
+++ b/web/topbar/app-switcher.react.js
@@ -1,134 +1,134 @@
// @flow
import * as React from 'react';
import { useDispatch } from 'react-redux';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import {
mostRecentlyReadThreadSelector,
unreadCount,
} from 'lib/selectors/thread-selectors.js';
+import css from './topbar.css';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import { navTabSelector } from '../selectors/nav-selectors.js';
-import css from '../sidebar/left-layout-aside.css';
import NavigationPanel from '../sidebar/navigation-panel.react.js';
function AppSwitcher(): React.Node {
const activeChatThreadID = useSelector(
state => state.navInfo.activeChatThreadID,
);
const mostRecentlyReadThread = useSelector(mostRecentlyReadThreadSelector);
const isActiveThreadCurrentlyUnread = useSelector(
state =>
!activeChatThreadID ||
!!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
);
const dispatch = useDispatch();
const onClickChat = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
dispatch({
type: updateNavInfoActionType,
payload: {
tab: 'chat',
activeChatThreadID: isActiveThreadCurrentlyUnread
? mostRecentlyReadThread
: activeChatThreadID,
},
});
},
[
dispatch,
isActiveThreadCurrentlyUnread,
mostRecentlyReadThread,
activeChatThreadID,
],
);
const boundUnreadCount = useSelector(unreadCount);
let chatBadge = null;
if (boundUnreadCount > 0) {
chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
}
const chatNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="chat">
<a className={css.navigationPanelTab} onClick={onClickChat}>
<span className={css.chatIconWrapper}>
<SWMansionIcon icon="message-square" size={24} />
{chatBadge}
</span>
<p>Chat</p>
</a>
</NavigationPanel.Item>
),
[chatBadge, onClickChat],
);
const onClickCalendar = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
dispatch({
type: updateNavInfoActionType,
payload: { tab: 'calendar' },
});
},
[dispatch],
);
const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
const calendarNavigationItem = React.useMemo(() => {
if (!isCalendarEnabled) {
return null;
}
return (
<NavigationPanel.Item tab="calendar">
<a className={css.navigationPanelTab} onClick={onClickCalendar}>
<SWMansionIcon icon="calendar" size={24} />
<p>Calendar</p>
</a>
</NavigationPanel.Item>
);
}, [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}>
+ <NavigationPanel.Container tabSelector={navTabSelector} horizontal={true}>
{chatNavigationItem}
{calendarNavigationItem}
{appNavigationItem}
</NavigationPanel.Container>
);
}
export default AppSwitcher;
diff --git a/web/topbar/topbar.react.js b/web/topbar/topbar.react.js
index 5a7771396..c03099e25 100644
--- a/web/topbar/topbar.react.js
+++ b/web/topbar/topbar.react.js
@@ -1,13 +1,18 @@
// @flow
import * as React from 'react';
+import AppSwitcher from './app-switcher.react.js';
import css from './topbar.css';
function Topbar(): React.Node {
- return <div className={css.container}>dummy</div>;
+ return (
+ <div className={css.container}>
+ <AppSwitcher />
+ </div>
+ );
}
const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar);
export default MemoizedTopbar;

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 8:03 AM (1 d, 12 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690610
Default Alt Text
(5 KB)

Event Timeline