From e89103915db48fc4306b553877be1ffa8ef94e91 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 25 May 2023 01:30:48 -0500 Subject: [PATCH 1/2] Update load latest to show when there's new activity with an indicator --- src/state/models/feeds/notifications.ts | 4 ++- .../util/load-latest/LoadLatestBtn.web.tsx | 24 +++++++++++++++--- .../util/load-latest/LoadLatestBtnMobile.tsx | 25 +++++++++++++++++-- src/view/screens/Home.tsx | 9 +++++-- 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 73424f03..3777abb9 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 7a3e55d7..0b4e649f 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 + return ( + + ) } return ( + {showIndicator && } ) } @@ -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 5e03e228..7d1823a1 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=""> + {showIndicator && } ) }, @@ -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 bd800590..2c03f193 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 ( - {isScrolledDown && ( - + {(isScrolledDown || hasNew) && ( + )} @@ -98,10 +101,11 @@ export const NotificationsScreen = withAuthRequired( onScroll={onMainScroll} scrollElRef={scrollElRef} /> - {isScrolledDown && ( + {(isScrolledDown || hasNew) && ( )} From 93e9fa8edfe1d8a046399a2b4b31bba4d69814f8 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 25 May 2023 01:53:37 -0500 Subject: [PATCH 2/2] Restore the 'load more' button on web --- .../util/load-latest/LoadLatestBtn.web.tsx | 78 +++++++++++++------ .../util/load-latest/LoadLatestBtnMobile.tsx | 2 +- src/view/screens/Home.tsx | 1 + src/view/screens/Notifications.tsx | 1 + 4 files changed, 56 insertions(+), 26 deletions(-) diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx index 0b4e649f..fefc540c 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx @@ -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,22 +30,41 @@ export const LoadLatestBtn = ({ ) } return ( - - - - - {showIndicator && } - + <> + {showIndicator && ( + + + {label} + + + )} + + + + + + ) } @@ -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, }, }) diff --git a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx index 7d1823a1..412b9b80 100644 --- a/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtnMobile.tsx @@ -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') diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 2c03f193..ab765e9c 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -266,6 +266,7 @@ const FeedPage = observer( onPress={onPressLoadLatest} label="Load new posts" showIndicator={hasNew} + minimalShellMode={store.shell.minimalShellMode} /> )} )}