Page MenuHomePhabricator
Files F3525931

D7017.id24269.diff
No OneTemporary
Actions

D7017.id24269.diff
View Options

diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -144,7 +144,7 @@
display: flex;
justify-content: flex-end;
flex-shrink: 0;
- margin-right: 30px;
+ margin-right: 45px;
padding-bottom: 6px;
}
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
@@ -17,7 +17,7 @@
justify-content: flex-end;
position: relative;
top: -10px;
- right: 31px;
+ right: 30px;
margin-left: 31px;
}
@@ -62,3 +62,28 @@
svg.inlineEngagementIcon {
color: #666666;
}
+
+div.messageLabel {
+ display: flex;
+ flex-shrink: 0;
+}
+
+div.messageLabel > span {
+ font-size: 12px;
+ padding: 0 3px;
+ color: var(--message-label-color);
+}
+
+div.messageLabelLeft {
+ margin-left: 8px;
+ margin-right: 4px;
+}
+
+div.messageLabelRight {
+ margin-right: 12px;
+ margin-left: 4px;
+}
+
+div.onlyMessageLabel {
+ margin-top: 8px;
+}
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
@@ -18,9 +18,10 @@
+threadInfo: ?ThreadInfo,
+reactions?: ReactionInfo,
+positioning: 'left' | 'center' | 'right',
+ +label?: ?string,
};
function InlineEngagement(props: Props): React.Node {
- const { threadInfo, reactions, positioning } = props;
+ const { threadInfo, reactions, positioning, label } = props;
const { pushModal, popModal } = useModalContext();
const repliesText = useInlineEngagementText(threadInfo);
@@ -87,10 +88,35 @@
);
}, [reactions, onClickReactions, reactionsContainerClasses]);
+ const isLeft = positioning === 'left';
+ const labelClasses = classNames({
+ [css.messageLabel]: true,
+ [css.messageLabelLeft]: isLeft,
+ [css.messageLabelRight]: !isLeft,
+ [css.onlyMessageLabel]: !sidebarItem && !reactionsList,
+ });
+ const messageLabel = React.useMemo(() => {
+ if (!label) {
+ return null;
+ }
+ return (
+ <div className={labelClasses}>
+ <span>{label}</span>
+ </div>
+ );
+ }, [label, labelClasses]);
+
+ const components = [sidebarItem, reactionsList];
+ if (isLeft) {
+ components.unshift(messageLabel);
+ } else {
+ components.push(messageLabel);
+ }
return (
<div className={containerClasses}>
- {sidebarItem}
- {reactionsList}
+ {components.map((component, index) => (
+ <React.Fragment key={index}>{component}</React.Fragment>
+ ))}
</div>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -210,5 +210,6 @@
--filter-panel-bg: #0d0d0d;
--topbar-button-bg-hover: var(--shades-black-80);
--topbar-button-fg: var(--shades-white-60);
+ --message-label-color: var(--shades-white-60);
--topbar-lines: rgba(255, 255, 255, 0.08);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 6:50 PM (9 h, 7 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2700813
Default Alt Text
D7017.id24269.diff (2 KB)

Event Timeline