Restore the 'load more' button on web
parent
e89103915d
commit
93e9fa8edf
|
@ -1,11 +1,10 @@
|
|||
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 {Text} from '../text/Text'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
|
||||
import {isMobileWeb} from 'platform/detection'
|
||||
import {colors} from 'lib/styles'
|
||||
|
||||
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
|
||||
|
||||
|
@ -13,10 +12,12 @@ export const LoadLatestBtn = ({
|
|||
onPress,
|
||||
label,
|
||||
showIndicator,
|
||||
minimalShellMode,
|
||||
}: {
|
||||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
minimalShellMode?: boolean
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
if (isMobileWeb) {
|
||||
|
@ -29,6 +30,25 @@ export const LoadLatestBtn = ({
|
|||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{showIndicator && (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
pal.view,
|
||||
pal.borderDark,
|
||||
styles.loadLatestCentered,
|
||||
minimalShellMode && styles.loadLatestCenteredMinimal,
|
||||
]}
|
||||
onPress={onPress}
|
||||
hitSlop={HITSLOP}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={label}
|
||||
accessibilityHint="">
|
||||
<Text type="md-bold" style={pal.text}>
|
||||
{label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity
|
||||
style={[pal.view, pal.borderDark, styles.loadLatest]}
|
||||
onPress={onPress}
|
||||
|
@ -43,8 +63,8 @@ export const LoadLatestBtn = ({
|
|||
style={[pal.text, styles.icon]}
|
||||
/>
|
||||
</Text>
|
||||
{showIndicator && <View style={styles.indicator} />}
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -67,13 +87,21 @@ const styles = StyleSheet.create({
|
|||
position: 'relative',
|
||||
top: 2,
|
||||
},
|
||||
indicator: {
|
||||
loadLatestCentered: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute',
|
||||
top: 3,
|
||||
right: 3,
|
||||
backgroundColor: colors.blue3,
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
left: '50vw',
|
||||
// @ts-ignore web only -prf
|
||||
transform: 'translateX(-50%)',
|
||||
top: 60,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 30,
|
||||
borderWidth: 1,
|
||||
},
|
||||
loadLatestCenteredMinimal: {
|
||||
top: 20,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -6,7 +6,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
|||
import {clamp} from 'lodash'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
||||
import {colors} from 'lib/styles'
|
||||
|
||||
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
|
||||
|
@ -20,6 +19,7 @@ export const LoadLatestBtn = observer(
|
|||
onPress: () => void
|
||||
label: string
|
||||
showIndicator: boolean
|
||||
minimalShellMode?: boolean // NOTE not used on mobile -prf
|
||||
}) => {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
|
|
|
@ -266,6 +266,7 @@ const FeedPage = observer(
|
|||
onPress={onPressLoadLatest}
|
||||
label="Load new posts"
|
||||
showIndicator={hasNew}
|
||||
minimalShellMode={store.shell.minimalShellMode}
|
||||
/>
|
||||
)}
|
||||
<FAB
|
||||
|
|
|
@ -106,6 +106,7 @@ export const NotificationsScreen = withAuthRequired(
|
|||
onPress={onPressLoadLatest}
|
||||
label="Load new notifications"
|
||||
showIndicator={hasNew}
|
||||
minimalShellMode={true}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
|
Loading…
Reference in New Issue