zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

improve drawer reflow for large text (#1464)

zio/stable
Eric Bailey 2023-09-15 17:18:09 -05:00 committed by GitHub
parent 754663e5c3
commit 3118e3e933
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/view/shell/Drawer.tsx
View File

@ -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')} &middot;{' '}
<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')} &middot;{' '}
<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,