Add consistent view headers
parent
0fd2c3c4cb
commit
ab134cac93
|
@ -27,6 +27,9 @@ export const ProfileHeader = observer(function ProfileHeader({
|
|||
}) {
|
||||
const store = useStores()
|
||||
|
||||
const onPressBack = () => {
|
||||
store.nav.tab.goBack()
|
||||
}
|
||||
const onPressToggleFollow = () => {
|
||||
view?.toggleFollowing().then(
|
||||
() => {
|
||||
|
@ -82,6 +85,15 @@ export const ProfileHeader = observer(function ProfileHeader({
|
|||
return (
|
||||
<View style={styles.outer}>
|
||||
<Image style={styles.banner} source={BANNER} />
|
||||
{store.nav.tab.canGoBack ? (
|
||||
<TouchableOpacity style={styles.backButton} onPress={onPressBack}>
|
||||
<FontAwesomeIcon
|
||||
size={14}
|
||||
icon="angle-left"
|
||||
style={styles.backIcon}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
) : undefined}
|
||||
<View style={styles.avi}>
|
||||
<UserAvatar size={80} displayName={view.displayName} name={view.name} />
|
||||
</View>
|
||||
|
@ -177,6 +189,19 @@ const styles = StyleSheet.create({
|
|||
width: '100%',
|
||||
height: 120,
|
||||
},
|
||||
backButton: {
|
||||
position: 'absolute',
|
||||
top: 6,
|
||||
left: 8,
|
||||
backgroundColor: '#000a',
|
||||
padding: 6,
|
||||
borderRadius: 30,
|
||||
},
|
||||
backIcon: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
color: colors.white,
|
||||
},
|
||||
avi: {
|
||||
position: 'absolute',
|
||||
top: 80,
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
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 {useStores} from '../../../state'
|
||||
|
||||
export function ViewHeader({
|
||||
title,
|
||||
subtitle,
|
||||
}: {
|
||||
title: string
|
||||
subtitle?: string
|
||||
}) {
|
||||
const store = useStores()
|
||||
const onPressBack = () => {
|
||||
store.nav.tab.goBack()
|
||||
}
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
{store.nav.tab.canGoBack ? (
|
||||
<TouchableOpacity onPress={onPressBack}>
|
||||
<FontAwesomeIcon
|
||||
size={14}
|
||||
icon="angle-left"
|
||||
style={styles.backIcon}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={styles.cornerPlaceholder} />
|
||||
)}
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
{subtitle ? (
|
||||
<Text style={styles.subtitle} numberOfLines={1}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
) : undefined}
|
||||
</View>
|
||||
<View style={styles.cornerPlaceholder} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.white,
|
||||
paddingHorizontal: 12,
|
||||
paddingBottom: 6,
|
||||
borderBottomColor: colors.gray1,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
marginLeft: 3,
|
||||
color: colors.gray4,
|
||||
maxWidth: 200,
|
||||
},
|
||||
|
||||
cornerPlaceholder: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
},
|
||||
backIcon: {width: 14, height: 14},
|
||||
})
|
|
@ -1,6 +1,7 @@
|
|||
import React, {useState, useEffect, useMemo} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Feed} from '../com/posts/Feed'
|
||||
import {FAB} from '../com/util/FloatingActionButton'
|
||||
import {useStores} from '../../state'
|
||||
|
@ -53,6 +54,7 @@ export const Home = observer(function Home({
|
|||
|
||||
return (
|
||||
<View style={s.flex1}>
|
||||
<ViewHeader title="Bluesky" subtitle="Private Beta" />
|
||||
<Feed key="default" feed={defaultFeedView} scrollElRef={scrollElRef} />
|
||||
<FAB icon="pen-nib" onPress={onComposePress} />
|
||||
</View>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, {useState, useEffect} from 'react'
|
||||
import {StyleSheet, Text, View} from 'react-native'
|
||||
import {View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Feed} from '../com/notifications/Feed'
|
||||
import {colors} from '../lib/styles'
|
||||
import {useStores} from '../../state'
|
||||
import {NotificationsViewModel} from '../../state/models/notifications-view'
|
||||
import {ScreenParams} from '../routes'
|
||||
|
@ -38,22 +38,8 @@ export const Notifications = ({visible}: ScreenParams) => {
|
|||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Notifications</Text>
|
||||
</View>
|
||||
<ViewHeader title="Notifications" />
|
||||
{notesView && <Feed view={notesView} />}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
backgroundColor: colors.white,
|
||||
},
|
||||
title: {
|
||||
fontSize: 30,
|
||||
fontWeight: 'bold',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {makeRecordUri} from '../lib/strings'
|
||||
import {View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {makeRecordUri} from '../lib/strings'
|
||||
|
||||
export const PostLikedBy = ({visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
@ -15,5 +17,10 @@ export const PostLikedBy = ({visible, params}: ScreenParams) => {
|
|||
}
|
||||
}, [store, visible])
|
||||
|
||||
return <PostLikedByComponent uri={uri} />
|
||||
return (
|
||||
<View>
|
||||
<ViewHeader title="Liked by" />
|
||||
<PostLikedByComponent uri={uri} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {makeRecordUri} from '../lib/strings'
|
||||
import {View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {makeRecordUri} from '../lib/strings'
|
||||
|
||||
export const PostRepostedBy = ({visible, params}: ScreenParams) => {
|
||||
const store = useStores()
|
||||
|
@ -15,5 +17,10 @@ export const PostRepostedBy = ({visible, params}: ScreenParams) => {
|
|||
}
|
||||
}, [store, visible])
|
||||
|
||||
return <PostRepostedByComponent uri={uri} />
|
||||
return (
|
||||
<View>
|
||||
<ViewHeader title="Reposted by" />
|
||||
<PostRepostedByComponent uri={uri} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {makeRecordUri} from '../lib/strings'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
|
@ -15,5 +17,10 @@ export const PostThread = ({visible, params}: ScreenParams) => {
|
|||
}
|
||||
}, [visible, store.nav, name])
|
||||
|
||||
return <PostThreadComponent uri={uri} />
|
||||
return (
|
||||
<View>
|
||||
<ViewHeader title="Post" subtitle={`by ${name}`} />
|
||||
<PostThreadComponent uri={uri} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {StyleSheet, Text, View} from 'react-native'
|
||||
import {View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
|
@ -16,16 +17,8 @@ export const ProfileFollowers = ({visible, params}: ScreenParams) => {
|
|||
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.title}>Followers of {name}</Text>
|
||||
<ViewHeader title="Followers" subtitle={`of ${name}`} />
|
||||
<ProfileFollowersComponent name={name} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 21,
|
||||
fontWeight: 'bold',
|
||||
padding: 10,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {StyleSheet, Text, View} from 'react-native'
|
||||
import {View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
|
@ -16,16 +17,8 @@ export const ProfileFollows = ({visible, params}: ScreenParams) => {
|
|||
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.title}>Followed by {name}</Text>
|
||||
<ViewHeader title="Followed" subtitle={`by ${name}`} />
|
||||
<ProfileFollowsComponent name={name} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 21,
|
||||
fontWeight: 'bold',
|
||||
padding: 10,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {useStores} from '../../state'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {s, colors} from '../lib/styles'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {Link} from '../com/util/Link'
|
||||
import {UserAvatar} from '../com/util/UserAvatar'
|
||||
|
||||
|
@ -22,28 +23,30 @@ export const Settings = observer(function Settings({visible}: ScreenParams) {
|
|||
}
|
||||
|
||||
return (
|
||||
<View style={[s.flex1, s.pl10, s.pr10]}>
|
||||
<Text style={styles.title}>Settings</Text>
|
||||
<View style={[s.flexRow]}>
|
||||
<Text>Signed in as</Text>
|
||||
<View style={s.flex1} />
|
||||
<TouchableOpacity onPress={onPressSignout}>
|
||||
<Text style={[s.blue3, s.bold]}>Sign out</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Link href={`/profile/${store.me.name}`} title="Your profile">
|
||||
<View style={styles.profile}>
|
||||
<UserAvatar
|
||||
size={40}
|
||||
displayName={store.me.displayName}
|
||||
name={store.me.name || ''}
|
||||
/>
|
||||
<View style={[s.ml10]}>
|
||||
<Text style={[s.f18]}>{store.me.displayName}</Text>
|
||||
<Text style={[s.gray5]}>@{store.me.name}</Text>
|
||||
</View>
|
||||
<View style={[s.flex1]}>
|
||||
<ViewHeader title="Settings" />
|
||||
<View style={[s.mt10, s.pl10, s.pr10]}>
|
||||
<View style={[s.flexRow]}>
|
||||
<Text>Signed in as</Text>
|
||||
<View style={s.flex1} />
|
||||
<TouchableOpacity onPress={onPressSignout}>
|
||||
<Text style={[s.blue3, s.bold]}>Sign out</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</Link>
|
||||
<Link href={`/profile/${store.me.name}`} title="Your profile">
|
||||
<View style={styles.profile}>
|
||||
<UserAvatar
|
||||
size={40}
|
||||
displayName={store.me.displayName}
|
||||
name={store.me.name || ''}
|
||||
/>
|
||||
<View style={[s.ml10]}>
|
||||
<Text style={[s.f18]}>{store.me.displayName}</Text>
|
||||
<Text style={[s.gray5]}>@{store.me.name}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue