Page MenuHomePhabricator
Files F3379796

D6294.id22531.diff
No OneTemporary
Actions

D6294.id22531.diff
View Options

diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css
--- a/web/sidebar/community-drawer-item.css
+++ b/web/sidebar/community-drawer-item.css
@@ -1,8 +1,8 @@
.threadEntry {
display: flex;
flex-direction: row;
- margin-top: 8px;
- margin-bottom: 8px;
+ padding-top: 8px;
+ padding-bottom: 8px;
}
.threadListContainer {
@@ -12,6 +12,7 @@
.titleWrapper {
overflow: hidden;
+ width: 100%;
}
.title {
@@ -40,14 +41,9 @@
display: flex;
}
-.chatItem {
- margin-left: 16px;
-}
-
.communityBase {
padding: 2px;
- padding-right: 24px;
- padding-left: 8px;
+ padding-right: 4px;
overflow: hidden;
}
@@ -58,7 +54,6 @@
}
.subchannelsButton {
- margin-left: 24px;
margin-bottom: 6px;
margin-top: 4px;
display: flex;
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -16,13 +16,18 @@
+itemData: CommunityDrawerItemData<string>,
+toggleExpanded: (threadID: string) => void,
+expanded: boolean,
+ +paddingLeft: number,
};
+const indentation = 14;
+const subchannelsButtonIndentation = 24;
+
function CommunityDrawerItem(props: DrawerItemProps): React.Node {
const {
itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
expanded,
toggleExpanded,
+ paddingLeft,
} = props;
const children = React.useMemo(() => {
@@ -30,8 +35,12 @@
return null;
}
if (hasSubchannelsButton) {
+ const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
return (
- <div className={css.subchannelsButton}>
+ <div
+ className={css.subchannelsButton}
+ style={{ paddingLeft: buttonPaddingLeft }}
+ >
<SubchannelsButton threadInfo={threadInfo} />
</div>
);
@@ -43,9 +52,10 @@
<MemoizedCommunityDrawerItemChat
itemData={item}
key={item.threadInfo.id}
+ paddingLeft={paddingLeft + indentation}
/>
));
- }, [expanded, hasSubchannelsButton, itemChildren, threadInfo]);
+ }, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]);
const onExpandToggled = React.useCallback(
() => toggleExpanded(threadInfo.id),
@@ -79,10 +89,12 @@
const { uiName } = useResolvedThreadInfo(threadInfo);
const titleLabel = classnames(css.title, css[labelStyle]);
+ const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
+
return (
<>
<Handler setHandler={setHandler} threadInfo={threadInfo} />
- <div className={css.threadEntry}>
+ <div className={css.threadEntry} style={style}>
{itemExpandButton}
<a onClick={handler.onClick} className={css.titleWrapper}>
<div className={titleLabel}>{uiName}</div>
@@ -95,6 +107,7 @@
export type CommunityDrawerItemChatProps = {
+itemData: CommunityDrawerItemData<string>,
+ +paddingLeft: number,
};
function CommunityDrawerItemChat(
@@ -107,13 +120,11 @@
}, []);
return (
- <div className={css.chatItem}>
- <MemoizedCommunityDrawerItem
- {...props}
- expanded={expanded}
- toggleExpanded={toggleExpanded}
- />
- </div>
+ <MemoizedCommunityDrawerItem
+ {...props}
+ expanded={expanded}
+ toggleExpanded={toggleExpanded}
+ />
);
}
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
--- a/web/sidebar/community-drawer.react.js
+++ b/web/sidebar/community-drawer.react.js
@@ -52,6 +52,7 @@
key={item.threadInfo.id}
toggleExpanded={setOpenCommunityOrClose}
expanded={item.threadInfo.id === openCommunity}
+ paddingLeft={10}
/>
)),
[drawerItemsData, openCommunity, setOpenCommunityOrClose],

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 7:16 PM (21 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594670
Default Alt Text
D6294.id22531.diff (3 KB)

Event Timeline