diff options
| -rw-r--r-- | src/state/models/feeds/notifications.ts | 4 | ||||
| -rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtn.web.tsx | 24 | ||||
| -rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtnMobile.tsx | 25 | ||||
| -rw-r--r-- | src/view/screens/Home.tsx | 9 | ||||
| -rw-r--r-- | src/view/screens/Notifications.tsx | 6 |
5 files changed, 59 insertions, 9 deletions
diff --git a/src/state/models/feeds/notifications.ts b/src/state/models/feeds/notifications.ts index 73424f03e..3777abb92 100644 --- a/src/state/models/feeds/notifications.ts +++ b/src/state/models/feeds/notifications.ts @@ -290,7 +290,9 @@ export class NotificationsFeedModel { } get hasNewLatest() { - return this.queuedNotifications && this.queuedNotifications?.length > 0 + return Boolean( + this.queuedNotifications && this.queuedNotifications?.length > 0, + ) } get unreadCountLabel(): string { diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx index 7a3e55d7d..0b4e649f9 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx @@ -1,24 +1,32 @@ import React from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Text} from '../text/Text' import {usePalette} from 'lib/hooks/usePalette' -import {UpIcon} from 'lib/icons' 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} export const LoadLatestBtn = ({ onPress, label, + showIndicator, }: { onPress: () => void label: string + showIndicator: boolean }) => { const pal = usePalette('default') if (isMobileWeb) { - return <LoadLatestBtnMobile onPress={onPress} label={label} /> + return ( + <LoadLatestBtnMobile + onPress={onPress} + label={label} + showIndicator={showIndicator} + /> + ) } return ( <TouchableOpacity @@ -35,6 +43,7 @@ export const LoadLatestBtn = ({ style={[pal.text, styles.icon]} /> </Text> + {showIndicator && <View style={styles.indicator} />} </TouchableOpacity> ) } @@ -58,4 +67,13 @@ const styles = StyleSheet.create({ position: 'relative', top: 2, }, + indicator: { + position: 'absolute', + top: 3, + right: 3, + backgroundColor: colors.blue3, + width: 10, + height: 10, + borderRadius: 6, + }, }) diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx index 5e03e2285..7d1823a13 100644 --- a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx @@ -1,16 +1,26 @@ import React from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 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} export const LoadLatestBtn = observer( - ({onPress, label}: {onPress: () => void; label: string}) => { + ({ + onPress, + label, + showIndicator, + }: { + onPress: () => void + label: string + showIndicator: boolean + }) => { const store = useStores() const pal = usePalette('default') const safeAreaInsets = useSafeAreaInsets() @@ -30,6 +40,7 @@ export const LoadLatestBtn = observer( accessibilityLabel={label} accessibilityHint=""> <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} /> + {showIndicator && <View style={[styles.indicator, pal.borderDark]} />} </TouchableOpacity> ) }, @@ -48,4 +59,14 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + indicator: { + position: 'absolute', + top: 3, + right: 3, + backgroundColor: colors.blue3, + width: 12, + height: 12, + borderRadius: 6, + borderWidth: 1, + }, }) diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index bd800590d..2c03f1930 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -246,6 +246,7 @@ const FeedPage = observer( feed.refresh() }, [feed, scrollToTop]) + const hasNew = feed.hasNewLatest && !feed.isRefreshing return ( <View testID={testID} style={s.h100pct}> <Feed @@ -260,8 +261,12 @@ const FeedPage = observer( renderEmptyState={renderEmptyState} headerOffset={HEADER_OFFSET} /> - {isScrolledDown && ( - <LoadLatestBtn onPress={onPressLoadLatest} label="Load new posts" /> + {(isScrolledDown || hasNew) && ( + <LoadLatestBtn + onPress={onPressLoadLatest} + label="Load new posts" + showIndicator={hasNew} + /> )} <FAB testID="composeFAB" diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 02a4618c3..64dcb3a1a 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -88,6 +88,9 @@ export const NotificationsScreen = withAuthRequired( ), ) + const hasNew = + store.me.notifications.hasNewLatest && + !store.me.notifications.isRefreshing return ( <View testID="notificationsScreen" style={s.hContentRegion}> <ViewHeader title="Notifications" canGoBack={false} /> @@ -98,10 +101,11 @@ export const NotificationsScreen = withAuthRequired( onScroll={onMainScroll} scrollElRef={scrollElRef} /> - {isScrolledDown && ( + {(isScrolledDown || hasNew) && ( <LoadLatestBtn onPress={onPressLoadLatest} label="Load new notifications" + showIndicator={hasNew} /> )} </View> |