zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Merge pull request #3178 from bluesky-social/scrolltotop-overlap 

Move scroll to top button inline if viewport is narrow (vertically)
zio/stable
Samuel Newman 2024-03-12 15:22:40 +00:00 committed by GitHub
parent c1c7a55fd5 1c9debed9a
commit 17d921fd9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/view/com/util/load-latest/LoadLatestBtn.tsx
View File

@ -1,12 +1,13 @@
import React from 'react' import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native' import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import Animated from 'react-native-reanimated'
import {useMediaQuery} from 'react-responsive'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {colors} from 'lib/styles' import {colors} from 'lib/styles'
import {HITSLOP_20} from 'lib/constants' import {HITSLOP_20} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import Animated from 'react-native-reanimated'
const AnimatedTouchableOpacity = const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity) Animated.createAnimatedComponent(TouchableOpacity)
import {isWeb} from 'platform/detection' import {isWeb} from 'platform/detection'
@ -26,6 +27,9 @@ export function LoadLatestBtn({
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries() const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode() const {fabMinimalShellTransform} = useMinimalShellMode()
// move button inline if it starts overlapping the left nav
const isTallViewport = useMediaQuery({minHeight: 700})
// Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust // Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth) // it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
const showBottomBar = hasSession ? isMobile : isTabletOrMobile const showBottomBar = hasSession ? isMobile : isTabletOrMobile
@ -34,8 +38,11 @@ export function LoadLatestBtn({
<AnimatedTouchableOpacity <AnimatedTouchableOpacity
style={[ style={[
styles.loadLatest, styles.loadLatest,
isDesktop && styles.loadLatestDesktop, isDesktop &&
isTablet && styles.loadLatestTablet, (isTallViewport
? styles.loadLatestOutOfLine
: styles.loadLatestInline),
isTablet && styles.loadLatestInline,
pal.borderDark, pal.borderDark,
pal.view, pal.view,
showBottomBar && fabMinimalShellTransform, showBottomBar && fabMinimalShellTransform,
@ -65,11 +72,11 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
loadLatestTablet: { loadLatestInline: {
// @ts-ignore web only // @ts-ignore web only
left: 'calc(50vw - 282px)', left: 'calc(50vw - 282px)',
}, },
loadLatestDesktop: { loadLatestOutOfLine: {
// @ts-ignore web only // @ts-ignore web only
left: 'calc(50vw - 382px)', left: 'calc(50vw - 382px)',
}, },