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

Fix tap target size of post dropdown menus (#1180)

zio/stable
Paul Frazee 2023-08-15 15:49:52 -07:00 committed by GitHub
parent 0576caae36
commit 6ccfb1375a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -215,6 +215,18 @@ export const PostThreadItem = observer(function PostThreadItem({
</TimeElapsed>
</Text>
</View>
</View>
<View style={styles.meta}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
{sanitizeHandle(item.post.author.handle, '@')}
</Text>
</Link>
</View>
</View>
<View style={s.flex1} />
<PostDropdownBtn
testID="postDropdownBtn"
@ -228,20 +240,9 @@ export const PostThreadItem = observer(function PostThreadItem({
onOpenTranslate={onOpenTranslate}
onToggleThreadMute={onToggleThreadMute}
onDeletePost={onDeletePost}
style={{paddingVertical: 6, paddingHorizontal: 10}}
/>
</View>
<View style={styles.meta}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text type="md" style={[pal.textLight]} numberOfLines={1}>
{sanitizeHandle(item.post.author.handle, '@')}
</Text>
</Link>
</View>
</View>
</View>
<View style={[s.pl10, s.pr10, s.pb10]}>
<ContentHider
moderation={item.moderation.content}
@ -382,7 +383,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={[
styles.layout,
{
paddingBottom: item._showChildReplyLine ? 0 : 16,
paddingBottom: item._showChildReplyLine ? 0 : 8,
},
]}>
<View style={styles.layoutAvi}>
@ -430,7 +431,9 @@ export const PostThreadItem = observer(function PostThreadItem({
</View>
) : undefined}
{item.post.embed && (
<ContentHider style={s.mb10} moderation={item.moderation.embed}>
<ContentHider
style={styles.contentHider}
moderation={item.moderation.embed}>
<PostEmbeds
embed={item.post.embed}
moderation={item.moderation.embed}
@ -565,7 +568,6 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
paddingBottom: 8,
paddingRight: 10,
minHeight: 36,
},
postTextLargeContainer: {
paddingHorizontal: 0,

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

@ -266,7 +266,9 @@ const PostLoaded = observer(
</View>
) : undefined}
{item.post.embed ? (
<ContentHider moderation={item.moderation.embed} style={s.mb10}>
<ContentHider
moderation={item.moderation.embed}
style={styles.contentHider}>
<PostEmbeds
embed={item.post.embed}
moderation={item.moderation.embed}
@ -315,8 +317,10 @@ const PostLoaded = observer(
const styles = StyleSheet.create({
outer: {
padding: 10,
paddingTop: 10,
paddingRight: 15,
paddingBottom: 5,
paddingLeft: 10,
borderTopWidth: 1,
},
layout: {
@ -336,7 +340,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
paddingBottom: 8,
},
translateLink: {
marginBottom: 12,
@ -350,7 +353,7 @@ const styles = StyleSheet.create({
borderLeftColor: colors.gray2,
},
contentHider: {
marginBottom: 6,
marginBottom: 2,
},
contentHiderChild: {
marginTop: 6,

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

@ -143,7 +143,7 @@ export const FeedItem = observer(function ({
borderColor: pal.colors.border,
paddingBottom:
isThreadLastChild || (!isThreadChild && !isThreadParent)
? 12
? 6
: undefined,
},
isThreadChild ? styles.outerSmallTop : undefined,
@ -274,7 +274,6 @@ export const FeedItem = observer(function ({
testID="contentHider-post"
moderation={item.moderation.content}
ignoreMute
style={styles.contentHider}
childContainerStyle={styles.contentHiderChild}>
<PostAlerts
moderation={item.moderation.content}
@ -312,7 +311,6 @@ export const FeedItem = observer(function ({
)}
</ContentHider>
<PostCtrls
style={styles.ctrls}
itemUri={itemUri}
itemCid={itemCid}
itemHref={itemHref}
@ -385,9 +383,6 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
paddingBottom: 4,
},
contentHider: {
marginBottom: 6,
},
contentHiderChild: {
marginTop: 6,
},
@ -397,7 +392,4 @@ const styles = StyleSheet.create({
translateLink: {
marginBottom: 6,
},
ctrls: {
marginTop: 4,
},
})

4
src/view/com/util/forms/NativeDropdown.tsx
View File

@ -60,7 +60,6 @@ export const DropdownMenuTrigger = DropdownMenu.create(
icon="ellipsis"
size={20}
color={defaultCtrlColor}
style={styles.ellipsis}
/>
)}
</View>
@ -252,9 +251,6 @@ const styles = StyleSheet.create({
height: 1,
marginVertical: 4,
},
ellipsis: {
padding: isWeb ? 0 : 10,
},
content: {
backgroundColor: '#f0f0f0',
borderRadius: 8,

14
src/view/com/util/forms/PostDropdownBtn.tsx
View File

@ -1,6 +1,9 @@
import React from 'react'
import {StyleProp, View, ViewStyle} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {toShareUrl} from 'lib/strings/url-helpers'
import {useStores} from 'state/index'
import {useTheme} from 'lib/ThemeContext'
import {shareUrl} from 'lib/sharing'
import {
NativeDropdown,
@ -19,6 +22,7 @@ export function PostDropdownBtn({
onOpenTranslate,
onToggleThreadMute,
onDeletePost,
style,
}: {
testID: string
itemUri: string
@ -31,8 +35,11 @@ export function PostDropdownBtn({
onOpenTranslate: () => void
onToggleThreadMute: () => void
onDeletePost: () => void
style?: StyleProp<ViewStyle>
}) {
const store = useStores()
const theme = useTheme()
const defaultCtrlColor = theme.palette.default.postCtrl
const dropdownItems: NativeDropdownItem[] = [
{
@ -146,8 +153,11 @@ export function PostDropdownBtn({
testID={testID}
items={dropdownItems}
accessibilityLabel="More post options"
accessibilityHint=""
/>
accessibilityHint="">
<View style={style}>
<FontAwesomeIcon icon="ellipsis" size={20} color={defaultCtrlColor} />
</View>
</NativeDropdown>
</EventStopper>
)
}

80
src/view/com/util/post-ctrls/PostCtrls.tsx
View File

@ -6,11 +6,6 @@ import {
View,
ViewStyle,
} from 'react-native'
// DISABLED see #135
// import {
// TriggerableAnimated,
// TriggerableAnimatedRef,
// } from './anim/TriggerableAnimated'
import {Text} from '../text/Text'
import {PostDropdownBtn} from '../forms/PostDropdownBtn'
import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons'
@ -20,7 +15,6 @@ import {useTheme} from 'lib/ThemeContext'
import {useStores} from 'state/index'
import {RepostButton} from './RepostButton'
import {Haptics} from 'lib/haptics'
import {createHitslop} from 'lib/constants'
interface PostCtrlsOpts {
itemUri: string
@ -53,44 +47,6 @@ interface PostCtrlsOpts {
onDeletePost: () => void
}
const HITSLOP = createHitslop(5)
// DISABLED see #135
/*
function ctrlAnimStart(interp: Animated.Value) {
return Animated.sequence([
Animated.timing(interp, {
toValue: 1,
duration: 250,
useNativeDriver: true,
}),
Animated.delay(50),
Animated.timing(interp, {
toValue: 0,
duration: 20,
useNativeDriver: true,
}),
])
}
function ctrlAnimStyle(interp: Animated.Value) {
return {
transform: [
{
scale: interp.interpolate({
inputRange: [0, 1.0],
outputRange: [1.0, 4.0],
}),
},
],
opacity: interp.interpolate({
inputRange: [0, 1.0],
outputRange: [1.0, 0.0],
}),
}
}
*/
export function PostCtrls(opts: PostCtrlsOpts) {
const store = useStores()
const theme = useTheme()
@ -100,22 +56,11 @@ export function PostCtrls(opts: PostCtrlsOpts) {
}),
[theme],
) as StyleProp<ViewStyle>
// DISABLED see #135
// const repostRef = React.useRef<TriggerableAnimatedRef | null>(null)
// const likeRef = React.useRef<TriggerableAnimatedRef | null>(null)
const onRepost = useCallback(() => {
store.shell.closeModal()
if (!opts.isReposted) {
Haptics.default()
opts.onPressToggleRepost().catch(_e => undefined)
// DISABLED see #135
// repostRef.current?.trigger(
// {start: ctrlAnimStart, style: ctrlAnimStyle},
// async () => {
// await opts.onPressToggleRepost().catch(_e => undefined)
// setRepostMod(0)
// },
// )
} else {
opts.onPressToggleRepost().catch(_e => undefined)
}
@ -146,18 +91,8 @@ export function PostCtrls(opts: PostCtrlsOpts) {
if (!opts.isLiked) {
Haptics.default()
await opts.onPressToggleLike().catch(_e => undefined)
// DISABLED see #135
// likeRef.current?.trigger(
// {start: ctrlAnimStart, style: ctrlAnimStyle},
// async () => {
// await opts.onPressToggleLike().catch(_e => undefined)
// setLikeMod(0)
// },
// )
// setIsLikedPressed(false)
} else {
await opts.onPressToggleLike().catch(_e => undefined)
// setIsLikedPressed(false)
}
}
@ -165,8 +100,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<View style={[styles.ctrls, opts.style]}>
<TouchableOpacity
testID="replyBtn"
style={styles.ctrl}
hitSlop={HITSLOP}
style={[styles.ctrl, !opts.big && styles.ctrlPad, {paddingLeft: 0}]}
onPress={opts.onPressReply}
accessibilityRole="button"
accessibilityLabel={`Reply (${opts.replyCount} ${
@ -187,8 +121,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<RepostButton {...opts} onRepost={onRepost} onQuote={onQuote} />
<TouchableOpacity
testID="likeBtn"
style={styles.ctrl}
hitSlop={HITSLOP}
style={[styles.ctrl, !opts.big && styles.ctrlPad]}
onPress={onPressToggleLikeWrapper}
accessibilityRole="button"
accessibilityLabel={`${opts.isLiked ? 'Unlike' : 'Like'} (${
@ -232,6 +165,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
onOpenTranslate={opts.onOpenTranslate}
onToggleThreadMute={opts.onToggleThreadMute}
onDeletePost={opts.onDeletePost}
style={styles.ctrlPad}
/>
)}
{/* used for adding pad to the right side */}
@ -248,8 +182,12 @@ const styles = StyleSheet.create({
ctrl: {
flexDirection: 'row',
alignItems: 'center',
padding: 5,
margin: -5,
},
ctrlPad: {
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5,
},
ctrlIconLiked: {
color: colors.like,

9
src/view/com/util/post-ctrls/RepostButton.tsx
View File

@ -6,9 +6,6 @@ import {useTheme} from 'lib/ThemeContext'
import {Text} from '../text/Text'
import {pluralize} from 'lib/strings/helpers'
import {useStores} from 'state/index'
import {createHitslop} from 'lib/constants'
const HITSLOP = createHitslop(5)
interface Props {
isReposted: boolean
@ -47,9 +44,8 @@ export const RepostButton = ({
return (
<TouchableOpacity
testID="repostBtn"
hitSlop={HITSLOP}
onPress={onPressToggleRepostWrapper}
style={styles.control}
style={[styles.control, !big && styles.controlPad]}
accessibilityRole="button"
accessibilityLabel={`${
isReposted ? 'Undo repost' : 'Repost'
@ -83,8 +79,9 @@ const styles = StyleSheet.create({
control: {
flexDirection: 'row',
alignItems: 'center',
},
controlPad: {
padding: 5,
margin: -5,
},
reposted: {
color: colors.green3,

4
src/view/com/util/post-ctrls/RepostButton.web.tsx
View File

@ -52,6 +52,7 @@ export const RepostButton = ({
<View
style={[
styles.control,
!big && styles.controlPad,
(isReposted
? styles.reposted
: defaultControlColor) as StyleProp<ViewStyle>,
@ -77,6 +78,9 @@ const styles = StyleSheet.create({
alignItems: 'center',
gap: 4,
},
controlPad: {
padding: 5,
},
reposted: {
color: colors.green3,
},