Move search btn into the viewheader
parent
a21bcf10dd
commit
c6108fb646
|
@ -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,
|
||||
|
|
|
@ -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},
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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']}
|
||||
|
|
Loading…
Reference in New Issue