From 6ccfb1375a56d70778175788226a7fc715172379 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 15 Aug 2023 15:49:52 -0700 Subject: [PATCH] Fix tap target size of post dropdown menus (#1180) --- src/view/com/post-thread/PostThreadItem.tsx | 36 +++++---- src/view/com/post/Post.tsx | 11 ++- src/view/com/posts/FeedItem.tsx | 10 +-- src/view/com/util/forms/NativeDropdown.tsx | 4 - src/view/com/util/forms/PostDropdownBtn.tsx | 14 +++- src/view/com/util/post-ctrls/PostCtrls.tsx | 80 +++---------------- src/view/com/util/post-ctrls/RepostButton.tsx | 9 +-- .../com/util/post-ctrls/RepostButton.web.tsx | 4 + 8 files changed, 55 insertions(+), 113 deletions(-) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index b71d6bdc..62cc8895 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -215,20 +215,6 @@ export const PostThreadItem = observer(function PostThreadItem({ - - + + @@ -430,7 +431,9 @@ export const PostThreadItem = observer(function PostThreadItem({ ) : undefined} {item.post.embed && ( - + ) : undefined} {item.post.embed ? ( - + )} @@ -252,9 +251,6 @@ const styles = StyleSheet.create({ height: 1, marginVertical: 4, }, - ellipsis: { - padding: isWeb ? 0 : 10, - }, content: { backgroundColor: '#f0f0f0', borderRadius: 8, diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index 65050d8c..969deb3a 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -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 }) { 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=""> + + + + ) } diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 672e0269..c71100df 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -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 - // DISABLED see #135 - // const repostRef = React.useRef(null) - // const likeRef = React.useRef(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) { )} {/* 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, diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index 5fe62aef..374d0651 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -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 ( , @@ -77,6 +78,9 @@ const styles = StyleSheet.create({ alignItems: 'center', gap: 4, }, + controlPad: { + padding: 5, + }, reposted: { color: colors.green3, },