Add translate link to post menu (#261)

* Add a google translate menu item to posts

* Fix: make sure the dropdown menu is always visible (when low on the screen)

src/view/com/util/PostCtrls.tsx

@@ -52,6 +52,7 @@ interface PostCtrlsOpts {
   onPressToggleRepost: () => Promise<void>
   onPressToggleUpvote: () => Promise<void>
   onCopyPostText: () => void
+  onOpenTranslate: () => void
   onDeletePost: () => void
 }
 
@@ -297,6 +298,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
             itemTitle={opts.itemTitle}
             isAuthor={opts.isAuthor}
             onCopyPostText={opts.onCopyPostText}
+            onOpenTranslate={opts.onOpenTranslate}
             onDeletePost={opts.onDeletePost}>
             <FontAwesomeIcon
               icon="ellipsis-h"

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

@@ -1,5 +1,6 @@
 import React, {useRef} from 'react'
 import {
+  Dimensions,
   Share,
   StyleProp,
   StyleSheet,
@@ -21,6 +22,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
+const ESTIMATED_MENU_ITEM_HEIGHT = 52
 
 export interface DropdownItem {
   icon?: IconProp
@@ -67,10 +69,15 @@ export function DropdownButton({
         if (!menuWidth) {
           menuWidth = 200
         }
+        const winHeight = Dimensions.get('window').height
+        const estimatedMenuHeight = items.length * ESTIMATED_MENU_ITEM_HEIGHT
         const newX = openToRight
           ? pageX + width + rightOffset
           : pageX + width - menuWidth
-        const newY = pageY + height + bottomOffset
+        let newY = pageY + height + bottomOffset
+        if (newY + estimatedMenuHeight > winHeight) {
+          newY -= estimatedMenuHeight
+        }
         createDropdownMenu(
           newX,
           newY,
@@ -114,6 +121,7 @@ export function PostDropdownBtn({
   itemHref,
   isAuthor,
   onCopyPostText,
+  onOpenTranslate,
   onDeletePost,
 }: {
   style?: StyleProp<ViewStyle>
@@ -124,6 +132,7 @@ export function PostDropdownBtn({
   itemTitle: string
   isAuthor: boolean
   onCopyPostText: () => void
+  onOpenTranslate: () => void
   onDeletePost: () => void
 }) {
   const store = useStores()
@@ -152,6 +161,13 @@ export function PostDropdownBtn({
         Share.share({url: toShareUrl(itemHref)})
       },
     },
+    {
+      icon: 'language',
+      label: 'Translate...',
+      onPress() {
+        onOpenTranslate()
+      },
+    },
     {
       icon: 'circle-exclamation',
       label: 'Report post',