Page MenuHomePhabricator
Files F3356674

D5866.diff
No OneTemporary
Actions

D5866.diff
View Options

diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -1,7 +1,8 @@
// @flow
import * as React from 'react';
-import { View, FlatList } from 'react-native';
+import { FlatList } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
import { useSelector } from 'react-redux';
import {
@@ -15,6 +16,7 @@
import CommunityDrawerItemCommunity from './community-drawer-item-cummunity.react';
const maxDepth = 2;
+const safeAreaEdges = ['top'];
function CommunityDrawerContent(): React.Node {
const communities = useSelector(communityThreadSelector);
@@ -60,9 +62,9 @@
);
return (
- <View style={styles.drawerContent}>
+ <SafeAreaView style={styles.drawerContent} edges={safeAreaEdges}>
<FlatList data={drawerItemsData} renderItem={renderItem} />
- </View>
+ </SafeAreaView>
);
}
@@ -116,7 +118,7 @@
drawerContent: {
flex: 1,
paddingRight: 8,
- paddingTop: 52,
+ paddingTop: 8,
backgroundColor: 'drawerBackgroud',
},
};
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
--- a/native/navigation/community-drawer-item.react.js
+++ b/native/navigation/community-drawer-item.react.js
@@ -1,11 +1,12 @@
// @flow
import * as React from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+import { View, FlatList, TouchableOpacity } from 'react-native';
import type { ThreadInfo } from 'lib/types/thread-types';
import type { MessageListParams } from '../chat/message-list-types';
+import { SingleLine } from '../components/single-line.react';
import { useStyles } from '../themes/colors';
import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react';
@@ -68,8 +69,12 @@
<View>
<View style={styles.threadEntry}>
{itemExpandButton}
- <TouchableOpacity onPress={onPress}>
- <Text style={styles.title}>{threadInfo.uiName}</Text>
+ <TouchableOpacity
+ onPress={onPress}
+ style={styles.textTouchableWrapper}
+ onLongPress={onExpandToggled}
+ >
+ <SingleLine style={styles.title}>{threadInfo.uiName}</SingleLine>
</TouchableOpacity>
</View>
{children}
@@ -81,7 +86,6 @@
chatView: {
marginLeft: 16,
marginVertical: 6,
- overflow: 'hidden',
},
threadEntry: {
flexDirection: 'row',
@@ -90,6 +94,10 @@
color: 'drawerItemLabel',
fontSize: 16,
lineHeight: 24,
+ fontWeight: '500',
+ },
+ textTouchableWrapper: {
+ flex: 1,
},
};
diff --git a/native/navigation/community-drawer-navigator.react.js b/native/navigation/community-drawer-navigator.react.js
--- a/native/navigation/community-drawer-navigator.react.js
+++ b/native/navigation/community-drawer-navigator.react.js
@@ -6,7 +6,7 @@
type DrawerNavigationProp,
} from '@react-navigation/drawer';
import * as React from 'react';
-import { Dimensions, View } from 'react-native';
+import { View } from 'react-native';
import { useStyles } from '../themes/colors';
import type { AppNavigationProp } from './app-navigator.react';
@@ -65,7 +65,7 @@
flex: 1,
},
drawerStyle: {
- width: Dimensions.get('window').width - 36,
+ width: '80%',
},
};
diff --git a/native/navigation/expand-buttons.react.js b/native/navigation/expand-buttons.react.js
--- a/native/navigation/expand-buttons.react.js
+++ b/native/navigation/expand-buttons.react.js
@@ -2,12 +2,21 @@
import Icon from '@expo/vector-icons/FontAwesome';
import * as React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
import { useStyles } from '../themes/colors';
-const ICON_SIZE = 20;
-const PADDING_HORIZONTAL = 7.5;
+const iconSize = 12;
+const buttonSize = 24;
+const hitSlopValue = 6;
+const padding = (buttonSize - iconSize) / 2;
+
+const hitSlop = {
+ bottom: hitSlopValue,
+ left: hitSlopValue,
+ right: hitSlopValue,
+ top: hitSlopValue,
+};
type Props = {
+onPress: () => void,
@@ -20,9 +29,14 @@
? styles.expandButtonExpanded
: styles.expandButton;
const icon = props.expanded ? 'caret-down' : 'caret-right';
+
return (
- <TouchableOpacity onPress={props.onPress}>
- <Icon name={icon} size={ICON_SIZE} style={style} />
+ <TouchableOpacity
+ onPress={props.onPress}
+ hitSlop={hitSlop}
+ style={styles.wrapper}
+ >
+ <Icon name={icon} size={iconSize} style={style} />
</TouchableOpacity>
);
}
@@ -30,26 +44,30 @@
function ExpandButtonDisabled(): React.Node {
const styles = useStyles(unboundStyles);
return (
- <Icon
- name="caret-right"
- size={ICON_SIZE}
- style={styles.expandButtonDisabled}
- />
+ <View style={styles.wrapper}>
+ <Icon
+ name="caret-right"
+ size={iconSize}
+ style={styles.expandButtonDisabled}
+ />
+ </View>
);
}
const unboundStyles = {
expandButton: {
color: 'drawerExpandButton',
- paddingHorizontal: PADDING_HORIZONTAL,
},
expandButtonDisabled: {
color: 'drawerExpandButtonDisabled',
- paddingHorizontal: PADDING_HORIZONTAL,
},
expandButtonExpanded: {
color: 'drawerExpandButton',
- paddingHorizontal: PADDING_HORIZONTAL,
+ },
+ wrapper: {
+ width: buttonSize,
+ alignItems: 'center',
+ padding: padding,
},
};
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -88,10 +88,10 @@
siweButton: 'white',
siweButtonText: '#1F1F1F',
drawerExpandButton: '#808080',
- drawerExpandButtonDisabled: '#404040',
- drawerItemLabel: '#CCCCCC',
- drawerOpenCommunityBackground: '#333333',
- drawerBackgroud: '#404040',
+ drawerExpandButtonDisabled: '#CCCCCC',
+ drawerItemLabel: '#0A0A0A',
+ drawerOpenCommunityBackground: '#F5F5F5',
+ drawerBackgroud: '#FFFFFF',
});
export type Colors = $Exact<typeof light>;
@@ -175,8 +175,8 @@
drawerExpandButton: '#808080',
drawerExpandButtonDisabled: '#404040',
drawerItemLabel: '#CCCCCC',
- drawerOpenCommunityBackground: '#333333',
- drawerBackgroud: '#404040',
+ drawerOpenCommunityBackground: '#191919',
+ drawerBackgroud: '#1F1F1F',
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 7:56 PM (20 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577183
Default Alt Text
D5866.diff (6 KB)

Event Timeline