Page MenuHomePhabricator
Files F3496881

D6318.id21207.diff
No OneTemporary
Actions

D6318.id21207.diff
View Options

diff --git a/web/chat/inline-engagement.css b/web/chat/inline-engagement.css
--- a/web/chat/inline-engagement.css
+++ b/web/chat/inline-engagement.css
@@ -1,5 +1,7 @@
div.inlineEngagementContainer {
display: flex;
+ flex-direction: row;
+ align-items: center;
}
div.centerContainer {
justify-content: center;
@@ -18,36 +20,41 @@
right: 31px;
margin-left: 31px;
}
-.inlineEngagementContent {
+
+a.threadsContainer,
+a.threadsSplitContainer,
+a.reactionsContainer,
+a.reactionsSplitContainer {
background: var(--inline-engagement-bg);
color: var(--inline-engagement-color);
font-size: var(--s-font-14);
line-height: var(--line-height-text);
+ transition: background 0.2s ease-in-out;
+ padding: 8px;
+ gap: 4px;
flex-direction: row;
display: flex;
- border-radius: 16px;
- padding: 8px;
- cursor: pointer;
- gap: 12px;
align-items: center;
- transition: background 0.2s ease-in-out;
}
-.inlineEngagementContent:hover {
- background: var(--inline-engagement-bg-hover);
+a.threadsContainer,
+a.reactionsContainer {
+ border-radius: 16px;
}
-
-div.reactionsContainer {
- flex-direction: row;
- display: flex;
- gap: 4px;
+a.threadsSplitContainer {
+ border-radius: 16px 0 0 16px;
}
-div.replies {
- flex-direction: row;
- display: flex;
- align-items: center;
- gap: 4px;
+a.reactionsSplitContainer {
+ border-radius: 0 16px 16px 0;
}
+
+a.threadsContainer:hover,
+a.threadsSplitContainer:hover,
+a.reactionsContainer:hover,
+a.reactionsSplitContainer:hover {
+ background: var(--inline-engagement-bg-hover);
+}
+
div.unread {
font-weight: bold;
}
diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js
--- a/web/chat/inline-engagement.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -3,12 +3,14 @@
import classNames from 'classnames';
import * as React from 'react';
+import { useModalContext } from 'lib/components/modal-provider.react';
import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react';
import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
import { stringForReactionList } from 'lib/shared/reaction-utils';
import type { ThreadInfo } from 'lib/types/thread-types';
import CommIcon from '../CommIcon.react';
+import MessageReactionsModal from '../modals/chat/message-reactions-modal.react';
import { useOnClickThread } from '../selectors/thread-selectors';
import css from './inline-engagement.css';
@@ -18,9 +20,13 @@
+positioning: 'left' | 'center' | 'right',
};
function InlineEngagement(props: Props): React.Node {
- const { threadInfo, positioning, reactions } = props;
+ const { threadInfo, reactions, positioning } = props;
+ const { pushModal, popModal } = useModalContext();
const repliesText = useInlineEngagementText(threadInfo);
+ const threadInfoExists = !!threadInfo;
+ const reactionsExist = !!reactions && reactions.size > 0;
+
const containerClasses = classNames([
css.inlineEngagementContainer,
{
@@ -30,19 +36,17 @@
},
]);
- const reactionsList = React.useMemo(() => {
- if (!reactions || reactions.size === 0) {
- return null;
- }
+ const threadsContainerClasses = classNames({
+ [css.threadsContainer]: threadInfoExists && !reactionsExist,
+ [css.threadsSplitContainer]: threadInfoExists && reactionsExist,
+ });
- const reactionText = stringForReactionList(reactions);
+ const reactionsContainerClasses = classNames({
+ [css.reactionsContainer]: reactionsExist && !threadInfoExists,
+ [css.reactionsSplitContainer]: reactionsExist && threadInfoExists,
+ });
- return <div className={css.reactionsContainer}>{reactionText}</div>;
- }, [reactions]);
-
- const onClick = useOnClickThread(threadInfo);
-
- const threadInfoExists = !!threadInfo;
+ const onClickThread = useOnClickThread(threadInfo);
const sidebarItem = React.useMemo(() => {
if (!threadInfoExists || !repliesText) {
@@ -50,22 +54,44 @@
}
return (
- <div className={css.replies}>
+ <a onClick={onClickThread} className={threadsContainerClasses}>
<CommIcon size={14} icon="sidebar-filled" />
{repliesText}
- </div>
+ </a>
+ );
+ }, [threadInfoExists, repliesText, onClickThread, threadsContainerClasses]);
+
+ const onClickReactions = React.useCallback(
+ (event: SyntheticEvent<HTMLElement>) => {
+ event.preventDefault();
+ if (!reactions) {
+ return;
+ }
+ pushModal(
+ <MessageReactionsModal onClose={popModal} reactions={reactions} />,
+ );
+ },
+ [popModal, pushModal, reactions],
+ );
+
+ const reactionsList = React.useMemo(() => {
+ if (!reactions || reactions.size === 0) {
+ return null;
+ }
+
+ const reactionText = stringForReactionList(reactions);
+
+ return (
+ <a onClick={onClickReactions} className={reactionsContainerClasses}>
+ {reactionText}
+ </a>
);
- }, [threadInfoExists, repliesText]);
+ }, [reactions, onClickReactions, reactionsContainerClasses]);
return (
<div className={containerClasses}>
- <a
- className={css.inlineEngagementContent}
- onClick={threadInfoExists ? onClick : null}
- >
- {sidebarItem}
- {reactionsList}
- </a>
+ {sidebarItem}
+ {reactionsList}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 4:08 PM (18 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2682029
Default Alt Text
D6318.id21207.diff (5 KB)

Event Timeline