Tweak approach to the viewheader

zio/stable
Paul Frazee 2023-02-23 12:26:25 -06:00
parent ac655a0cf4
commit a014b4e6cb
5 changed files with 15 additions and 14 deletions

View File

@ -22,6 +22,7 @@ import {s} from 'lib/styles'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
import {isDesktopWeb} from 'platform/detection'
export const FeedItem = observer(function ({ export const FeedItem = observer(function ({
item, item,
@ -108,8 +109,9 @@ export const FeedItem = observer(function ({
const isNoTop = isChild && !item._isThreadChild const isNoTop = isChild && !item._isThreadChild
const outerStyles = [ const outerStyles = [
styles.outer, styles.outer,
isDesktopWeb && styles.outerDesktopWeb,
pal.view, pal.view,
{borderTopColor: pal.colors.border}, {borderColor: pal.colors.border},
isSmallTop ? styles.outerSmallTop : undefined, isSmallTop ? styles.outerSmallTop : undefined,
isNoTop ? styles.outerNoTop : undefined, isNoTop ? styles.outerNoTop : undefined,
item._isThreadParent ? styles.outerNoBottom : undefined, item._isThreadParent ? styles.outerNoBottom : undefined,
@ -273,6 +275,11 @@ const styles = StyleSheet.create({
paddingRight: 15, paddingRight: 15,
paddingBottom: 8, paddingBottom: 8,
}, },
outerDesktopWeb: {
borderWidth: 1,
borderRadius: 4,
marginBottom: 10,
},
outerNoTop: { outerNoTop: {
borderTopWidth: 0, borderTopWidth: 0,
paddingTop: 0, paddingTop: 0,
@ -282,6 +289,7 @@ const styles = StyleSheet.create({
}, },
outerNoBottom: { outerNoBottom: {
paddingBottom: 2, paddingBottom: 2,
marginBottom: 0,
}, },
topReplyLine: { topReplyLine: {
position: 'absolute', position: 'absolute',

View File

@ -8,6 +8,7 @@ import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
import {isDesktopWeb} from '../../../platform/detection'
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10} const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
@ -33,6 +34,9 @@ export const ViewHeader = observer(function ViewHeader({
if (typeof canGoBack === 'undefined') { if (typeof canGoBack === 'undefined') {
canGoBack = store.nav.tab.canGoBack canGoBack = store.nav.tab.canGoBack
} }
if (isDesktopWeb) {
return undefined
}
return ( return (
<Container hideOnScroll={hideOnScroll || false}> <Container hideOnScroll={hideOnScroll || false}>
<TouchableOpacity <TouchableOpacity

View File

@ -1,9 +0,0 @@
import {observer} from 'mobx-react-lite'
export const ViewHeader = observer(function ViewHeader(_opts: {
title: string
canGoBack?: boolean
}) {
// TODO
return null
})

View File

@ -11,7 +11,6 @@ import {ScreenParams} from '../routes'
import {s} from 'lib/styles' import {s} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics' import {useAnalytics} from 'lib/analytics'
import {isWeb} from '../../platform/detection'
const HEADER_HEIGHT = 42 const HEADER_HEIGHT = 42
@ -92,7 +91,6 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
return ( return (
<View style={s.h100pct}> <View style={s.h100pct}>
{isWeb && <ViewHeader title="Home Feed" canGoBack={false} />}
<Feed <Feed
testID="homeFeed" testID="homeFeed"
key="default" key="default"
@ -103,7 +101,7 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
onScroll={onMainScroll} onScroll={onMainScroll}
headerOffset={HEADER_HEIGHT} headerOffset={HEADER_HEIGHT}
/> />
{!isWeb && <ViewHeader title="Bluesky" canGoBack={false} hideOnScroll />} <ViewHeader title="Bluesky" canGoBack={false} hideOnScroll />
{store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && ( {store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
<LoadLatestBtn onPress={onPressLoadLatest} /> <LoadLatestBtn onPress={onPressLoadLatest} />
)} )}

View File

@ -199,7 +199,7 @@ const styles = StyleSheet.create({
}, },
navItemCount: { navItemCount: {
position: 'absolute', position: 'absolute',
top: -5, top: 0,
left: 15, left: 15,
backgroundColor: colors.red3, backgroundColor: colors.red3,
color: colors.white, color: colors.white,