Add current user profile to header and enlarge the header

zio/stable
Paul Frazee 2022-11-15 13:11:01 -06:00
parent ccae52f612
commit 60c72087ff
3 changed files with 49 additions and 13 deletions

View File

@ -42,6 +42,11 @@ export const ProfileHeader = observer(function ProfileHeader({
const onPressBack = () => {
store.nav.tab.goBack()
}
const onPressMyAvatar = () => {
if (store.me.handle) {
store.nav.navigate(`/profile/${store.me.handle}`)
}
}
const onPressToggleFollow = () => {
view?.toggleFollowing().then(
() => {
@ -143,12 +148,21 @@ export const ProfileHeader = observer(function ProfileHeader({
{store.nav.tab.canGoBack ? (
<TouchableOpacity style={styles.backButton} onPress={onPressBack}>
<FontAwesomeIcon
size={14}
size={18}
icon="angle-left"
style={styles.backIcon}
/>
</TouchableOpacity>
) : undefined}
{store.me.did ? (
<TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}>
<UserAvatar
size={30}
handle={store.me.handle || ''}
displayName={store.me.displayName}
/>
</TouchableOpacity>
) : undefined}
<View style={styles.avi}>
<UserAvatar
size={80}
@ -321,6 +335,14 @@ const styles = StyleSheet.create({
height: 14,
color: colors.black,
},
myAvatar: {
position: 'absolute',
top: 10,
right: 12,
backgroundColor: '#ffff',
padding: 1,
borderRadius: 30,
},
avi: {
position: 'absolute',
top: 80,

View File

@ -1,7 +1,8 @@
import React from 'react'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {s, colors} from '../../lib/styles'
import {UserAvatar} from './UserAvatar'
import {colors} from '../../lib/styles'
import {useStores} from '../../../state'
export function ViewHeader({
@ -15,15 +16,16 @@ export function ViewHeader({
const onPressBack = () => {
store.nav.tab.goBack()
}
const onPressAvatar = () => {
if (store.me.handle) {
store.nav.navigate(`/profile/${store.me.handle}`)
}
}
return (
<View style={styles.header}>
{store.nav.tab.canGoBack ? (
<TouchableOpacity onPress={onPressBack}>
<FontAwesomeIcon
size={14}
icon="angle-left"
style={styles.backIcon}
/>
<TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 3}} />
</TouchableOpacity>
) : (
<View style={styles.cornerPlaceholder} />
@ -36,7 +38,17 @@ export function ViewHeader({
</Text>
) : undefined}
</View>
<View style={styles.cornerPlaceholder} />
{store.me.did ? (
<TouchableOpacity onPress={onPressAvatar}>
<UserAvatar
size={24}
handle={store.me.handle || ''}
displayName={store.me.displayName}
/>
</TouchableOpacity>
) : (
<View style={styles.cornerPlaceholder} />
)}
</View>
)
}
@ -47,7 +59,8 @@ const styles = StyleSheet.create({
alignItems: 'center',
backgroundColor: colors.white,
paddingHorizontal: 12,
paddingBottom: 6,
paddingTop: 2,
paddingBottom: 8,
borderBottomColor: colors.gray1,
borderBottomWidth: 1,
},
@ -70,8 +83,8 @@ const styles = StyleSheet.create({
},
cornerPlaceholder: {
width: 14,
height: 14,
width: 24,
height: 24,
},
backIcon: {width: 14, height: 14},
backIcon: {width: 24, height: 24},
})

View File

@ -115,6 +115,7 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
renderItem = (item: any) => (
<View style={s.p5}>
<ErrorMessage
dark
message={item.error}
onPressTryAgain={onPressTryAgain}
/>