zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Reduce confusing visual feedback while scrolling

zio/stable
Paul Frazee 2022-12-18 16:43:18 -06:00
parent c3caf4826e
commit 36dc1c7525
12 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/view/com/notifications/FeedItem.tsx
View File

@ -50,7 +50,7 @@ export const FeedItem = observer(function FeedItem({
if (item.isReply || item.isMention) {
return (
<Link href={itemHref} title={itemTitle}>
<Link href={itemHref} title={itemTitle} noFeedback>
<Post
uri={item.uri}
initView={item.additionalPost}
@ -121,7 +121,8 @@ export const FeedItem = observer(function FeedItem({
<Link
style={[styles.outer, item.isRead ? undefined : styles.outerUnread]}
href={itemHref}
title={itemTitle}>
title={itemTitle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutIcon}>
{icon === 'UpIconSolid' ? (

3
src/view/com/post-thread/PostRepostedBy.tsx
View File

@ -86,7 +86,8 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
<Link
style={styles.outer}
href={`/profile/${item.handle}`}
title={item.handle}>
title={item.handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar

2
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -226,7 +226,7 @@ export const PostThreadItem = observer(function PostThreadItem({
)
} else {
return (
<Link style={styles.outer} href={itemHref} title={itemTitle}>
<Link style={styles.outer} href={itemHref} title={itemTitle} noFeedback>
{!item.replyingTo && item.record.reply && (
<View style={styles.parentReplyLine} />
)}

3
src/view/com/post-thread/PostVotedBy.tsx
View File

@ -86,7 +86,8 @@ const LikedByItem = ({item}: {item: VotesViewItemModel}) => {
<Link
style={styles.outer}
href={`/profile/${item.actor.handle}`}
title={item.actor.handle}>
title={item.actor.handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar

6
src/view/com/post/Post.tsx
View File

@ -133,7 +133,11 @@ export const Post = observer(function Post({
}
return (
<Link style={[styles.outer, style]} href={itemHref} title={itemTitle}>
<Link
style={[styles.outer, style]}
href={itemHref}
title={itemTitle}
noFeedback>
{showReplyLine && <View style={styles.replyLine} />}
<View style={styles.layout}>
<View style={styles.layoutAvi}>

2
src/view/com/posts/FeedItem.tsx
View File

@ -109,7 +109,7 @@ export const FeedItem = observer(function FeedItem({
style={{marginTop: 2}}
/>
) : undefined}
<Link style={outerStyles} href={itemHref} title={itemTitle}>
<Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
{isChild && <View style={styles.topReplyLine} />}
{item._isThreadParent && (
<View

6
src/view/com/profile/ProfileCard.tsx
View File

@ -20,7 +20,11 @@ export function ProfileCard({
onPressButton?: () => void
}) {
return (
<Link style={styles.outer} href={`/profile/${handle}`} title={handle}>
<Link
style={styles.outer}
href={`/profile/${handle}`}
title={handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar

3
src/view/com/profile/ProfileFollowers.tsx
View File

@ -84,7 +84,8 @@ const User = ({item}: {item: FollowerItem}) => {
<Link
style={styles.outer}
href={`/profile/${item.handle}`}
title={item.handle}>
title={item.handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar

3
src/view/com/profile/ProfileFollows.tsx
View File

@ -84,7 +84,8 @@ const User = ({item}: {item: FollowItem}) => {
<Link
style={styles.outer}
href={`/profile/${item.handle}`}
title={item.handle}>
title={item.handle}
noFeedback>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<UserAvatar

20
src/view/com/util/Link.tsx
View File

@ -4,8 +4,10 @@ import {
Linking,
StyleProp,
Text,
TouchableWithoutFeedback,
TouchableOpacity,
TextStyle,
View,
ViewStyle,
} from 'react-native'
import {useStores, RootStoreModel} from '../../../state'
@ -16,11 +18,13 @@ export const Link = observer(function Link({
href,
title,
children,
noFeedback,
}: {
style?: StyleProp<ViewStyle>
href: string
title?: string
children?: React.ReactNode
noFeedback?: boolean
}) {
const store = useStores()
const onPress = () => {
@ -29,12 +33,24 @@ export const Link = observer(function Link({
const onLongPress = () => {
handleLink(store, href, true)
}
if (noFeedback) {
return (
<TouchableOpacity
style={style}
<TouchableWithoutFeedback
onPress={onPress}
onLongPress={onLongPress}
delayPressIn={50}>
<View style={style}>
{children ? children : <Text>{title || 'link'}</Text>}
</View>
</TouchableWithoutFeedback>
)
}
return (
<TouchableOpacity
onPress={onPress}
onLongPress={onLongPress}
delayPressIn={50}
style={style}>
{children ? children : <Text>{title || 'link'}</Text>}
</TouchableOpacity>
)

2
src/view/com/util/PostEmbeds.tsx
View File

@ -97,7 +97,7 @@ export function PostEmbeds({
const externalEmbed = embed as AppBskyEmbedExternal.Presented
const link = externalEmbed.external
return (
<Link style={[styles.extOuter, style]} href={link.uri}>
<Link style={[styles.extOuter, style]} href={link.uri} noFeedback>
{link.thumb ? (
<AutoSizedImage style={style} uri={link.thumb} />
) : undefined}

5
src/view/screens/Settings.tsx
View File

@ -37,7 +37,10 @@ export const Settings = observer(function Settings({
<Text style={[s.blue3, s.bold]}>Sign out</Text>
</TouchableOpacity>
</View>
<Link href={`/profile/${store.me.handle}`} title="Your profile">
<Link
href={`/profile/${store.me.handle}`}
title="Your profile"
noFeedback>
<View style={styles.profile}>
<UserAvatar
size={40}