Restore the 'load more' button on web

zio/stable
Paul Frazee 2023-05-25 01:53:37 -05:00
parent e89103915d
commit 93e9fa8edf
4 changed files with 56 additions and 26 deletions

View File

@ -1,11 +1,10 @@
import React from 'react' import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native' import {StyleSheet, TouchableOpacity} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../text/Text' import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile' import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
import {isMobileWeb} from 'platform/detection' import {isMobileWeb} from 'platform/detection'
import {colors} from 'lib/styles'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
@ -13,10 +12,12 @@ export const LoadLatestBtn = ({
onPress, onPress,
label, label,
showIndicator, showIndicator,
minimalShellMode,
}: { }: {
onPress: () => void onPress: () => void
label: string label: string
showIndicator: boolean showIndicator: boolean
minimalShellMode?: boolean
}) => { }) => {
const pal = usePalette('default') const pal = usePalette('default')
if (isMobileWeb) { if (isMobileWeb) {
@ -29,22 +30,41 @@ export const LoadLatestBtn = ({
) )
} }
return ( return (
<TouchableOpacity <>
style={[pal.view, pal.borderDark, styles.loadLatest]} {showIndicator && (
onPress={onPress} <TouchableOpacity
hitSlop={HITSLOP} style={[
accessibilityRole="button" pal.view,
accessibilityLabel={label} pal.borderDark,
accessibilityHint=""> styles.loadLatestCentered,
<Text type="md-bold" style={pal.text}> minimalShellMode && styles.loadLatestCenteredMinimal,
<FontAwesomeIcon ]}
icon="angle-up" onPress={onPress}
size={21} hitSlop={HITSLOP}
style={[pal.text, styles.icon]} accessibilityRole="button"
/> accessibilityLabel={label}
</Text> accessibilityHint="">
{showIndicator && <View style={styles.indicator} />} <Text type="md-bold" style={pal.text}>
</TouchableOpacity> {label}
</Text>
</TouchableOpacity>
)}
<TouchableOpacity
style={[pal.view, pal.borderDark, styles.loadLatest]}
onPress={onPress}
hitSlop={HITSLOP}
accessibilityRole="button"
accessibilityLabel={label}
accessibilityHint="">
<Text type="md-bold" style={pal.text}>
<FontAwesomeIcon
icon="angle-up"
size={21}
style={[pal.text, styles.icon]}
/>
</Text>
</TouchableOpacity>
</>
) )
} }
@ -67,13 +87,21 @@ const styles = StyleSheet.create({
position: 'relative', position: 'relative',
top: 2, top: 2,
}, },
indicator: { loadLatestCentered: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute', position: 'absolute',
top: 3, left: '50vw',
right: 3, // @ts-ignore web only -prf
backgroundColor: colors.blue3, transform: 'translateX(-50%)',
width: 10, top: 60,
height: 10, paddingHorizontal: 24,
borderRadius: 6, paddingVertical: 14,
borderRadius: 30,
borderWidth: 1,
},
loadLatestCenteredMinimal: {
top: 20,
}, },
}) })

View File

@ -6,7 +6,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {clamp} from 'lodash' import {clamp} from 'lodash'
import {useStores} from 'state/index' import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {colors} from 'lib/styles' import {colors} from 'lib/styles'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
@ -20,6 +19,7 @@ export const LoadLatestBtn = observer(
onPress: () => void onPress: () => void
label: string label: string
showIndicator: boolean showIndicator: boolean
minimalShellMode?: boolean // NOTE not used on mobile -prf
}) => { }) => {
const store = useStores() const store = useStores()
const pal = usePalette('default') const pal = usePalette('default')

View File

@ -266,6 +266,7 @@ const FeedPage = observer(
onPress={onPressLoadLatest} onPress={onPressLoadLatest}
label="Load new posts" label="Load new posts"
showIndicator={hasNew} showIndicator={hasNew}
minimalShellMode={store.shell.minimalShellMode}
/> />
)} )}
<FAB <FAB

View File

@ -106,6 +106,7 @@ export const NotificationsScreen = withAuthRequired(
onPress={onPressLoadLatest} onPress={onPressLoadLatest}
label="Load new notifications" label="Load new notifications"
showIndicator={hasNew} showIndicator={hasNew}
minimalShellMode={true}
/> />
)} )}
</View> </View>