Page MenuHomePhabricator
Files F3366094

D4924.id15869.diff
No OneTemporary
Actions

D4924.id15869.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
@@ -206,7 +206,7 @@
grid-column-end: span 2;
}
div.sidebarMarginBottom {
- margin-bottom: 8px;
+ margin-bottom: 2px;
}
svg.inlineSidebarIcon {
color: #666666;
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-sidebar.css
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-sidebar.css
@@ -1,33 +1,55 @@
+div.inlineSidebarContainer {
+ display: flex;
+}
+div.centerContainer {
+ justify-content: center;
+}
+div.nonViewerMessageBoxContainer {
+ justify-content: flex-start;
+ position: relative;
+ top: -10px;
+ left: 12px;
+}
+div.viewerMessageBoxContainer {
+ justify-content: flex-end;
+ position: relative;
+ top: -10px;
+ right: 31px;
+}
div.inlineSidebarContent {
+ background: var(--inline-sidebar-bg);
+ color: var(--inline-sidebar-color);
+ font-size: var(--s-font-14);
+ line-height: var(--line-height-text);
flex-direction: row;
display: flex;
- margin: 0 40px 0 20px;
+ border-radius: 16px;
+ padding: 8px;
cursor: pointer;
+ gap: 12px;
+ align-items: center;
+ transition: background 0.2s ease-in-out;
+}
+
+div.inlineSidebarContent:hover {
+ background: var(--inline-sidebar-bg-hover);
}
-div.inlineSidebar {
+
+div.reactionsContainer {
flex-direction: row;
display: flex;
- align-items: center;
+ gap: 4px;
}
-div.inlineSidebarName {
- padding-top: 1px;
- color: #666666;
- font-size: 16px;
- padding-left: 4px;
- padding-right: 2px;
+div.replies {
+ flex-direction: row;
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
div.unread {
font-weight: bold;
}
-div.centerContainer {
- justify-content: center;
-}
-div.nonViewerMessageBoxContainer {
- justify-content: flex-start;
-}
-div.viewerMessageBoxContainer {
- justify-content: flex-end;
-}
+
svg.inlineSidebarIcon {
color: #666666;
}
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-sidebar.react.js
@@ -2,61 +2,76 @@
import classNames from 'classnames';
import * as React from 'react';
-import {
- CornerDownRight as CornerDownRightIcon,
- CornerDownLeft as CornerDownLeftIcon,
-} from 'react-feather';
import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
import type { ThreadInfo } from 'lib/types/thread-types';
+import CommIcon from '../CommIcon.react';
import { useOnClickThread } from '../selectors/nav-selectors';
import css from './inline-sidebar.css';
type Props = {
- +threadInfo: ThreadInfo,
+ +threadInfo: ?ThreadInfo,
+ +reactions?: $ReadOnlyArray<string>,
+positioning: 'left' | 'center' | 'right',
};
function InlineSidebar(props: Props): React.Node {
- const { threadInfo } = props;
- const { sendersText, repliesText } = useInlineSidebarText(threadInfo);
+ const { threadInfo, positioning, reactions = [] } = props;
+ const inlineSidebarText = useInlineSidebarText(threadInfo);
+
+ const containerClasses = classNames([
+ css.inlineSidebarContainer,
+ {
+ [css.nonViewerMessageBoxContainer]: positioning === 'left',
+ [css.centerContainer]: positioning === 'center',
+ [css.viewerMessageBoxContainer]: positioning === 'right',
+ },
+ ]);
+
+ const reactionsList = React.useMemo(() => {
+ if (!reactions || reactions.length === 0) {
+ return null;
+ }
+ const reactionsItems = reactions.map(reaction => {
+ return (
+ <div key={reaction} className={css.reactions}>
+ {reaction}
+ </div>
+ );
+ });
+ return <div className={css.reactionsContainer}>{reactionsItems}</div>;
+ }, [reactions]);
const onClick = useOnClickThread(threadInfo);
- let viewerIcon, nonViewerIcon, alignStyle;
- if (props.positioning === 'right') {
- viewerIcon = (
- <CornerDownLeftIcon className={css.inlineSidebarIcon} size={18} />
- );
- alignStyle = css.viewerMessageBoxContainer;
- } else if (props.positioning === 'left') {
- nonViewerIcon = (
- <CornerDownRightIcon className={css.inlineSidebarIcon} size={18} />
- );
- alignStyle = css.nonViewerMessageBoxContainer;
- } else {
- nonViewerIcon = (
- <CornerDownRightIcon className={css.inlineSidebarIcon} size={18} />
- );
- alignStyle = css.centerContainer;
- }
+ const chatIcon = React.useMemo(
+ () => <CommIcon size={14} icon="sidebar-filled" />,
+ [],
+ );
+ const sidebarItem = React.useMemo(() => {
+ if (!threadInfo || !inlineSidebarText) {
+ return null;
+ }
- const unreadStyle = threadInfo.currentUser.unread ? css.unread : null;
+ return (
+ <div className={css.replies}>
+ {chatIcon}
+ {inlineSidebarText.repliesText}
+ </div>
+ );
+ }, [chatIcon, inlineSidebarText, threadInfo]);
return (
- <div className={classNames([css.inlineSidebarContent, alignStyle])}>
- <div onClick={onClick} className={css.inlineSidebar}>
- {nonViewerIcon}
- <div className={classNames([css.inlineSidebarName, unreadStyle])}>
- {sendersText}
- {repliesText}
- </div>
- {viewerIcon}
+ <div className={containerClasses}>
+ <div
+ className={css.inlineSidebarContent}
+ onClick={threadInfo ? onClick : null}
+ >
+ {sidebarItem}
+ {reactionsList}
</div>
</div>
);
}
-const inlineSidebarHeight = 20;
-
-export { InlineSidebar, inlineSidebarHeight };
+export { InlineSidebar };
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -176,4 +176,7 @@
--chat-message-list-active-border: #5989d6;
--sidebars-modal-color: var(--shades-black-60);
--sidebars-modal-color-hover: var(--shades-white-100);
+ --inline-sidebar-bg: var(--shades-black-70);
+ --inline-sidebar-bg-hover: var(--shades-black-80);
+ --inline-sidebar-color: var(--fg);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 9:31 AM (21 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2584158
Default Alt Text
D4924.id15869.diff (5 KB)

Event Timeline