Page MenuHomePhabricator
Files F3357731

D6294.id21678.diff
No OneTemporary
Actions

D6294.id21678.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 {
@@ -44,14 +45,9 @@
display: flex;
}
-.chatItem {
- margin-left: 16px;
-}
-
.communityBase {
padding: 2px;
- padding-right: 24px;
- padding-left: 8px;
+ padding-right: 4px;
overflow: hidden;
}
@@ -62,7 +58,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
@@ -15,13 +15,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(() => {
@@ -29,8 +34,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>
);
@@ -42,9 +51,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);
@@ -76,10 +86,12 @@
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}>{threadInfo.uiName}</div>
@@ -92,6 +104,7 @@
export type CommunityDrawerItemChatProps = {
+itemData: CommunityDrawerItemData<string>,
+ +paddingLeft: number,
};
function CommunityDrawerItemChat(
@@ -104,13 +117,11 @@
}, []);
return (
- <div className={css.chatItem}>
- <CommunityDrawerItem
- {...props}
- expanded={expanded}
- toggleExpanded={toggleExpanded}
- />
- </div>
+ <CommunityDrawerItem
+ {...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
@@ -47,6 +47,7 @@
key={item.threadInfo.id}
toggleExpanded={setOpenCommunityOrClose}
expanded={item.threadInfo.id === openCommunity}
+ paddingLeft={10}
/>
));

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 1:15 AM (18 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577898
Default Alt Text
D6294.id21678.diff (3 KB)

Event Timeline