Page MenuHomePhabricator
Files F3386098

D8708.diff
No OneTemporary
Actions

D8708.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
@@ -2,6 +2,8 @@
display: flex;
flex-direction: row;
align-items: center;
+ flex-wrap: wrap;
+ gap: 4px;
}
div.centerContainer {
justify-content: center;
@@ -14,15 +16,15 @@
margin-right: 80px;
}
div.rightContainer {
- justify-content: flex-end;
position: relative;
top: -10px;
right: 33px;
margin-left: 80px;
+ flex-direction: row-reverse;
}
a.sidebarContainer,
-a.reactionsContainer {
+a.reactionContainer {
background: var(--inline-engagement-bg);
color: var(--inline-engagement-color);
font-size: var(--s-font-14);
@@ -36,7 +38,7 @@
}
a.sidebarContainer:hover,
-a.reactionsContainer:hover {
+a.reactionContainer:hover {
background: var(--inline-engagement-bg-hover);
}
@@ -64,10 +66,8 @@
div.messageLabelLeft {
margin-left: 8px;
- margin-right: 4px;
}
div.messageLabelRight {
margin-right: 8px;
- margin-left: 4px;
}
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
@@ -6,7 +6,6 @@
import { useModalContext } from 'lib/components/modal-provider.react.js';
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { getInlineEngagementSidebarText } from 'lib/shared/inline-engagement-utils.js';
-import { stringForReactionList } from 'lib/shared/reaction-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import css from './inline-engagement.css';
@@ -23,7 +22,6 @@
function InlineEngagement(props: Props): React.Node {
const { sidebarThreadInfo, reactions, positioning, label } = props;
const { pushModal, popModal } = useModalContext();
- const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo);
const isLeft = positioning === 'left';
@@ -53,6 +51,8 @@
[popModal, onClickSidebarInner],
);
+ const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo);
+
const sidebarItem = React.useMemo(() => {
if (!sidebarThreadInfo || !repliesText) {
return null;
@@ -66,7 +66,7 @@
);
}, [sidebarThreadInfo, repliesText, onClickSidebar]);
- const onClickReactions = React.useCallback(
+ const onClickReaction = React.useCallback(
(event: SyntheticEvent<HTMLElement>) => {
event.preventDefault();
if (!reactions) {
@@ -84,14 +84,20 @@
return null;
}
- const reactionText = stringForReactionList(reactions);
-
- return (
- <a onClick={onClickReactions} className={css.reactionsContainer}>
- {reactionText}
- </a>
- );
- }, [reactions, onClickReactions]);
+ return Object.keys(reactions).map(reaction => {
+ const numOfReacts = reactions[reaction].users.length;
+
+ return (
+ <a
+ onClick={onClickReaction}
+ className={css.reactionContainer}
+ key={reaction}
+ >
+ {`${reaction} ${numOfReacts}`}
+ </a>
+ );
+ });
+ }, [reactions, onClickReaction]);
const containerClasses = classNames([
css.inlineEngagementContainer,
@@ -102,25 +108,13 @@
},
]);
- let body;
- if (isLeft) {
- body = (
- <>
- {editedLabel}
- {sidebarItem}
- {reactionsList}
- </>
- );
- } else {
- body = (
- <>
- {sidebarItem}
- {reactionsList}
- {editedLabel}
- </>
- );
- }
- return <div className={containerClasses}>{body}</div>;
+ return (
+ <div className={containerClasses}>
+ {editedLabel}
+ {sidebarItem}
+ {reactionsList}
+ </div>
+ );
}
export default InlineEngagement;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 3:17 AM (19 h, 37 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2599316
Default Alt Text
D8708.diff (3 KB)

Event Timeline