Add current user profile to header and enlarge the header
parent
ccae52f612
commit
60c72087ff
|
@ -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,
|
||||
|
|
|
@ -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},
|
||||
})
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue