diff options
| author | Hailey <153161762+haileyok@users.noreply.github.com> | 2023-12-28 12:58:28 -0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-12-28 12:58:28 -0800 |
| commit | f0532865ce1d5decc39cca6eeeea0d61ebd8d63d (patch) | |
| tree | 52c67cff63ab9d3a73fee9dd522b84d87ad98734 | |
| parent | 40a110c5416de08bc8a929ecd7dd023028a869bf (diff) | |
| download | voidsky-f0532865ce1d5decc39cca6eeeea0d61ebd8d63d.tar.zst | |
minor search screen ux improvements (#2264)
* handle taps while keyboard is displayed * dismiss keyboard on drag when searching feeds * dismiss on drag and persist taps on suggested follows * add hitslop to clear button * add hitslop to cancel button * dismiss keyboard on drag when searching users * hit slop for feed search clear button * move import
| -rw-r--r-- | src/view/com/util/forms/SearchInput.tsx | 4 | ||||
| -rw-r--r-- | src/view/screens/Feeds.tsx | 2 | ||||
| -rw-r--r-- | src/view/screens/Search/Search.tsx | 15 |
3 files changed, 17 insertions, 4 deletions
diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx index 02b462b55..a88046d4c 100644 --- a/src/view/com/util/forms/SearchInput.tsx +++ b/src/view/com/util/forms/SearchInput.tsx @@ -11,6 +11,7 @@ import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {HITSLOP_10} from 'lib/constants' import {MagnifyingGlassIcon} from 'lib/icons' import {useTheme} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' @@ -71,7 +72,8 @@ export function SearchInput({ onPress={onPressCancelSearchInner} accessibilityRole="button" accessibilityLabel={_(msg`Clear search query`)} - accessibilityHint=""> + accessibilityHint="" + hitSlop={HITSLOP_10}> <FontAwesomeIcon icon="xmark" size={16} diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 20cdf815a..dbdb6d9ca 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -494,6 +494,8 @@ export function FeedsScreen(_props: Props) { // @ts-ignore our .web version only -prf desktopFixedHeight scrollIndicatorInsets={{right: 1}} + keyboardShouldPersistTaps="handled" + keyboardDismissMode="on-drag" /> {hasSession && ( diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index b522edfba..bdc324c4a 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -162,6 +162,8 @@ function SearchScreenSuggestedFollows() { // @ts-ignore web only -prf desktopFixedHeight contentContainerStyle={{paddingBottom: 1200}} + keyboardShouldPersistTaps="handled" + keyboardDismissMode="on-drag" /> ) : ( <CenteredView sideBorders style={[pal.border, s.hContentRegion]}> @@ -572,7 +574,8 @@ export function SearchScreenMobile( onPress={onPressClearQuery} accessibilityRole="button" accessibilityLabel={_(msg`Clear search query`)} - accessibilityHint=""> + accessibilityHint="" + hitSlop={HITSLOP_10}> <FontAwesomeIcon icon="xmark" size={16} @@ -584,7 +587,10 @@ export function SearchScreenMobile( {query || inputIsFocused ? ( <View style={styles.headerCancelBtn}> - <Pressable onPress={onPressCancelSearch} accessibilityRole="button"> + <Pressable + onPress={onPressCancelSearch} + accessibilityRole="button" + hitSlop={HITSLOP_10}> <Text style={[pal.text]}> <Trans>Cancel</Trans> </Text> @@ -598,7 +604,10 @@ export function SearchScreenMobile( {isFetching ? ( <Loader /> ) : ( - <ScrollView style={{height: '100%'}}> + <ScrollView + style={{height: '100%'}} + keyboardShouldPersistTaps="handled" + keyboardDismissMode="on-drag"> {searchResults.length ? ( searchResults.map((item, i) => ( <SearchResultCard |