Page MenuHomePhabricator
Files F3251708

D5491.diff
No OneTemporary
Actions

D5491.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,6 +56,10 @@
);
}, [data.mostRecentMessageInfo, data.threadInfo, styles]);
+ const numOfSidebarsWithExtendedArrow =
+ data.sidebars.filter(sidebarItem => sidebarItem.type === 'sidebar').length -
+ 1;
+
const sidebars = data.sidebars.map((sidebarItem, index) => {
if (sidebarItem.type === 'sidebar') {
const { type, ...sidebarInfo } = sidebarItem;
@@ -66,7 +70,7 @@
onSwipeableWillOpen={onSwipeableWillOpen}
currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
key={sidebarItem.threadInfo.id}
- extendArrow={index > 0}
+ extendArrow={index < numOfSidebarsWithExtendedArrow}
/>
);
} 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,14 +1,16 @@
// @flow
import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
-import ArrowLong from '../components/arrow-long.react';
+import ExtendedArrow from '../components/arrow-extended.react';
import Arrow from '../components/arrow.react';
+import Button from '../components/button.react';
import UnreadDot from '../components/unread-dot.react';
-import { SidebarItem } from './sidebar-item.react';
+import { useColors, useStyles } from '../themes/colors';
+import { SidebarItem, sidebarHeight } from './sidebar-item.react';
import SwipeableThread from './swipeable-thread.react';
type Props = {
@@ -19,6 +21,9 @@
+extendArrow: boolean,
};
function ChatThreadListSidebar(props: Props): React.Node {
+ const colors = useColors();
+ const styles = useStyles(unboundStyles);
+
const {
sidebarInfo,
onSwipeableWillOpen,
@@ -30,8 +35,8 @@
let arrow;
if (extendArrow) {
arrow = (
- <View style={styles.longArrow}>
- <ArrowLong />
+ <View style={styles.extendedArrow}>
+ <ExtendedArrow />
</View>
);
} else {
@@ -42,8 +47,21 @@
);
}
+ const { threadInfo } = sidebarInfo;
+
+ const onPress = React.useCallback(() => onPressItem(threadInfo), [
+ threadInfo,
+ onPressItem,
+ ]);
+
return (
- <View style={styles.chatThreadListContainer}>
+ <Button
+ iosFormat="highlight"
+ iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
+ iosActiveOpacity={0.85}
+ style={styles.sidebar}
+ onPress={onPress}
+ >
{arrow}
<View style={styles.unreadIndicatorContainer}>
<UnreadDot unread={sidebarInfo.threadInfo.currentUser.unread} />
@@ -56,37 +74,44 @@
currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
iconSize={16}
>
- <SidebarItem sidebarInfo={sidebarInfo} onPressItem={onPressItem} />
+ <SidebarItem sidebarInfo={sidebarInfo} />
</SwipeableThread>
</View>
- </View>
+ </Button>
);
}
-const styles = StyleSheet.create({
+const unboundStyles = {
arrow: {
- left: 27.5,
+ left: 28,
position: 'absolute',
top: -12,
},
- chatThreadListContainer: {
- display: 'flex',
- flexDirection: 'row',
- },
- longArrow: {
+ extendedArrow: {
left: 28,
position: 'absolute',
- top: -19,
+ top: -6,
+ },
+ sidebar: {
+ alignItems: 'center',
+ flexDirection: 'row',
+ width: '100%',
+ height: sidebarHeight,
+ paddingLeft: 6,
+ paddingRight: 18,
+ backgroundColor: 'listBackground',
},
swipeableThreadContainer: {
flex: 1,
+ height: '100%',
},
unreadIndicatorContainer: {
- display: 'flex',
- justifyContent: 'center',
+ alignItems: 'center',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
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
@@ -1,20 +1,16 @@
// @flow
import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
-import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
+import type { 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 { useColors, useStyles } from '../themes/colors';
-import type { ViewStyle } from '../types/styles';
+import { useStyles } from '../themes/colors';
type Props = {
+sidebarInfo: SidebarInfo,
- +onPressItem: (threadInfo: ThreadInfo) => void,
- +style?: ?ViewStyle,
};
function SidebarItem(props: Props): React.Node {
const { lastUpdatedTime } = props.sidebarInfo;
@@ -24,49 +20,27 @@
const styles = useStyles(unboundStyles);
const unreadStyle = threadInfo.currentUser.unread ? styles.unread : null;
- const { onPressItem } = props;
- const onPress = React.useCallback(() => onPressItem(threadInfo), [
- threadInfo,
- onPressItem,
- ]);
-
- const colors = useColors();
-
- const sidebarStyle = React.useMemo(() => {
- return [styles.sidebar, props.style];
- }, [props.style, styles.sidebar]);
-
return (
- <Button
- iosFormat="highlight"
- iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
- iosActiveOpacity={0.85}
- style={sidebarStyle}
- onPress={onPress}
- >
+ <View style={styles.itemContainer}>
<SingleLine style={[styles.name, unreadStyle]}>
{threadInfo.uiName}
</SingleLine>
<Text style={[styles.lastActivity, unreadStyle]}>{lastActivity}</Text>
- </Button>
+ </View>
);
}
const sidebarHeight = 30;
const unboundStyles = {
+ itemContainer: {
+ flexDirection: 'row',
+ height: sidebarHeight,
+ alignItems: 'center',
+ },
unread: {
color: 'listForegroundLabel',
fontWeight: 'bold',
},
- sidebar: {
- height: sidebarHeight,
- flexDirection: 'row',
- display: 'flex',
- paddingLeft: 6,
- paddingRight: 18,
- alignItems: 'center',
- backgroundColor: 'listBackground',
- },
name: {
color: 'listForegroundSecondaryLabel',
flex: 1,
diff --git a/native/chat/sidebar-list-modal.react.js b/native/chat/sidebar-list-modal.react.js
--- a/native/chat/sidebar-list-modal.react.js
+++ b/native/chat/sidebar-list-modal.react.js
@@ -1,17 +1,19 @@
// @flow
import * as React from 'react';
-import { TextInput, FlatList, StyleSheet, View } from 'react-native';
+import { TextInput, FlatList, View } from 'react-native';
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
-import ArrowLong from '../components/arrow-long.react';
+import ExtendedArrow from '../components/arrow-extended.react';
+import Arrow from '../components/arrow.react';
+import Button from '../components/button.react';
import Modal from '../components/modal.react';
import Search from '../components/search.react';
import type { RootNavigationProp } from '../navigation/root-navigator.react';
import type { NavigationRoute } from '../navigation/route-names';
-import { useIndicatorStyle } from '../themes/colors';
+import { useColors, useIndicatorStyle, useStyles } from '../themes/colors';
import { waitForModalInputFocus } from '../utils/timers';
import { useNavigateToThread } from './message-list-types';
import { SidebarItem } from './sidebar-item.react';
@@ -69,25 +71,28 @@
[navigateToThread, setSearchState],
);
+ const styles = useStyles(unboundStyles);
+
+ const numOfSidebarsWithExtendedArrow = React.useMemo(
+ () => listData.length - 1,
+ [listData],
+ );
+
const renderItem = React.useCallback(
- (row: { item: SidebarInfo, ... }) => {
+ (row: { item: SidebarInfo, index: number, ... }) => {
+ let extendArrow: boolean = false;
+ if (row.index < numOfSidebarsWithExtendedArrow) {
+ extendArrow = true;
+ }
return (
- <View style={styles.sidebarRowContainer}>
- <View style={styles.arrow}>
- <ArrowLong />
- </View>
- <View style={styles.spacer} />
- <View style={styles.sidebarItemContainer}>
- <SidebarItem
- sidebarInfo={row.item}
- onPressItem={onPressItem}
- style={styles.sidebar}
- />
- </View>
- </View>
+ <Item
+ item={row.item}
+ onPressItem={onPressItem}
+ extendArrow={extendArrow}
+ />
);
},
- [onPressItem],
+ [onPressItem, numOfSidebarsWithExtendedArrow],
);
const indicatorStyle = useIndicatorStyle();
@@ -113,16 +118,70 @@
);
}
-const styles = StyleSheet.create({
+function Item(props: {
+ item: SidebarInfo,
+ onPressItem: (threadInfo: ThreadInfo) => void,
+ extendArrow: boolean,
+}): React.Node {
+ const { item, onPressItem, extendArrow } = props;
+ const { threadInfo } = item;
+
+ const onPressButton = React.useCallback(() => onPressItem(threadInfo), [
+ onPressItem,
+ threadInfo,
+ ]);
+
+ const colors = useColors();
+ const styles = useStyles(unboundStyles);
+
+ let arrow;
+ if (extendArrow) {
+ arrow = (
+ <View style={styles.extendedArrow}>
+ <ExtendedArrow />
+ </View>
+ );
+ } else {
+ arrow = (
+ <View style={styles.arrow}>
+ <Arrow />
+ </View>
+ );
+ }
+
+ return (
+ <Button
+ iosFormat="highlight"
+ iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
+ iosActiveOpacity={0.85}
+ style={styles.sidebar}
+ onPress={onPressButton}
+ >
+ <View style={styles.sidebarRowContainer}>
+ {arrow}
+ <View style={styles.spacer} />
+ <View style={styles.sidebarItemContainer}>
+ <SidebarItem sidebarInfo={item} />
+ </View>
+ </View>
+ </Button>
+ );
+}
+
+const unboundStyles = {
arrow: {
position: 'absolute',
- top: -19,
+ top: -12,
+ },
+ extendedArrow: {
+ position: 'absolute',
+ top: -6,
},
search: {
marginBottom: 8,
},
sidebar: {
- backgroundColor: 'transparent',
+ backgroundColor: 'listBackground',
paddingLeft: 0,
paddingRight: 5,
},
@@ -136,6 +195,6 @@
spacer: {
width: 30,
},
-});
+};
export default SidebarListModal;
diff --git a/native/components/arrow-extended.react.js b/native/components/arrow-extended.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/arrow-extended.react.js
@@ -0,0 +1,23 @@
+// @flow
+
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function ExtendedArrow(): React.Node {
+ return (
+ <Svg
+ width={27}
+ height={38}
+ viewBox="0 0 27 38"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <Path
+ d="M 1 19 H 0.5 v 26 h 1 V 26 Z m 25.354 0.354 a 0.5 0.5 0 0 0 0 -0.708 l -3.182 -3.181 a 0.5 0.5 0 1 0 -0.707 0.707 L 25.293 19 l -2.828 2.828 a 0.5 0.5 0 1 0 0.707 0.707 l 3.182 -3.181 Z M 0.5 0 v 26 h 1 V 0 h -1 Z m 0.5 19.5 h 25 v -1 H 1 v 0.5 Z"
+ fill="#808080"
+ fillRule="nonzero"
+ />
+ </Svg>
+ );
+}
+
+export default ExtendedArrow;
diff --git a/native/components/arrow-long.react.js b/native/components/arrow-long.react.js
deleted file mode 100644
--- a/native/components/arrow-long.react.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import Svg, { Path } from 'react-native-svg';
-
-function ArrowLong(): React.Node {
- return (
- <Svg
- width={27}
- height={38}
- viewBox="0 0 27 38"
- xmlns="http://www.w3.org/2000/svg"
- >
- <Path
- d="M0 0h1v33.5h23.793l-2.328-2.328a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .637-.057l.07.058 3.182 3.181a.5.5 0 0 1 .057.638l-.057.07-3.182 3.181a.5.5 0 0 1-.765-.637l.058-.07L24.79 34.5H0V0Z"
- fill="#808080"
- fillRule="nonzero"
- />
- </Svg>
- );
-}
-
-export default ArrowLong;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 5:50 PM (20 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2499781
Default Alt Text
D5491.diff (12 KB)

Event Timeline