Enlarge the view header, left align the title, and add a compose button
parent
cb5210d24d
commit
1784a4912d
|
@ -1,12 +1,6 @@
|
|||
import React, {useMemo} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {AtUri} from '../../../third-party/uri'
|
||||
|
@ -108,18 +102,6 @@ export const ProfileHeader = observer(function ProfileHeader({
|
|||
return (
|
||||
<View style={styles.outer}>
|
||||
<LoadingPlaceholder width="100%" height={120} />
|
||||
{store.nav.tab.canGoBack ? (
|
||||
<TouchableOpacity style={styles.backButton} onPress={onPressBack}>
|
||||
<FontAwesomeIcon
|
||||
size={18}
|
||||
icon="angle-left"
|
||||
style={styles.backIcon}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
) : undefined}
|
||||
<TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
|
||||
<MagnifyingGlassIcon size={19} style={styles.searchIcon} />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.avi}>
|
||||
<LoadingPlaceholder
|
||||
width={80}
|
||||
|
@ -179,18 +161,6 @@ export const ProfileHeader = observer(function ProfileHeader({
|
|||
return (
|
||||
<View style={styles.outer}>
|
||||
<UserBanner handle={view.handle} />
|
||||
{store.nav.tab.canGoBack ? (
|
||||
<TouchableOpacity style={styles.backButton} onPress={onPressBack}>
|
||||
<FontAwesomeIcon
|
||||
size={18}
|
||||
icon="angle-left"
|
||||
style={styles.backIcon}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
) : undefined}
|
||||
<TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
|
||||
<MagnifyingGlassIcon size={19} style={styles.searchIcon} />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.avi}>
|
||||
<UserAvatar
|
||||
size={80}
|
||||
|
@ -353,30 +323,6 @@ const styles = StyleSheet.create({
|
|||
width: '100%',
|
||||
height: 120,
|
||||
},
|
||||
backButton: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
left: 12,
|
||||
backgroundColor: '#ffff',
|
||||
padding: 6,
|
||||
borderRadius: 30,
|
||||
},
|
||||
backIcon: {
|
||||
width: 14,
|
||||
height: 14,
|
||||
color: colors.black,
|
||||
},
|
||||
searchBtn: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 12,
|
||||
backgroundColor: '#ffff',
|
||||
padding: 5,
|
||||
borderRadius: 30,
|
||||
},
|
||||
searchIcon: {
|
||||
color: colors.black,
|
||||
},
|
||||
avi: {
|
||||
position: 'absolute',
|
||||
top: 80,
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {UserAvatar} from './UserAvatar'
|
||||
import {colors} from '../../lib/styles'
|
||||
import {MagnifyingGlassIcon} from '../../lib/icons'
|
||||
import {useStores} from '../../../state'
|
||||
|
@ -9,14 +8,19 @@ import {useStores} from '../../../state'
|
|||
export function ViewHeader({
|
||||
title,
|
||||
subtitle,
|
||||
onPost,
|
||||
}: {
|
||||
title: string
|
||||
subtitle?: string
|
||||
onPost?: () => void
|
||||
}) {
|
||||
const store = useStores()
|
||||
const onPressBack = () => {
|
||||
store.nav.tab.goBack()
|
||||
}
|
||||
const onPressCompose = () => {
|
||||
store.shell.openComposer({onPost})
|
||||
}
|
||||
const onPressSearch = () => {
|
||||
store.nav.navigate(`/search`)
|
||||
}
|
||||
|
@ -26,9 +30,7 @@ export function ViewHeader({
|
|||
<TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
|
||||
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={styles.cornerPlaceholder} />
|
||||
)}
|
||||
) : undefined}
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
{subtitle ? (
|
||||
|
@ -37,8 +39,17 @@ export function ViewHeader({
|
|||
</Text>
|
||||
) : undefined}
|
||||
</View>
|
||||
<TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}>
|
||||
<MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} />
|
||||
<TouchableOpacity onPress={onPressCompose} style={styles.btn}>
|
||||
<FontAwesomeIcon size={18} icon="plus" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={onPressSearch}
|
||||
style={[styles.btn, {marginLeft: 8}]}>
|
||||
<MagnifyingGlassIcon
|
||||
size={18}
|
||||
strokeWidth={3}
|
||||
style={styles.searchBtnIcon}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)
|
||||
|
@ -59,33 +70,28 @@ const styles = StyleSheet.create({
|
|||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'baseline',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
fontSize: 21,
|
||||
fontWeight: '600',
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
marginLeft: 3,
|
||||
fontSize: 18,
|
||||
marginLeft: 6,
|
||||
color: colors.gray4,
|
||||
maxWidth: 200,
|
||||
},
|
||||
|
||||
cornerPlaceholder: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
},
|
||||
backIcon: {width: 30, height: 30},
|
||||
searchBtn: {
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: colors.gray1,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 20,
|
||||
},
|
||||
searchBtnIcon: {
|
||||
color: colors.black,
|
||||
|
|
|
@ -94,15 +94,17 @@ export function HomeIconSolid({
|
|||
export function MagnifyingGlassIcon({
|
||||
style,
|
||||
size,
|
||||
strokeWidth = 2,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
size?: string | number
|
||||
strokeWidth?: number
|
||||
}) {
|
||||
return (
|
||||
<Svg
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
strokeWidth={strokeWidth}
|
||||
stroke="currentColor"
|
||||
width={size || 24}
|
||||
height={size || 24}
|
||||
|
|
|
@ -80,7 +80,11 @@ export const Home = observer(function Home({
|
|||
|
||||
return (
|
||||
<View style={s.flex1}>
|
||||
<ViewHeader title="Bluesky" subtitle="Private Beta" />
|
||||
<ViewHeader
|
||||
title="Bluesky"
|
||||
subtitle="Private Beta"
|
||||
onPost={onCreatePost}
|
||||
/>
|
||||
<Feed
|
||||
key="default"
|
||||
feed={defaultFeedView}
|
||||
|
|
|
@ -15,6 +15,7 @@ import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
|
|||
import {ErrorScreen} from '../com/util/ErrorScreen'
|
||||
import {ErrorMessage} from '../com/util/ErrorMessage'
|
||||
import {EmptyState} from '../com/util/EmptyState'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import Toast from '../com/util/Toast'
|
||||
import {s, colors} from '../lib/styles'
|
||||
|
||||
|
@ -219,8 +220,11 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
|
|||
renderItem = () => <View />
|
||||
}
|
||||
|
||||
const title =
|
||||
uiState.profile.displayName || uiState.profile.handle || params.name
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ViewHeader title={title} />
|
||||
{uiState.profile.hasError ? (
|
||||
<ErrorScreen
|
||||
title="Failed to load profile"
|
||||
|
|
Loading…
Reference in New Issue