diff options
Diffstat (limited to 'src/view/com/home')
| -rw-r--r-- | src/view/com/home/HomeHeaderLayout.web.tsx | 126 | ||||
| -rw-r--r-- | src/view/com/home/HomeHeaderLayoutMobile.tsx | 124 |
2 files changed, 80 insertions, 170 deletions
diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index bdfc2c7ff..1dc67b6c3 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,26 +1,27 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' +import {View} from 'react-native' import Animated from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useKawaiiMode} from '#/state/preferences/kawaii' import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' +import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile' import {Logo} from '#/view/icons/Logo' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf' +import {ButtonIcon} from '#/components/Button' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' -import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { children: React.ReactNode tabBarAnchor: JSX.Element | null | undefined }) { - const {isMobile} = useWebMediaQueries() - if (isMobile) { + const {gtMobile} = useBreakpoints() + if (!gtMobile) { return <HomeHeaderLayoutMobile {...props} /> } else { return <HomeHeaderLayoutDesktopAndTablet {...props} /> @@ -40,98 +41,43 @@ function HomeHeaderLayoutDesktopAndTablet({ const {hasSession} = useSession() const {_} = useLingui() const kawaii = useKawaiiMode() + const gutter = useGutterStyles() return ( <> {hasSession && ( - <View - style={[ - 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, - kawaii && {paddingTop: 22, paddingBottom: 16}, - ]}> + <Layout.Center> <View - style={[ - a.absolute, - a.inset_0, - a.pt_lg, - a.m_auto, - kawaii && {paddingTop: 4, paddingBottom: 0}, - { - width: kawaii ? 84 : 28, - }, - ]}> - <Logo width={kawaii ? 60 : 28} /> + style={[a.flex_row, a.align_center, a.pt_md, gutter, t.atoms.bg]}> + <View style={{width: 34}} /> + <View style={[a.flex_1, a.align_center, a.justify_center]}> + <Logo width={kawaii ? 60 : 28} /> + </View> + <Link + to="/feeds" + hitSlop={10} + label={_(msg`View your feeds and explore more`)} + size="small" + variant="ghost" + color="secondary" + shape="square" + style={[a.justify_center]}> + <ButtonIcon icon={FeedsIcon} size="lg" /> + </Link> </View> - - <Link - to="/feeds" - hitSlop={10} - 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> + </Layout.Center> )} {tabBarAnchor} - <Animated.View - onLayout={e => { - headerHeight.set(e.nativeEvent.layout.height) - }} - style={[ - t.atoms.bg, - t.atoms.border_contrast_low, - styles.bar, - styles.tabBar, - headerMinimalShellTransform, - ]}> - {children} - </Animated.View> + <Layout.Center + style={[a.sticky, a.z_10, a.align_center, t.atoms.bg, {top: 0}]}> + <Animated.View + onLayout={e => { + headerHeight.set(e.nativeEvent.layout.height) + }} + style={[headerMinimalShellTransform]}> + {children} + </Animated.View> + </Layout.Center> </> ) } - -const styles = StyleSheet.create({ - bar: { - // @ts-ignore Web only - left: 'calc(50% - 300px)', - width: 600, - borderLeftWidth: 1, - borderRightWidth: 1, - }, - topBar: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 18, - paddingTop: 16, - paddingBottom: 8, - }, - tabBar: { - // @ts-ignore Web only - position: 'sticky', - top: 0, - flexDirection: 'column', - alignItems: 'center', - borderLeftWidth: 1, - borderRightWidth: 1, - zIndex: 1, - }, -}) diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 832396092..e48c2cc89 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,25 +1,22 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {View} from 'react-native' import Animated from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {HITSLOP_10} from '#/lib/constants' +import {PressableScale} from '#/lib/custom-animations/PressableScale' +import {useHaptics} from '#/lib/haptics' import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' -import {usePalette} from '#/lib/hooks/usePalette' -import {isWeb} from '#/platform/detection' +import {emitSoftReset} from '#/state/events' import {useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' 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 {atoms as a, useTheme} from '#/alf' +import {ButtonIcon} from '#/components/Button' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' -import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' -import {IS_DEV} from '#/env' export function HomeHeaderLayoutMobile({ children, @@ -28,58 +25,50 @@ export function HomeHeaderLayoutMobile({ tabBarAnchor: JSX.Element | null | undefined }) { const t = useTheme() - const pal = usePalette('default') const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() const {headerHeight} = useShellLayout() const headerMinimalShellTransform = useMinimalShellHeaderTransform() const {hasSession} = useSession() - - const onPressAvi = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) + const playHaptic = useHaptics() return ( <Animated.View - style={[pal.border, styles.tabBar, headerMinimalShellTransform]} + style={[ + a.fixed, + a.z_10, + t.atoms.bg, + { + top: 0, + left: 0, + right: 0, + }, + headerMinimalShellTransform, + ]} onLayout={e => { headerHeight.set(e.nativeEvent.layout.height) }}> - <View style={[pal.view, styles.topBar]}> - <View style={[{width: 100}]}> - <TouchableOpacity - testID="viewHeaderDrawerBtn" - onPress={onPressAvi} - accessibilityRole="button" - accessibilityLabel={_(msg`Open navigation`)} - accessibilityHint={_( - msg`Access profile and other navigation links`, - )} - hitSlop={HITSLOP_10}> - <Menu size="lg" fill={t.atoms.text_contrast_medium.color} /> - </TouchableOpacity> - </View> - <View> - <Logo width={30} /> + <Layout.Header.Outer noBottomBorder> + <Layout.Header.Slot> + <Layout.Header.MenuButton /> + </Layout.Header.Slot> + + <View style={[a.flex_1, a.align_center]}> + <PressableScale + targetScale={0.9} + onPress={() => { + emitSoftReset() + }} + onPressIn={() => { + playHaptic('Heavy') + }} + onPressOut={() => { + playHaptic('Light') + }}> + <Logo width={30} /> + </PressableScale> </View> - <View - style={[ - atoms.flex_row, - atoms.justify_end, - atoms.align_center, - atoms.gap_md, - {width: 100}, - ]}> - {IS_DEV && ( - <> - <Link - label="View storybook" - to="/sys/debug" - testID="storybookBtn"> - <ColorPalette size="md" /> - </Link> - </> - )} + + <Layout.Header.Slot> {hasSession && ( <Link testID="viewHeaderHomeFeedPrefsBtn" @@ -93,40 +82,15 @@ export function HomeHeaderLayoutMobile({ style={[ a.justify_center, { - marginTop: 2, - marginRight: -6, + marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET, }, ]}> - <FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} /> + <ButtonIcon icon={FeedsIcon} size="lg" /> </Link> )} - </View> - </View> + </Layout.Header.Slot> + </Layout.Header.Outer> {children} </Animated.View> ) } - -const styles = StyleSheet.create({ - tabBar: { - // @ts-ignore web-only - position: isWeb ? 'fixed' : 'absolute', - zIndex: 1, - left: 0, - right: 0, - top: 0, - flexDirection: 'column', - }, - topBar: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 16, - paddingVertical: 5, - width: '100%', - minHeight: 46, - }, - title: { - fontSize: 21, - }, -}) |