Page MenuHomePhabricator
Files F3357711

D6389.diff
No OneTemporary
Actions

D6389.diff
View Options

diff --git a/web/sidebar/community-drawer-item-handler.react.js b/web/sidebar/community-drawer-item-handler.react.js
--- a/web/sidebar/community-drawer-item-handler.react.js
+++ b/web/sidebar/community-drawer-item-handler.react.js
@@ -2,4 +2,5 @@
export type CommunityDrawerItemHandler = {
+onClick: (event: SyntheticEvent<HTMLElement>) => void,
+ +isActive: boolean,
};
diff --git a/web/sidebar/community-drawer-item-handlers.react.js b/web/sidebar/community-drawer-item-handlers.react.js
--- a/web/sidebar/community-drawer-item-handlers.react.js
+++ b/web/sidebar/community-drawer-item-handlers.react.js
@@ -10,7 +10,10 @@
import type { ThreadInfo } from 'lib/types/thread-types';
import type { CommunityDrawerItemHandler } from './community-drawer-item-handler.react.js';
-import { useOnClickThread } from '../selectors/thread-selectors.js';
+import {
+ useOnClickThread,
+ useThreadIsActive,
+} from '../selectors/thread-selectors.js';
import type { NavigationTab } from '../types/nav-types';
type HandlerProps = {
@@ -21,8 +24,12 @@
function ChatDrawerItemHandler(props: HandlerProps): React.Node {
const { setHandler, threadInfo } = props;
const onClick = useOnClickThread(threadInfo);
- const handler = React.useMemo(() => ({ onClick }), [onClick]);
+ const isActive = useThreadIsActive(threadInfo.id);
+ const handler = React.useMemo(() => ({ onClick, isActive }), [
+ isActive,
+ onClick,
+ ]);
React.useEffect(() => {
setHandler(handler);
}, [handler, setHandler]);
@@ -45,8 +52,12 @@
}),
[dispatch, threadInfo.id],
);
- const handler = React.useMemo(() => ({ onClick }), [onClick]);
+ const isActive = false;
+ const handler = React.useMemo(() => ({ onClick, isActive }), [
+ onClick,
+ isActive,
+ ]);
React.useEffect(() => {
setHandler(handler);
}, [handler, setHandler]);
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
@@ -5,6 +5,12 @@
padding-bottom: 8px;
}
+.active {
+ background-color: var(--active-drawer-item);
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
.threadListContainer {
display: flex;
flex-direction: column;
@@ -51,6 +57,8 @@
background-color: var(--drawer-open-community-bg);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
+ padding-top: 4px;
+ padding-bottom: 4px;
}
.subchannelsButton {
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
@@ -109,11 +109,15 @@
const titleLabel = classnames(css.title, css[labelStyle]);
const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
+ const threadEntry = classnames({
+ [css.threadEntry]: true,
+ [css.active]: handler.isActive,
+ });
return (
<>
<Handler setHandler={setHandler} threadInfo={threadInfo} />
- <div className={css.threadEntry} style={style}>
+ <div className={threadEntry} style={style}>
{itemExpandButton}
<a onClick={handler.onClick} className={css.titleWrapper}>
<div className={titleLabel}>{uiName}</div>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -199,4 +199,5 @@
--drawer-item-color: var(--shades-white-60);
--drawer-open-community-bg: #191919;
--drawer-bg: var(--shades-black-90);
+ --active-drawer-item: rgba(0, 0, 0, 0.5);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 1:10 AM (20 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577881
Default Alt Text
D6389.diff (3 KB)

Event Timeline