Move search btn into the viewheader

zio/stable
Paul Frazee 2022-11-20 12:25:11 -06:00
parent a21bcf10dd
commit c6108fb646
5 changed files with 40 additions and 91 deletions

View File

@ -20,6 +20,7 @@ import {
import {pluralize} from '../../lib/strings'
import {s, colors} from '../../lib/styles'
import {getGradient} from '../../lib/asset-gen'
import {MagnifyingGlassIcon} from '../../lib/icons'
import {DropdownBtn, DropdownItem} from '../util/DropdownBtn'
import Toast from '../util/Toast'
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
@ -43,10 +44,8 @@ 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 onPressSearch = () => {
store.nav.navigate(`/search`)
}
const onPressToggleFollow = () => {
view?.toggleFollowing().then(
@ -117,15 +116,9 @@ export const ProfileHeader = observer(function ProfileHeader({
/>
</TouchableOpacity>
) : undefined}
{store.me.did ? (
<TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}>
<UserAvatar
size={30}
handle={store.me.handle || ''}
displayName={store.me.displayName}
/>
</TouchableOpacity>
) : undefined}
<TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
<MagnifyingGlassIcon size={19} style={styles.searchIcon} />
</TouchableOpacity>
<View style={styles.avi}>
<LoadingPlaceholder
width={80}
@ -194,15 +187,9 @@ export const ProfileHeader = observer(function ProfileHeader({
/>
</TouchableOpacity>
) : undefined}
{store.me.did ? (
<TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}>
<UserAvatar
size={30}
handle={store.me.handle || ''}
displayName={store.me.displayName}
/>
</TouchableOpacity>
) : undefined}
<TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}>
<MagnifyingGlassIcon size={19} style={styles.searchIcon} />
</TouchableOpacity>
<View style={styles.avi}>
<UserAvatar
size={80}
@ -375,14 +362,17 @@ const styles = StyleSheet.create({
height: 14,
color: colors.black,
},
myAvatar: {
searchBtn: {
position: 'absolute',
top: 10,
right: 12,
backgroundColor: '#ffff',
padding: 1,
padding: 5,
borderRadius: 30,
},
searchIcon: {
color: colors.black,
},
avi: {
position: 'absolute',
top: 80,

View File

@ -3,6 +3,7 @@ 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'
export function ViewHeader({
@ -16,16 +17,14 @@ export function ViewHeader({
const onPressBack = () => {
store.nav.tab.goBack()
}
const onPressAvatar = () => {
if (store.me.handle) {
store.nav.navigate(`/profile/${store.me.handle}`)
}
const onPressSearch = () => {
store.nav.navigate(`/search`)
}
return (
<View style={styles.header}>
{store.nav.tab.canGoBack ? (
<TouchableOpacity onPress={onPressBack} style={styles.backIcon}>
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 3}} />
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
</TouchableOpacity>
) : (
<View style={styles.cornerPlaceholder} />
@ -38,17 +37,9 @@ export function ViewHeader({
</Text>
) : undefined}
</View>
{store.me.did ? (
<TouchableOpacity onPress={onPressAvatar}>
<UserAvatar
size={24}
handle={store.me.handle || ''}
displayName={store.me.displayName}
/>
</TouchableOpacity>
) : (
<View style={styles.cornerPlaceholder} />
)}
<TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}>
<MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} />
</TouchableOpacity>
</View>
)
}
@ -83,8 +74,22 @@ const styles = StyleSheet.create({
},
cornerPlaceholder: {
width: 24,
height: 24,
width: 30,
height: 30,
},
backIcon: {width: 30, height: 30},
searchBtn: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.gray1,
width: 30,
height: 30,
borderRadius: 15,
},
searchBtnIcon: {
color: colors.black,
position: 'relative',
top: -1,
},
backIcon: {width: 24, height: 24},
})

View File

@ -91,7 +91,7 @@ export function HomeIconSolid({
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function MangifyingGlassIcon({
export function MagnifyingGlassIcon({
style,
size,
}: {
@ -116,33 +116,6 @@ export function MangifyingGlassIcon({
)
}
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function MangifyingGlassIconSolid({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return (
<Svg
fill="none"
viewBox="0 0 24 24"
strokeWidth={3}
stroke="currentColor"
width={size || 24}
height={size || 24}
style={style}>
<Path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</Svg>
)
}
// https://github.com/Remix-Design/RemixIcon/blob/master/License
export function BellIcon({
style,

View File

@ -5,7 +5,6 @@ import useAppState from 'react-native-appstate-hook'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {ViewHeader} from '../com/util/ViewHeader'
import {Feed} from '../com/posts/Feed'
import {FAB} from '../com/util/FloatingActionButton'
import {useStores} from '../../state'
import {FeedModel} from '../../state/models/feed-view'
import {ScreenParams} from '../routes'
@ -81,6 +80,7 @@ export const Home = observer(function Home({
return (
<View style={s.flex1}>
<ViewHeader title="Bluesky" subtitle="Private Beta" />
<Feed
key="default"
feed={defaultFeedView}

View File

@ -42,8 +42,6 @@ import {
GridIconSolid,
HomeIcon,
HomeIconSolid,
MangifyingGlassIcon,
MangifyingGlassIconSolid,
BellIcon,
BellIconSolid,
} from '../../lib/icons'
@ -66,8 +64,6 @@ const Btn = ({
| 'home-solid'
| 'bell'
| 'bell-solid'
| 'search'
| 'search-solid'
notificationCount?: number
tabCount?: number
onPress?: (event: GestureResponderEvent) => void
@ -86,14 +82,6 @@ const Btn = ({
} else if (icon === 'home-solid') {
IconEl = HomeIconSolid
size = 24
} else if (icon === 'search') {
IconEl = MangifyingGlassIcon
size = 24
addedStyles = {position: 'relative', top: -1} as ViewStyle
} else if (icon === 'search-solid') {
IconEl = MangifyingGlassIconSolid
size = 24
addedStyles = {position: 'relative', top: -1} as ViewStyle
} else if (icon === 'bell') {
IconEl = BellIcon
size = 24
@ -148,7 +136,6 @@ export const MobileShell: React.FC = observer(() => {
store.nav.navigate('/')
}
}
const onPressSearch = () => store.nav.navigate('/search')
const onPressMenu = () => setMainMenuActive(true)
const onPressNotifications = () => store.nav.navigate('/notifications')
const onPressTabs = () => toggleTabsMenu(!isTabsSelectorActive)
@ -262,7 +249,6 @@ export const MobileShell: React.FC = observer(() => {
}
const isAtHome = store.nav.tab.current.url === '/'
const isAtSearch = store.nav.tab.current.url === '/search'
const isAtNotifications = store.nav.tab.current.url === '/notifications'
return (
<View style={styles.outerContainer}>
@ -327,11 +313,6 @@ export const MobileShell: React.FC = observer(() => {
onPress={onPressHome}
onLongPress={doNewTab('/')}
/>
<Btn
icon={isAtSearch ? 'search-solid' : 'search'}
onPress={onPressSearch}
onLongPress={doNewTab('/search')}
/>
{TABS_ENABLED ? (
<Btn
icon={isTabsSelectorActive ? 'clone' : ['far', 'clone']}