Page MenuHomePhabricator
Files F3184402

D3539.id10773.diff
No OneTemporary
Actions

D3539.id10773.diff
View Options

diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -89,12 +89,13 @@
[color],
);
- const sidebars = item.sidebars.map(sidebarItem => {
+ const sidebars = item.sidebars.map((sidebarItem, index) => {
if (sidebarItem.type === 'sidebar') {
const { type, ...sidebarInfo } = sidebarItem;
return (
<ChatThreadListSidebar
sidebarInfo={sidebarInfo}
+ isMultipleSidebarItem={index > 0}
key={sidebarInfo.threadInfo.id}
/>
);
diff --git a/web/chat/chat-thread-list-sidebar.react.js b/web/chat/chat-thread-list-sidebar.react.js
--- a/web/chat/chat-thread-list-sidebar.react.js
+++ b/web/chat/chat-thread-list-sidebar.react.js
@@ -12,9 +12,10 @@
type Props = {
+sidebarInfo: SidebarInfo,
+ +isMultipleSidebarItem: boolean,
};
function ChatThreadListSidebar(props: Props): React.Node {
- const { sidebarInfo } = props;
+ const { sidebarInfo, isMultipleSidebarItem } = props;
const { threadInfo, mostRecentNonLocalMessage } = sidebarInfo;
const {
currentUser: { unread },
@@ -34,7 +35,10 @@
})}
>
<div className={css.dotContainer}>{unreadDot}</div>
- <SidebarItem sidebarInfo={sidebarInfo} />
+ <SidebarItem
+ sidebarInfo={sidebarInfo}
+ extendArrow={isMultipleSidebarItem}
+ />
<ChatThreadListItemMenu
threadInfo={threadInfo}
mostRecentNonLocalMessage={mostRecentNonLocalMessage}
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -46,6 +46,16 @@
color: var(--thread-color-read);
line-height: var(--line-height-text);
}
+div.threadArrowExtender {
+ height: 10px;
+ width: 10px;
+ position: absolute;
+ border-left: 0.5px solid var(--arrow-extension-color);
+ height: 8px;
+ top: -15px;
+ left: 32px;
+}
+
a.threadButton {
flex: 1;
cursor: pointer;
diff --git a/web/chat/sidebar-item.react.js b/web/chat/sidebar-item.react.js
--- a/web/chat/sidebar-item.react.js
+++ b/web/chat/sidebar-item.react.js
@@ -11,10 +11,12 @@
type Props = {
+sidebarInfo: SidebarInfo,
+ +extendArrow?: boolean,
};
function SidebarItem(props: Props): React.Node {
const {
sidebarInfo: { threadInfo },
+ extendArrow = false,
} = props;
const {
currentUser: { unread },
@@ -26,6 +28,7 @@
return (
<>
+ {extendArrow ? <div className={css.threadArrowExtender} /> : null}
<SWMansionIcon icon="right-angle-arrow" size={28} />
<div className={css.spacer} />
<a className={css.threadButtonSidebar} onClick={onClick}>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -118,4 +118,5 @@
--chat-thread-list-menu-bg: var(--shades-black-80);
--chat-thread-list-menu-active-color: var(--shades-white-60);
--chat-thread-list-menu-active-bg: var(--shades-black-90);
+ --arrow-extension-color: var(--shades-black-60);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 9, 10:42 AM (20 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2451702
Default Alt Text
D3539.id10773.diff (3 KB)

Event Timeline