Page MenuHomePhabricator
Files F3526330

D5268.diff
No OneTemporary
Actions

D5268.diff
View Options

diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -56,7 +56,7 @@
);
}, [data.mostRecentMessageInfo, data.threadInfo, styles]);
- const sidebars = data.sidebars.map(sidebarItem => {
+ const sidebars = data.sidebars.map((sidebarItem, index) => {
if (sidebarItem.type === 'sidebar') {
const { type, ...sidebarInfo } = sidebarItem;
return (
@@ -66,6 +66,7 @@
onSwipeableWillOpen={onSwipeableWillOpen}
currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
key={sidebarItem.threadInfo.id}
+ extendArrow={index > 0}
/>
);
} else if (sidebarItem.type === 'seeMore') {
diff --git a/native/chat/chat-thread-list-sidebar.react.js b/native/chat/chat-thread-list-sidebar.react.js
--- a/native/chat/chat-thread-list-sidebar.react.js
+++ b/native/chat/chat-thread-list-sidebar.react.js
@@ -1,9 +1,13 @@
// @flow
import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
+import ArrowLong from '../components/arrow-long.react';
+import Arrow from '../components/arrow.react';
+import UnreadDot from '../components/unread-dot.react';
import { SidebarItem } from './sidebar-item.react';
import SwipeableThread from './swipeable-thread.react';
@@ -12,6 +16,7 @@
+onPressItem: (threadInfo: ThreadInfo) => void,
+onSwipeableWillOpen: (threadInfo: ThreadInfo) => void,
+currentlyOpenedSwipeableId: string,
+ +extendArrow: boolean,
};
function ChatThreadListSidebar(props: Props): React.Node {
const {
@@ -19,22 +24,69 @@
onSwipeableWillOpen,
currentlyOpenedSwipeableId,
onPressItem,
+ extendArrow = false,
} = props;
+
+ let arrow;
+ if (extendArrow) {
+ arrow = (
+ <View style={styles.longArrow}>
+ <ArrowLong />
+ </View>
+ );
+ } else {
+ arrow = (
+ <View style={styles.arrow}>
+ <Arrow />
+ </View>
+ );
+ }
+
return (
- <SwipeableThread
- threadInfo={sidebarInfo.threadInfo}
- mostRecentNonLocalMessage={sidebarInfo.mostRecentNonLocalMessage}
- onSwipeableWillOpen={onSwipeableWillOpen}
- currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
- iconSize={16}
- >
- <SidebarItem
- sidebarInfo={sidebarInfo}
- onPressItem={onPressItem}
- unreadIndicator={true}
- />
- </SwipeableThread>
+ <View style={styles.chatThreadListContainer}>
+ {arrow}
+ <View style={styles.unreadIndicatorContainer}>
+ <UnreadDot unread={sidebarInfo.threadInfo.currentUser.unread} />
+ </View>
+ <View style={styles.swipeableThreadContainer}>
+ <SwipeableThread
+ threadInfo={sidebarInfo.threadInfo}
+ mostRecentNonLocalMessage={sidebarInfo.mostRecentNonLocalMessage}
+ onSwipeableWillOpen={onSwipeableWillOpen}
+ currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
+ iconSize={16}
+ >
+ <SidebarItem sidebarInfo={sidebarInfo} onPressItem={onPressItem} />
+ </SwipeableThread>
+ </View>
+ </View>
);
}
+const styles = StyleSheet.create({
+ arrow: {
+ left: 27.5,
+ position: 'absolute',
+ top: -12,
+ },
+ chatThreadListContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ },
+ longArrow: {
+ left: 28,
+ position: 'absolute',
+ top: -19,
+ },
+ swipeableThreadContainer: {
+ flex: 1,
+ },
+ unreadIndicatorContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ paddingLeft: 6,
+ width: 56,
+ },
+});
+
export default ChatThreadListSidebar;
diff --git a/native/chat/sidebar-item.react.js b/native/chat/sidebar-item.react.js
--- a/native/chat/sidebar-item.react.js
+++ b/native/chat/sidebar-item.react.js
@@ -2,14 +2,12 @@
import * as React from 'react';
import { Text } from 'react-native';
-import Icon from 'react-native-vector-icons/Entypo';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
import { shortAbsoluteDate } from 'lib/utils/date-utils';
import Button from '../components/button.react';
import { SingleLine } from '../components/single-line.react';
-import UnreadDot from '../components/unread-dot.react';
import { useColors, useStyles } from '../themes/colors';
import type { ViewStyle } from '../types/styles';
@@ -17,7 +15,6 @@
+sidebarInfo: SidebarInfo,
+onPressItem: (threadInfo: ThreadInfo) => void,
+style?: ?ViewStyle,
- +unreadIndicator?: boolean,
};
function SidebarItem(props: Props): React.Node {
const { lastUpdatedTime } = props.sidebarInfo;
@@ -35,34 +32,9 @@
const colors = useColors();
- const { unreadIndicator } = props;
const sidebarStyle = React.useMemo(() => {
- if (unreadIndicator) {
- return [styles.sidebar, styles.sidebarWithUnreadIndicator, props.style];
- }
return [styles.sidebar, props.style];
- }, [
- props.style,
- styles.sidebar,
- styles.sidebarWithUnreadIndicator,
- unreadIndicator,
- ]);
-
- const sidebarIconStyle = React.useMemo(() => {
- if (unreadIndicator) {
- return [styles.sidebarIcon, styles.sidebarIconWithUnreadIndicator];
- }
- return styles.sidebarIcon;
- }, [
- styles.sidebarIcon,
- styles.sidebarIconWithUnreadIndicator,
- unreadIndicator,
- ]);
-
- let unreadDot;
- if (unreadIndicator) {
- unreadDot = <UnreadDot unread={threadInfo.currentUser.unread} />;
- }
+ }, [props.style, styles.sidebar]);
return (
<Button
@@ -72,8 +44,6 @@
style={sidebarStyle}
onPress={onPress}
>
- {unreadDot}
- <Icon name="align-right" style={sidebarIconStyle} size={24} />
<SingleLine style={[styles.name, unreadStyle]}>
{threadInfo.uiName}
</SingleLine>
@@ -92,21 +62,11 @@
height: sidebarHeight,
flexDirection: 'row',
display: 'flex',
- paddingLeft: 28,
+ paddingLeft: 6,
paddingRight: 18,
alignItems: 'center',
backgroundColor: 'listBackground',
},
- sidebarWithUnreadIndicator: {
- paddingLeft: 6,
- },
- sidebarIcon: {
- paddingRight: 5,
- color: 'listForegroundSecondaryLabel',
- },
- sidebarIconWithUnreadIndicator: {
- paddingLeft: 22,
- },
name: {
color: 'listForegroundSecondaryLabel',
flex: 1,

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 9:46 PM (9 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2701058
Default Alt Text
D5268.diff (6 KB)

Event Timeline