improve drawer reflow for large text (#1464)
parent
754663e5c3
commit
3118e3e933
|
@ -145,41 +145,45 @@ export const DrawerContent = observer(function DrawerContentImpl() {
|
|||
theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
|
||||
]}>
|
||||
<SafeAreaView style={s.flex1}>
|
||||
<View style={styles.main}>
|
||||
<TouchableOpacity
|
||||
testID="profileCardButton"
|
||||
accessibilityLabel="Profile"
|
||||
accessibilityHint="Navigates to your profile"
|
||||
onPress={onPressProfile}>
|
||||
<UserAvatar size={80} avatar={store.me.avatar} />
|
||||
<Text
|
||||
type="title-lg"
|
||||
style={[pal.text, s.bold, styles.profileCardDisplayName]}
|
||||
numberOfLines={1}>
|
||||
{store.me.displayName || store.me.handle}
|
||||
</Text>
|
||||
<Text
|
||||
type="2xl"
|
||||
style={[pal.textLight, styles.profileCardHandle]}
|
||||
numberOfLines={1}>
|
||||
@{store.me.handle}
|
||||
</Text>
|
||||
<Text
|
||||
type="xl"
|
||||
style={[pal.textLight, styles.profileCardFollowers]}>
|
||||
<Text type="xl-medium" style={pal.text}>
|
||||
{formatCountShortOnly(store.me.followersCount ?? 0)}
|
||||
</Text>{' '}
|
||||
{pluralize(store.me.followersCount || 0, 'follower')} ·{' '}
|
||||
<Text type="xl-medium" style={pal.text}>
|
||||
{formatCountShortOnly(store.me.followsCount ?? 0)}
|
||||
</Text>{' '}
|
||||
following
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<InviteCodes />
|
||||
<ScrollView style={styles.main}>
|
||||
<View style={{}}>
|
||||
<TouchableOpacity
|
||||
testID="profileCardButton"
|
||||
accessibilityLabel="Profile"
|
||||
accessibilityHint="Navigates to your profile"
|
||||
onPress={onPressProfile}>
|
||||
<UserAvatar size={80} avatar={store.me.avatar} />
|
||||
<Text
|
||||
type="title-lg"
|
||||
style={[pal.text, s.bold, styles.profileCardDisplayName]}
|
||||
numberOfLines={1}>
|
||||
{store.me.displayName || store.me.handle}
|
||||
</Text>
|
||||
<Text
|
||||
type="2xl"
|
||||
style={[pal.textLight, styles.profileCardHandle]}
|
||||
numberOfLines={1}>
|
||||
@{store.me.handle}
|
||||
</Text>
|
||||
<Text
|
||||
type="xl"
|
||||
style={[pal.textLight, styles.profileCardFollowers]}>
|
||||
<Text type="xl-medium" style={pal.text}>
|
||||
{formatCountShortOnly(store.me.followersCount ?? 0)}
|
||||
</Text>{' '}
|
||||
{pluralize(store.me.followersCount || 0, 'follower')} ·{' '}
|
||||
<Text type="xl-medium" style={pal.text}>
|
||||
{formatCountShortOnly(store.me.followsCount ?? 0)}
|
||||
</Text>{' '}
|
||||
following
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<InviteCodes style={{paddingLeft: 0}} />
|
||||
|
||||
<View style={{height: 10}} />
|
||||
|
||||
<MenuItem
|
||||
icon={
|
||||
isAtSearch ? (
|
||||
|
@ -313,6 +317,8 @@ export const DrawerContent = observer(function DrawerContentImpl() {
|
|||
accessibilityHint=""
|
||||
onPress={onPressSettings}
|
||||
/>
|
||||
|
||||
<View style={styles.smallSpacer} />
|
||||
<View style={styles.smallSpacer} />
|
||||
</ScrollView>
|
||||
<View style={styles.footer}>
|
||||
|
@ -405,7 +411,11 @@ function MenuItem({
|
|||
)
|
||||
}
|
||||
|
||||
const InviteCodes = observer(function InviteCodesImpl() {
|
||||
const InviteCodes = observer(function InviteCodesImpl({
|
||||
style,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
}) {
|
||||
const {track} = useAnalytics()
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
|
@ -418,7 +428,7 @@ const InviteCodes = observer(function InviteCodesImpl() {
|
|||
return (
|
||||
<TouchableOpacity
|
||||
testID="menuItemInviteCodes"
|
||||
style={[styles.inviteCodes]}
|
||||
style={[styles.inviteCodes, style]}
|
||||
onPress={onPress}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={
|
||||
|
@ -448,7 +458,6 @@ const InviteCodes = observer(function InviteCodesImpl() {
|
|||
const styles = StyleSheet.create({
|
||||
view: {
|
||||
flex: 1,
|
||||
paddingTop: 20,
|
||||
paddingBottom: 50,
|
||||
maxWidth: 300,
|
||||
},
|
||||
|
@ -524,6 +533,7 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
|
||||
footer: {
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
paddingRight: 20,
|
||||
|
|
Loading…
Reference in New Issue