Enlarge the view header, left align the title, and add a compose button

zio/stable
Paul Frazee 2022-11-28 09:29:35 -06:00
parent cb5210d24d
commit 1784a4912d
5 changed files with 37 additions and 75 deletions

View File

@ -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,

View File

@ -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,

View File

@ -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}

View File

@ -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}

View File

@ -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"