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/post-thread/PostThreadItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, View} from 'react-native'
+import {Linking, StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {AtUri} from '../../../third-party/uri'
 import {
@@ -89,6 +89,11 @@ export const PostThreadItem = observer(function PostThreadItem({
     Clipboard.setString(record?.text || '')
     Toast.show('Copied to clipboard')
   }, [record])
+  const onOpenTranslate = React.useCallback(() => {
+    Linking.openURL(
+      encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
+    )
+  }, [record])
   const onDeletePost = React.useCallback(() => {
     item.delete().then(
       () => {
@@ -167,6 +172,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   itemTitle={itemTitle}
                   isAuthor={item.post.author.did === store.me.did}
                   onCopyPostText={onCopyPostText}
+                  onOpenTranslate={onOpenTranslate}
                   onDeletePost={onDeletePost}>
                   <FontAwesomeIcon
                     icon="ellipsis-h"
@@ -259,6 +265,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 onPressToggleRepost={onPressToggleRepost}
                 onPressToggleUpvote={onPressToggleUpvote}
                 onCopyPostText={onCopyPostText}
+                onOpenTranslate={onOpenTranslate}
                 onDeletePost={onDeletePost}
               />
             </View>
@@ -353,6 +360,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 onPressToggleRepost={onPressToggleRepost}
                 onPressToggleUpvote={onPressToggleUpvote}
                 onCopyPostText={onCopyPostText}
+                onOpenTranslate={onOpenTranslate}
                 onDeletePost={onDeletePost}
               />
             </View>

src/view/com/post/Post.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from 'react'
 import {
   ActivityIndicator,
+  Linking,
   StyleProp,
   StyleSheet,
   View,
@@ -120,6 +121,11 @@ export const Post = observer(function Post({
     Clipboard.setString(record.text)
     Toast.show('Copied to clipboard')
   }
+  const onOpenTranslate = () => {
+    Linking.openURL(
+      encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
+    )
+  }
   const onDeletePost = () => {
     item.delete().then(
       () => {
@@ -214,6 +220,7 @@ export const Post = observer(function Post({
             onPressToggleRepost={onPressToggleRepost}
             onPressToggleUpvote={onPressToggleUpvote}
             onCopyPostText={onCopyPostText}
+            onOpenTranslate={onOpenTranslate}
             onDeletePost={onDeletePost}
           />
         </View>

src/view/com/posts/FeedItem.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, View} from 'react-native'
+import {Linking, StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '../../../third-party/uri'
@@ -86,6 +86,11 @@ export const FeedItem = observer(function ({
     Clipboard.setString(record?.text || '')
     Toast.show('Copied to clipboard')
   }
+  const onOpenTranslate = React.useCallback(() => {
+    Linking.openURL(
+      encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
+    )
+  }, [record])
   const onDeletePost = () => {
     track('FeedItem:PostDelete')
     item.delete().then(
@@ -243,6 +248,7 @@ export const FeedItem = observer(function ({
               onPressToggleRepost={onPressToggleRepost}
               onPressToggleUpvote={onPressToggleUpvote}
               onCopyPostText={onCopyPostText}
+              onOpenTranslate={onOpenTranslate}
               onDeletePost={onDeletePost}
             />
           </View>

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

src/view/index.ts

@@ -42,6 +42,7 @@ import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse'
 import {faImage as farImage} from '@fortawesome/free-regular-svg-icons/faImage'
 import {faImage} from '@fortawesome/free-solid-svg-icons/faImage'
 import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo'
+import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage'
 import {faLink} from '@fortawesome/free-solid-svg-icons/faLink'
 import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
 import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
@@ -113,6 +114,7 @@ export function setup() {
     faImage,
     farImage,
     faInfo,
+    faLanguage,
     faLink,
     faLock,
     faMagnifyingGlass,