From ff7788dab5786804000a324190439d92f078198b Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 11 Apr 2024 11:10:50 +0100 Subject: [PATCH] set explicit width and overlap leftnav --- src/Navigation.tsx | 7 ++- src/view/com/home/HomeHeaderLayoutMobile.tsx | 51 +++++++++++++------- src/view/com/pager/PagerWithHeader.tsx | 36 ++++++++++---- src/view/com/util/List.tsx | 14 +++--- src/view/shell/desktop/LeftNav.tsx | 8 +-- 5 files changed, 76 insertions(+), 40 deletions(-) diff --git a/src/Navigation.tsx b/src/Navigation.tsx index bff1c43568..09ed3756e9 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -1,6 +1,5 @@ import * as React from 'react' import {JSX} from 'react/jsx-runtime' -import {View} from 'react-native' import {i18n, MessageDescriptor} from '@lingui/core' import {msg} from '@lingui/macro' import { @@ -82,7 +81,7 @@ import {LeftNav} from '#/view/shell/desktop/LeftNav' import HashtagScreen from '#/screens/Hashtag' import {ModerationScreen} from '#/screens/Moderation' import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy' -import {atoms as a, useTheme} from '#/alf' +import {useTheme} from '#/alf' import {router} from '#/routes' const navigationRef = createNavigationContainerRef() @@ -353,7 +352,7 @@ function TabNavigatorTablet() { const tabBar = React.useCallback(() => null, []) return ( - + <> SettingsTabNavigator} /> - + ) } diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 940135a8cf..365f244cea 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,8 +1,12 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import { + StyleSheet, + TouchableOpacity, + useWindowDimensions, + 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' @@ -10,10 +14,9 @@ import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' import {HITSLOP_10} from 'lib/constants' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {usePalette} from 'lib/hooks/usePalette' import {isNativeTablet, isWeb} from 'platform/detection' import {Logo} from '#/view/icons/Logo' -import {atoms} from '#/alf' +import {atoms, useTheme} from '#/alf' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' import {Link as Link2} from '#/components/Link' import {IS_DEV} from '#/env' @@ -25,11 +28,22 @@ export function HomeHeaderLayoutMobile({ children: React.ReactNode tabBarAnchor: JSX.Element | null | undefined }) { - const pal = usePalette('default') const {_} = useLingui() const setDrawerOpen = useSetDrawerOpen() const {headerHeight} = useShellLayout() const {headerMinimalShellTransform} = useMinimalShellMode() + const {width} = useWindowDimensions() + const t = useTheme() + + let tabBarTablet + if (isNativeTablet && width > 677) { + tabBarTablet = { + marginLeft: (width - 600) / 2, + width: 600, + borderLeftWidth: 1, + borderRightWidth: 1, + } + } const onPressAvi = React.useCallback(() => { setDrawerOpen(true) @@ -37,13 +51,19 @@ export function HomeHeaderLayoutMobile({ return ( { headerHeight.value = e.nativeEvent.layout.height }}> - - {!isNativeTablet ? ( - + + + {!isNativeTablet ? ( - - ) : ( - // subtract width of LeftNav - - )} + ) : null} + @@ -73,7 +90,7 @@ export function HomeHeaderLayoutMobile({ atoms.justify_end, atoms.align_center, atoms.gap_md, - pal.view, + t.atoms.bg, {width: 100}, ]}> {IS_DEV && ( @@ -90,7 +107,7 @@ export function HomeHeaderLayoutMobile({ accessibilityHint=""> diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index aa110682a2..44443d30dd 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -1,26 +1,30 @@ import * as React from 'react' import { LayoutChangeEvent, + NativeScrollEvent, ScrollView, StyleSheet, + useWindowDimensions, View, - NativeScrollEvent, } from 'react-native' import Animated, { - useAnimatedStyle, - useSharedValue, + AnimatedRef, runOnJS, runOnUI, scrollTo, - useAnimatedRef, - AnimatedRef, SharedValue, + useAnimatedRef, + useAnimatedStyle, + useSharedValue, } from 'react-native-reanimated' -import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' -import {TabBar} from './TabBar' + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {ListMethods} from '../util/List' import {ScrollProvider} from '#/lib/ScrollContext' +import {isNativeTablet} from '#/platform/detection' +import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' +import {useTheme} from '#/alf' +import {ListMethods} from '../util/List' +import {TabBar} from './TabBar' export interface PagerWithHeaderChildParams { headerHeight: number @@ -234,10 +238,24 @@ let PagerTabBar = ({ ], })) const headerRef = React.useRef(null) + const {width} = useWindowDimensions() + const t = useTheme() + + let tabBarTablet + if (isNativeTablet && width > 677) { + tabBarTablet = { + marginLeft: (width - 600) / 2, + width: 600, + borderLeftWidth: 1, + borderRightWidth: 1, + ...t.atoms.border_contrast_medium, + } + } + return ( + style={[styles.tabBarMobile, tabBarTablet, headerTransform]}> {renderHeader?.()} { diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index 7c68db1fd9..764bf2d194 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -3,10 +3,10 @@ import {FlatListProps, RefreshControl, useWindowDimensions} from 'react-native' import {runOnJS, useSharedValue} from 'react-native-reanimated' import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' -import {usePalette} from '#/lib/hooks/usePalette' import {useScrollHandlers} from '#/lib/ScrollContext' import {isNativeTablet} from '#/platform/detection' import {addStyle} from 'lib/styles' +import {useTheme} from '#/alf' import {FlatList_INTERNAL} from './Views' export type ListMethods = FlatList_INTERNAL @@ -39,7 +39,7 @@ function ListImpl( ) { const isScrolledDown = useSharedValue(false) const contextScrollHandlers = useScrollHandlers() - const pal = usePalette('default') + const t = useTheme() const {width} = useWindowDimensions() function handleScrolledDownChange(didScrollDown: boolean) { @@ -72,8 +72,8 @@ function ListImpl( ) @@ -89,11 +89,11 @@ function ListImpl( if (isNativeTablet && width > 677) { contentContainerStyle = addStyle(contentContainerStyle, { - marginLeft: (width - 600) / 2 - 77, - marginRight: (width - 600) / 2, + marginLeft: (width - 600) / 2, + width: 600, borderLeftWidth: 1, borderRightWidth: 1, - ...pal.border, + ...t.atoms.border_contrast_medium, }) } diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 79787b0b4e..af2e72123e 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -1,5 +1,6 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -274,6 +275,7 @@ export function LeftNav() { const {_} = useLingui() const {isDesktop, isTablet} = useWebMediaQueries() const numUnread = useUnreadNotifications() + const {top} = useSafeAreaInsets() if (!hasSession && !isDesktop) { return null @@ -283,7 +285,7 @@ export function LeftNav() { @@ -461,13 +463,13 @@ const styles = StyleSheet.create({ paddingTop: 12, }, leftNavTablet: { - top: 0, left: 0, - right: 'auto', borderRightWidth: 1, height: '100%', width: 76, alignItems: 'center', + position: 'absolute', + zIndex: 1, }, profileCard: {