Fix tap target size of post dropdown menus (#1180)
parent
0576caae36
commit
6ccfb1375a
|
@ -215,20 +215,6 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
</TimeElapsed>
|
||||
</Text>
|
||||
</View>
|
||||
<View style={s.flex1} />
|
||||
<PostDropdownBtn
|
||||
testID="postDropdownBtn"
|
||||
itemUri={itemUri}
|
||||
itemCid={itemCid}
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
isThreadMuted={item.isThreadMuted}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onOpenTranslate={onOpenTranslate}
|
||||
onToggleThreadMute={onToggleThreadMute}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.meta}>
|
||||
<Link
|
||||
|
@ -241,6 +227,21 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
<View style={s.flex1} />
|
||||
<PostDropdownBtn
|
||||
testID="postDropdownBtn"
|
||||
itemUri={itemUri}
|
||||
itemCid={itemCid}
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
isThreadMuted={item.isThreadMuted}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onOpenTranslate={onOpenTranslate}
|
||||
onToggleThreadMute={onToggleThreadMute}
|
||||
onDeletePost={onDeletePost}
|
||||
style={{paddingVertical: 6, paddingHorizontal: 10}}
|
||||
/>
|
||||
</View>
|
||||
<View style={[s.pl10, s.pr10, s.pb10]}>
|
||||
<ContentHider
|
||||
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue