diff options
Diffstat (limited to 'src/view')
| -rw-r--r-- | src/view/com/util/TimeElapsed.tsx | 12 | ||||
| -rw-r--r-- | src/view/com/util/layouts/LoggedOutLayout.tsx | 8 | ||||
| -rw-r--r-- | src/view/icons/index.tsx | 6 | ||||
| -rw-r--r-- | src/view/screens/Log.tsx | 24 | ||||
| -rw-r--r-- | src/view/screens/Search/Explore.tsx | 31 |
5 files changed, 48 insertions, 33 deletions
diff --git a/src/view/com/util/TimeElapsed.tsx b/src/view/com/util/TimeElapsed.tsx index a5d3a5372..d939b3163 100644 --- a/src/view/com/util/TimeElapsed.tsx +++ b/src/view/com/util/TimeElapsed.tsx @@ -1,26 +1,26 @@ import React from 'react' +import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' import {useTickEveryMinute} from '#/state/shell' -import {ago} from 'lib/strings/time' export function TimeElapsed({ timestamp, children, - timeToString = ago, + timeToString, }: { timestamp: string children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element timeToString?: (timeElapsed: string) => string }) { + const ago = useGetTimeAgo() + const format = timeToString ?? ago const tick = useTickEveryMinute() - const [timeElapsed, setTimeAgo] = React.useState(() => - timeToString(timestamp), - ) + const [timeElapsed, setTimeAgo] = React.useState(() => format(timestamp)) const [prevTick, setPrevTick] = React.useState(tick) if (prevTick !== tick) { setPrevTick(tick) - setTimeAgo(timeToString(timestamp)) + setTimeAgo(format(timestamp)) } return children({timeElapsed}) diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx index 0272a44c6..c2c080c17 100644 --- a/src/view/com/util/layouts/LoggedOutLayout.tsx +++ b/src/view/com/util/layouts/LoggedOutLayout.tsx @@ -3,6 +3,7 @@ import {ScrollView, StyleSheet, View} from 'react-native' import {isWeb} from '#/platform/detection' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {atoms as a} from '#/alf' @@ -29,13 +30,18 @@ export const LoggedOutLayout = ({ borderLeftWidth: 1, }) + const [isKeyboardVisible] = useIsKeyboardVisible() + if (isMobile) { if (scrollable) { return ( <ScrollView style={styles.scrollview} keyboardShouldPersistTaps="handled" - keyboardDismissMode="on-drag"> + keyboardDismissMode="none" + contentContainerStyle={[ + {paddingBottom: isKeyboardVisible ? 300 : 0}, + ]}> <View style={a.pt_md}>{children}</View> </ScrollView> ) diff --git a/src/view/icons/index.tsx b/src/view/icons/index.tsx index 025b903b2..b4feed990 100644 --- a/src/view/icons/index.tsx +++ b/src/view/icons/index.tsx @@ -1,5 +1,5 @@ import {library} from '@fortawesome/fontawesome-svg-core' -import {faAddressCard} from '@fortawesome/free-regular-svg-icons' +import {faAddressCard} from '@fortawesome/free-regular-svg-icons/faAddressCard' import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark' import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar' @@ -25,8 +25,6 @@ import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck' import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus' import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan' import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' -import {faFlask} from '@fortawesome/free-solid-svg-icons' -import {faUniversalAccess} from '@fortawesome/free-solid-svg-icons' import {faAngleDown} from '@fortawesome/free-solid-svg-icons/faAngleDown' import {faAngleLeft} from '@fortawesome/free-solid-svg-icons/faAngleLeft' import {faAngleRight} from '@fortawesome/free-solid-svg-icons/faAngleRight' @@ -62,6 +60,7 @@ import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation' import {faEye} from '@fortawesome/free-solid-svg-icons/faEye' import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter' import {faFire} from '@fortawesome/free-solid-svg-icons/faFire' +import {faFlask} from '@fortawesome/free-solid-svg-icons/faFlask' import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe' import {faHand} from '@fortawesome/free-solid-svg-icons/faHand' @@ -97,6 +96,7 @@ import {faSignal} from '@fortawesome/free-solid-svg-icons/faSignal' import {faSliders} from '@fortawesome/free-solid-svg-icons/faSliders' import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack' import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket' +import {faUniversalAccess} from '@fortawesome/free-solid-svg-icons/faUniversalAccess' import {faUserCheck} from '@fortawesome/free-solid-svg-icons/faUserCheck' import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus' import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers' diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index e727a1fb8..e10aa83ab 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -1,18 +1,19 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ScrollView} from '../com/util/Views' -import {s} from 'lib/styles' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {getEntries} from '#/logger/logDump' -import {ago} from 'lib/strings/time' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import {getEntries} from '#/logger/logDump' import {useSetMinimalShellMode} from '#/state/shell' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' +import {ScrollView} from '../com/util/Views' export function LogScreen({}: NativeStackScreenProps< CommonNavigatorParams, @@ -22,6 +23,7 @@ export function LogScreen({}: NativeStackScreenProps< const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() const [expanded, setExpanded] = React.useState<string[]>([]) + const timeAgo = useGetTimeAgo() useFocusEffect( React.useCallback(() => { @@ -70,7 +72,7 @@ export function LogScreen({}: NativeStackScreenProps< /> ) : undefined} <Text type="sm" style={[styles.ts, pal.textLight]}> - {ago(entry.timestamp)} + {timeAgo(entry.timestamp)} </Text> </TouchableOpacity> {expanded.includes(entry.id) ? ( diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx index c7f5f939f..dd93bf813 100644 --- a/src/view/screens/Search/Explore.tsx +++ b/src/view/screens/Search/Explore.tsx @@ -64,7 +64,7 @@ function SuggestedItemsHeader({ fill={t.palette.primary_500} style={{marginLeft: -2}} /> - <Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>{title}</Text> + <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>{title}</Text> </View> <Text style={[t.atoms.text_contrast_high, a.leading_snug]}> {description} @@ -119,6 +119,9 @@ function LoadMore({ }) .filter(Boolean) as LoadMoreItems[] }, [item.items, moderationOpts]) + + if (items.length === 0) return null + const type = items[0].type return ( @@ -142,20 +145,20 @@ function LoadMore({ a.relative, { height: 32, - width: 32 + 15 * 3, + width: 32 + 15 * items.length, }, ]}> <View style={[ a.align_center, a.justify_center, - a.border, t.atoms.bg_contrast_25, a.absolute, { width: 30, height: 30, left: 0, + borderWidth: 1, backgroundColor: t.palette.primary_500, borderColor: t.atoms.bg.backgroundColor, borderRadius: type === 'profile' ? 999 : 4, @@ -169,13 +172,13 @@ function LoadMore({ <View key={_item.key} style={[ - a.border, t.atoms.bg_contrast_25, a.absolute, { width: 30, height: 30, left: (i + 1) * 15, + borderWidth: 1, borderColor: t.atoms.bg.backgroundColor, borderRadius: _item.type === 'profile' ? 999 : 4, zIndex: 3 - i, @@ -350,13 +353,15 @@ export function Explore() { } } - i.push({ - type: 'loadMore', - key: 'loadMoreProfiles', - isLoadingMore: isLoadingMoreProfiles, - onLoadMore: onLoadMoreProfiles, - items: i.filter(item => item.type === 'profile').slice(-3), - }) + if (hasNextProfilesPage) { + i.push({ + type: 'loadMore', + key: 'loadMoreProfiles', + isLoadingMore: isLoadingMoreProfiles, + onLoadMore: onLoadMoreProfiles, + items: i.filter(item => item.type === 'profile').slice(-3), + }) + } } else { if (profilesError) { i.push({ @@ -412,7 +417,7 @@ export function Explore() { message: _(msg`Failed to load feeds preferences`), error: cleanError(preferencesError), }) - } else { + } else if (hasNextFeedsPage) { i.push({ type: 'loadMore', key: 'loadMoreFeeds', @@ -454,6 +459,8 @@ export function Explore() { profilesError, feedsError, preferencesError, + hasNextProfilesPage, + hasNextFeedsPage, ]) const renderItem = React.useCallback( |