diff options
Diffstat (limited to 'src/view/com')
| -rw-r--r-- | src/view/com/auth/SplashScreen.web.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/posts/PostFeed.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/Views.web.tsx | 33 | ||||
| -rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtn.tsx | 64 |
4 files changed, 72 insertions, 42 deletions
diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index eded80358..21b289e2c 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -16,9 +16,9 @@ import { import {atoms as a, useTheme} from '#/alf' import {AppLanguageDropdown} from '#/components/AppLanguageDropdown' import {Button, ButtonText} from '#/components/Button' +import * as Layout from '#/components/Layout' import {InlineLinkText} from '#/components/Link' import {Text} from '#/components/Typography' -import {CenteredView} from '../util/Views' export const SplashScreen = ({ onDismiss, @@ -70,13 +70,13 @@ export const SplashScreen = ({ </Pressable> )} - <CenteredView style={[a.h_full, a.flex_1]}> + <Layout.Center style={[a.h_full, a.flex_1]} ignoreTabletLayoutOffset> <View testID="noSessionView" style={[ a.h_full, a.justify_center, - // @ts-ignore web only + // @ts-expect-error web only {paddingBottom: '20vh'}, isMobileWeb && a.pb_5xl, t.atoms.border_contrast_medium, @@ -135,7 +135,7 @@ export const SplashScreen = ({ </ErrorBoundary> </View> <Footer /> - </CenteredView> + </Layout.Center> <AppClipOverlay visible={showClipOverlay} setIsVisible={setShowClipOverlay} diff --git a/src/view/com/posts/PostFeed.tsx b/src/view/com/posts/PostFeed.tsx index c50d7f979..8ad97e2c1 100644 --- a/src/view/com/posts/PostFeed.tsx +++ b/src/view/com/posts/PostFeed.tsx @@ -40,7 +40,7 @@ import {List, ListRef} from '#/view/com/util/List' import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' import {VideoFeedSourceContext} from '#/screens/VideoFeed/types' -import {useBreakpoints} from '#/alf' +import {useBreakpoints, useLayoutBreakpoints} from '#/alf' import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials' import { PostFeedVideoGridRow, @@ -197,7 +197,8 @@ let PostFeed = ({ const checkForNewRef = React.useRef<(() => void) | null>(null) const lastFetchRef = React.useRef<number>(Date.now()) const [feedType, feedUriOrActorDid, feedTab] = feed.split('|') - const {gtMobile, gtTablet} = useBreakpoints() + const {gtMobile} = useBreakpoints() + const {rightNavVisible} = useLayoutBreakpoints() const areVideoFeedsEnabled = isNative const feedCacheKey = feedParams?.feedCacheKey @@ -396,7 +397,7 @@ let PostFeed = ({ key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt, }) } - if (!gtTablet && !trendingDisabled) { + if (!rightNavVisible && !trendingDisabled) { arr.push({ type: 'interstitialTrending', key: @@ -512,7 +513,7 @@ let PostFeed = ({ showProgressIntersitial, trendingDisabled, trendingVideoDisabled, - gtTablet, + rightNavVisible, gtMobile, isVideoFeed, areVideoFeedsEnabled, diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index e64b0ce9a..94cadb13e 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -26,6 +26,8 @@ import Animated from 'react-native-reanimated' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {addStyle} from '#/lib/styles' +import {useLayoutBreakpoints} from '#/alf' +import {useDialogContext} from '#/components/Dialog' interface AddedProps { desktopFixedHeight?: boolean | number @@ -46,9 +48,14 @@ export const CenteredView = React.forwardRef(function CenteredView( ) { const pal = usePalette('default') const {isMobile} = useWebMediaQueries() + const {centerColumnOffset} = useLayoutBreakpoints() + const {isWithinDialog} = useDialogContext() if (!isMobile) { style = addStyle(style, styles.container) } + if (centerColumnOffset && !isWithinDialog) { + style = addStyle(style, styles.containerOffset) + } if (topBorder) { style = addStyle(style, { borderTopWidth: 1, @@ -71,12 +78,17 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>( ref: React.Ref<FlatList<ItemT>>, ) { const {isMobile} = useWebMediaQueries() + const {centerColumnOffset} = useLayoutBreakpoints() + const {isWithinDialog} = useDialogContext() if (!isMobile) { contentContainerStyle = addStyle( contentContainerStyle, styles.containerScroll, ) } + if (centerColumnOffset && !isWithinDialog) { + style = addStyle(style, styles.containerOffset) + } if (contentOffset && contentOffset?.y !== 0) { // NOTE // we use paddingTop & contentOffset to space around the floating header @@ -92,7 +104,7 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>( } if (desktopFixedHeight) { if (typeof desktopFixedHeight === 'number') { - // @ts-ignore Web only -prf + // @ts-expect-error Web only -prf style = addStyle(style, { height: `calc(100vh - ${desktopFixedHeight}px)`, }) @@ -108,9 +120,9 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>( // around this, we set data-stable-gutters which can then be // styled in our external CSS. // -prf - // @ts-ignore web only -prf + // @ts-expect-error web only -prf props.dataSet = props.dataSet || {} - // @ts-ignore web only -prf + // @ts-expect-error web only -prf props.dataSet.stableGutters = '1' } } @@ -133,16 +145,22 @@ export const ScrollView = React.forwardRef(function ScrollViewImpl( ref: React.Ref<Animated.ScrollView>, ) { const {isMobile} = useWebMediaQueries() + const {centerColumnOffset} = useLayoutBreakpoints() if (!isMobile) { contentContainerStyle = addStyle( contentContainerStyle, styles.containerScroll, ) } + if (centerColumnOffset) { + contentContainerStyle = addStyle( + contentContainerStyle, + styles.containerOffset, + ) + } return ( <Animated.ScrollView contentContainerStyle={[styles.contentContainer, contentContainerStyle]} - // @ts-ignore something is wrong with the reanimated types -prf ref={ref} {...props} /> @@ -151,7 +169,7 @@ export const ScrollView = React.forwardRef(function ScrollViewImpl( const styles = StyleSheet.create({ contentContainer: { - // @ts-ignore web only + // @ts-expect-error web only minHeight: '100vh', }, container: { @@ -160,6 +178,9 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto', }, + containerOffset: { + transform: [{translateX: -150}], + }, containerScroll: { width: '100%', maxWidth: 600, @@ -167,7 +188,7 @@ const styles = StyleSheet.create({ marginRight: 'auto', }, fixedHeight: { - // @ts-ignore web only + // @ts-expect-error web only height: '100vh', }, }) diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx index b502f0b68..89e5784b7 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx @@ -1,10 +1,11 @@ -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {StyleSheet, View} from 'react-native' import Animated from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useMediaQuery} from 'react-responsive' import {HITSLOP_20} from '#/lib/constants' +import {PressableScale} from '#/lib/custom-animations/PressableScale' import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' @@ -13,9 +14,7 @@ import {useGate} from '#/lib/statsig/statsig' import {colors} from '#/lib/styles' import {isWeb} from '#/platform/detection' import {useSession} from '#/state/session' - -const AnimatedTouchableOpacity = - Animated.createAnimatedComponent(TouchableOpacity) +import {useLayoutBreakpoints} from '#/alf' export function LoadLatestBtn({ onPress, @@ -29,6 +28,7 @@ export function LoadLatestBtn({ const pal = usePalette('default') const {hasSession} = useSession() const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries() + const {centerColumnOffset} = useLayoutBreakpoints() const fabMinimalShellTransform = useMinimalShellFabTransform() const insets = useSafeAreaInsets() @@ -49,33 +49,37 @@ export function LoadLatestBtn({ : {bottom: clamp(insets.bottom, 15, 60) + 15} return ( - <AnimatedTouchableOpacity - style={[ - styles.loadLatest, - isDesktop && - (isTallViewport - ? styles.loadLatestOutOfLine - : styles.loadLatestInline), - isTablet && styles.loadLatestInline, - pal.borderDark, - pal.view, - bottomPosition, - showBottomBar && fabMinimalShellTransform, - ]} - onPress={onPress} - hitSlop={HITSLOP_20} - accessibilityRole="button" - accessibilityLabel={label} - accessibilityHint=""> - <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> - {showIndicator && <View style={[styles.indicator, pal.borderDark]} />} - </AnimatedTouchableOpacity> + <Animated.View style={[showBottomBar && fabMinimalShellTransform]}> + <PressableScale + style={[ + styles.loadLatest, + isDesktop && + (isTallViewport + ? styles.loadLatestOutOfLine + : styles.loadLatestInline), + isTablet && + (centerColumnOffset + ? styles.loadLatestInlineOffset + : styles.loadLatestInline), + pal.borderDark, + pal.view, + bottomPosition, + ]} + onPress={onPress} + hitSlop={HITSLOP_20} + accessibilityLabel={label} + accessibilityHint="" + targetScale={0.9}> + <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> + {showIndicator && <View style={[styles.indicator, pal.borderDark]} />} + </PressableScale> + </Animated.View> ) } const styles = StyleSheet.create({ loadLatest: { - // @ts-ignore 'fixed' is web only -prf + zIndex: 20, position: isWeb ? 'fixed' : 'absolute', left: 18, borderWidth: StyleSheet.hairlineWidth, @@ -87,11 +91,15 @@ const styles = StyleSheet.create({ justifyContent: 'center', }, loadLatestInline: { - // @ts-ignore web only + // @ts-expect-error web only left: 'calc(50vw - 282px)', }, + loadLatestInlineOffset: { + // @ts-expect-error web only + left: 'calc(50vw - 432px)', + }, loadLatestOutOfLine: { - // @ts-ignore web only + // @ts-expect-error web only left: 'calc(50vw - 382px)', }, indicator: { |