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

src/view/com/post-thread/PostThreadItem.tsx

@@ -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,

src/view/com/post/Post.tsx

@@ -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,

src/view/com/posts/FeedItem.tsx

@@ -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,
-  },
 })

src/view/com/util/forms/NativeDropdown.tsx

@@ -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,

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<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>
   )
 }

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<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}
+        style={[styles.ctrl, !opts.big && styles.ctrlPad, {paddingLeft: 0}]}
-        hitSlop={HITSLOP}
         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}
+        style={[styles.ctrl, !opts.big && styles.ctrlPad]}
-        hitSlop={HITSLOP}
         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,

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 (
     <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,

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

@@ -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,
   },