Move feeds screen into common navigator, handle usages (#4365)
* Move feeds screen into common navigator, handle usages * Add link to Feeds from home screen (#4366) * Add link to feeds to home screen header * Center logo * Replace icons * Tweak spacing * Tweak spacing * Swap icon, sizing * Buttonize, size * Make menu same alignment on all screens * Remove FeedsTab support, enable drawer swipe on MessagesTab * Add note * Vertically align header * Swap in Pin * Use hashtag icon * Remove png * Fix reference * Ensure alignment with home and other screens
This commit is contained in:
Eric Bailey
GitHub
parent
3573f7ea40
commit
4b6609d48b
29 changed files with 155 additions and 167 deletions
|
|
@ -5,7 +5,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
|
|||
import {FeedSourceInfo} from '#/state/queries/feed'
|
||||
import {useSession} from '#/state/session'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
|
||||
import {TabBar} from '../pager/TabBar'
|
||||
import {HomeHeaderLayout} from './HomeHeaderLayout'
|
||||
|
|
@ -39,12 +38,7 @@ export function HomeHeader(
|
|||
}, [hasPinnedCustom, feeds])
|
||||
|
||||
const onPressFeedsLink = React.useCallback(() => {
|
||||
if (isWeb) {
|
||||
navigation.navigate('Feeds')
|
||||
} else {
|
||||
navigation.navigate('FeedsTab')
|
||||
navigation.popToTop()
|
||||
}
|
||||
navigation.navigate('Feeds')
|
||||
}, [navigation])
|
||||
|
||||
const onSelect = React.useCallback(
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import Animated from 'react-native-reanimated'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {CogIcon} from '#/lib/icons'
|
||||
import {useSession} from '#/state/session'
|
||||
import {useShellLayout} from '#/state/shell/shell-layout'
|
||||
import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {Logo} from '#/view/icons/Logo'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
|
||||
import {Link} from '#/components/Link'
|
||||
import {useKawaiiMode} from '../../../state/preferences/kawaii'
|
||||
import {Link} from '../util/Link'
|
||||
import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
|
||||
|
||||
export function HomeHeaderLayout(props: {
|
||||
|
|
@ -38,7 +34,7 @@ function HomeHeaderLayoutDesktopAndTablet({
|
|||
children: React.ReactNode
|
||||
tabBarAnchor: JSX.Element | null | undefined
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const t = useTheme()
|
||||
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
|
||||
const {headerHeight} = useShellLayout()
|
||||
const {hasSession} = useSession()
|
||||
|
|
@ -51,31 +47,46 @@ function HomeHeaderLayoutDesktopAndTablet({
|
|||
{hasSession && (
|
||||
<View
|
||||
style={[
|
||||
pal.view,
|
||||
pal.border,
|
||||
a.relative,
|
||||
a.flex_row,
|
||||
a.justify_end,
|
||||
a.align_center,
|
||||
a.pt_lg,
|
||||
a.px_md,
|
||||
a.pb_2xs,
|
||||
t.atoms.bg,
|
||||
t.atoms.border_contrast_low,
|
||||
styles.bar,
|
||||
styles.topBar,
|
||||
kawaii && {paddingTop: 4, paddingBottom: 0},
|
||||
]}>
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.inset_0,
|
||||
a.pt_lg,
|
||||
a.m_auto,
|
||||
kawaii && {paddingTop: 4, paddingBottom: 0},
|
||||
{
|
||||
width: kawaii ? 60 : 28,
|
||||
},
|
||||
]}>
|
||||
<Logo width={kawaii ? 60 : 28} />
|
||||
</View>
|
||||
|
||||
<Link
|
||||
href="/settings/following-feed"
|
||||
to="/feeds"
|
||||
hitSlop={10}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Following Feed Preferences`)}
|
||||
accessibilityHint="">
|
||||
<FontAwesomeIcon
|
||||
icon="sliders"
|
||||
style={pal.textLight as FontAwesomeIconStyle}
|
||||
/>
|
||||
</Link>
|
||||
<Logo width={kawaii ? 60 : 28} />
|
||||
<Link
|
||||
href="/settings/saved-feeds"
|
||||
hitSlop={10}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Edit Saved Feeds`)}
|
||||
accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}>
|
||||
<CogIcon size={22} strokeWidth={2} style={pal.textLight} />
|
||||
label={_(msg`View your feeds and explore more`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="square"
|
||||
style={[
|
||||
a.justify_center,
|
||||
{
|
||||
marginTop: -4,
|
||||
},
|
||||
]}>
|
||||
<FeedsIcon size="md" fill={t.atoms.text_contrast_medium.color} />
|
||||
</Link>
|
||||
</View>
|
||||
)}
|
||||
|
|
@ -85,8 +96,8 @@ function HomeHeaderLayoutDesktopAndTablet({
|
|||
headerHeight.value = e.nativeEvent.layout.height
|
||||
}}
|
||||
style={[
|
||||
pal.view,
|
||||
pal.border,
|
||||
t.atoms.bg,
|
||||
t.atoms.border_contrast_low,
|
||||
styles.bar,
|
||||
styles.tabBar,
|
||||
headerMinimalShellTransform,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native'
|
||||
import Animated from 'react-native-reanimated'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
|
|
@ -15,10 +13,13 @@ import {usePalette} from 'lib/hooks/usePalette'
|
|||
import {isWeb} from 'platform/detection'
|
||||
import {Logo} from '#/view/icons/Logo'
|
||||
import {atoms} from '#/alf'
|
||||
import {useTheme} from '#/alf'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
|
||||
import {Link as Link2} from '#/components/Link'
|
||||
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
|
||||
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
|
||||
import {Link} from '#/components/Link'
|
||||
import {IS_DEV} from '#/env'
|
||||
import {Link} from '../util/Link'
|
||||
|
||||
export function HomeHeaderLayoutMobile({
|
||||
children,
|
||||
|
|
@ -26,6 +27,7 @@ export function HomeHeaderLayoutMobile({
|
|||
children: React.ReactNode
|
||||
tabBarAnchor: JSX.Element | null | undefined
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const setDrawerOpen = useSetDrawerOpen()
|
||||
|
|
@ -54,11 +56,7 @@ export function HomeHeaderLayoutMobile({
|
|||
msg`Access profile and other navigation links`,
|
||||
)}
|
||||
hitSlop={HITSLOP_10}>
|
||||
<FontAwesomeIcon
|
||||
icon="bars"
|
||||
size={18}
|
||||
color={pal.colors.textLight}
|
||||
/>
|
||||
<Menu size="lg" fill={t.atoms.text_contrast_medium.color} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View>
|
||||
|
|
@ -74,22 +72,28 @@ export function HomeHeaderLayoutMobile({
|
|||
{width: 100},
|
||||
]}>
|
||||
{IS_DEV && (
|
||||
<Link2 to="/sys/debug">
|
||||
<Link to="/sys/debug">
|
||||
<ColorPalette size="md" />
|
||||
</Link2>
|
||||
</Link>
|
||||
)}
|
||||
{hasSession && (
|
||||
<Link
|
||||
testID="viewHeaderHomeFeedPrefsBtn"
|
||||
href="/settings/following-feed"
|
||||
to="/feeds"
|
||||
hitSlop={HITSLOP_10}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Following Feed Preferences`)}
|
||||
accessibilityHint="">
|
||||
<FontAwesomeIcon
|
||||
icon="sliders"
|
||||
style={pal.textLight as FontAwesomeIconStyle}
|
||||
/>
|
||||
label={_(msg`View your feeds and explore more`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="square"
|
||||
style={[
|
||||
a.justify_center,
|
||||
{
|
||||
marginTop: 2,
|
||||
marginRight: -6,
|
||||
},
|
||||
]}>
|
||||
<FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} />
|
||||
</Link>
|
||||
)}
|
||||
</View>
|
||||
|
|
@ -113,8 +117,8 @@ const styles = StyleSheet.create({
|
|||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 5,
|
||||
width: '100%',
|
||||
},
|
||||
title: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue