Page MenuHomePhorge
Files F32373174

D6162.1765327035.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6162.1765327035.diff
View Options

diff --git a/web/sidebar/community-drawer.css b/web/sidebar/community-drawer.css
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer.css
@@ -0,0 +1,10 @@
+.container {
+ background-color: var(--drawer-bg);
+ display: flex;
+ overflow-y: auto;
+ flex-direction: column;
+ padding-right: 8px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ align-self: flex-start;
+}
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer.react.js
@@ -0,0 +1,91 @@
+// @flow
+
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+ childThreadInfos,
+ communityThreadSelector,
+} from 'lib/selectors/thread-selectors';
+import {
+ createRecursiveDrawerItemsData,
+ appendSuffix,
+} from 'lib/utils/drawer-utils.react';
+
+import { ThreadListProvider } from '../chat/thread-list-provider';
+import CommunityDrawerItemCommunity from './community-drawer-item-community.react';
+import css from './community-drawer.css';
+
+const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2'];
+
+const maxDepth = 2;
+
+function CommunityDrawer(): React.Node {
+ const tab = useSelector(state => state.navInfo.tab);
+ const childThreadInfosMap = useSelector(childThreadInfos);
+ const communities = useSelector(communityThreadSelector);
+ const communitiesSuffixed = React.useMemo(() => appendSuffix(communities), [
+ communities,
+ ]);
+
+ const drawerItemsData = createRecursiveDrawerItemsData(
+ childThreadInfosMap,
+ communitiesSuffixed,
+ labelStyles,
+ maxDepth,
+ );
+
+ const [openCommunity, setOpenCommunity] = React.useState(
+ communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
+ );
+
+ const setOpenCommunityOrClose = React.useCallback((communityID: string) => {
+ setOpenCommunity(open => (open === communityID ? null : communityID));
+ }, []);
+
+ const communitiesComponentsDefault = React.useMemo(
+ () =>
+ drawerItemsData.map(item => (
+ <CommunityDrawerItemCommunity
+ itemData={item}
+ key={`${item.threadInfo.id}_chat`}
+ toggleExpanded={setOpenCommunityOrClose}
+ expanded={item.threadInfo.id === openCommunity}
+ />
+ )),
+ [drawerItemsData, openCommunity, setOpenCommunityOrClose],
+ );
+
+ const communitiesComponentsCal = React.useMemo(
+ () =>
+ drawerItemsData.map(item => (
+ <CommunityDrawerItemCommunity
+ itemData={item}
+ key={`${item.threadInfo.id}_cal`}
+ toggleExpanded={() => {}}
+ expanded={false}
+ />
+ )),
+ [drawerItemsData],
+ );
+
+ const defaultStyle = React.useMemo(
+ () => (tab === 'calendar' ? { display: 'none' } : null),
+ [tab],
+ );
+ const calStyle = React.useMemo(
+ () => (tab !== 'calendar' ? { display: 'none' } : null),
+ [tab],
+ );
+
+ return (
+ <ThreadListProvider>
+ <div className={css.container}>
+ <div style={defaultStyle}>{communitiesComponentsDefault}</div>
+ <div style={calStyle}>{communitiesComponentsCal}</div>
+ </div>
+ </ThreadListProvider>
+ );
+}
+
+export default CommunityDrawer;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -197,4 +197,5 @@
--drawer-expand-button-disabled: var(--shades-black-80);
--drawer-item-color: var(--shades-white-60);
--drawer-open-community-bg: #191919;
+ --drawer-bg: var(--shades-black-90);
}

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 12:37 AM (18 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5859205
Default Alt Text
D6162.1765327035.diff (3 KB)

Event Timeline