Move menu controls into post footers and improve meta info rendering
parent
0e85b33276
commit
7f8f53b087
|
@ -222,11 +222,16 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
<View style={[s.pl10, s.pb5]}>
|
||||
<PostCtrls
|
||||
big
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
isReposted={!!item.post.viewer.repost}
|
||||
isUpvoted={!!item.post.viewer.upvote}
|
||||
onPressReply={onPressReply}
|
||||
onPressToggleRepost={onPressToggleRepost}
|
||||
onPressToggleUpvote={onPressToggleUpvote}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
@ -276,15 +281,10 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<PostMeta
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
authorHref={authorHref}
|
||||
authorHandle={item.post.author.handle}
|
||||
authorDisplayName={item.post.author.displayName}
|
||||
timestamp={item.post.indexedAt}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
{item.post.author.viewer?.muted ? (
|
||||
<View style={[styles.mutedWarning, pal.btn]}>
|
||||
|
@ -304,14 +304,16 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
)}
|
||||
<PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} />
|
||||
<PostCtrls
|
||||
replyCount={item.post.replyCount}
|
||||
repostCount={item.post.repostCount}
|
||||
upvoteCount={item.post.upvoteCount}
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
isReposted={!!item.post.viewer.repost}
|
||||
isUpvoted={!!item.post.viewer.upvote}
|
||||
onPressReply={onPressReply}
|
||||
onPressToggleRepost={onPressToggleRepost}
|
||||
onPressToggleUpvote={onPressToggleUpvote}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
@ -154,15 +154,10 @@ export const Post = observer(function Post({
|
|||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<PostMeta
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
authorHref={authorHref}
|
||||
authorHandle={item.post.author.handle}
|
||||
authorDisplayName={item.post.author.displayName}
|
||||
timestamp={item.post.indexedAt}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
{replyHref !== '' && (
|
||||
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
|
||||
|
@ -198,6 +193,9 @@ export const Post = observer(function Post({
|
|||
)}
|
||||
<PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} />
|
||||
<PostCtrls
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
replyCount={item.post.replyCount}
|
||||
repostCount={item.post.repostCount}
|
||||
upvoteCount={item.post.upvoteCount}
|
||||
|
@ -206,6 +204,8 @@ export const Post = observer(function Post({
|
|||
onPressReply={onPressReply}
|
||||
onPressToggleRepost={onPressToggleRepost}
|
||||
onPressToggleUpvote={onPressToggleUpvote}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
@ -177,15 +177,10 @@ export const FeedItem = observer(function ({
|
|||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<PostMeta
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
authorHref={authorHref}
|
||||
authorHandle={item.post.author.handle}
|
||||
authorDisplayName={item.post.author.displayName}
|
||||
timestamp={item.post.indexedAt}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
{!isChild && replyHref !== '' && (
|
||||
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
|
||||
|
@ -226,6 +221,9 @@ export const FeedItem = observer(function ({
|
|||
)}
|
||||
<PostEmbeds embed={item.post.embed} style={styles.postEmbeds} />
|
||||
<PostCtrls
|
||||
itemHref={itemHref}
|
||||
itemTitle={itemTitle}
|
||||
isAuthor={item.post.author.did === store.me.did}
|
||||
replyCount={item.post.replyCount}
|
||||
repostCount={item.post.repostCount}
|
||||
upvoteCount={item.post.upvoteCount}
|
||||
|
@ -234,6 +232,8 @@ export const FeedItem = observer(function ({
|
|||
onPressReply={onPressReply}
|
||||
onPressToggleRepost={onPressToggleRepost}
|
||||
onPressToggleUpvote={onPressToggleUpvote}
|
||||
onCopyPostText={onCopyPostText}
|
||||
onDeletePost={onDeletePost}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
@ -3,11 +3,15 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
|
|||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
|
||||
import {Text} from './text/Text'
|
||||
import {PostDropdownBtn} from './forms/DropdownButton'
|
||||
import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
|
||||
|
||||
interface PostCtrlsOpts {
|
||||
itemHref: string
|
||||
itemTitle: string
|
||||
isAuthor: boolean
|
||||
big?: boolean
|
||||
replyCount?: number
|
||||
repostCount?: number
|
||||
|
@ -17,6 +21,8 @@ interface PostCtrlsOpts {
|
|||
onPressReply: () => void
|
||||
onPressToggleRepost: () => void
|
||||
onPressToggleUpvote: () => void
|
||||
onCopyPostText: () => void
|
||||
onDeletePost: () => void
|
||||
}
|
||||
|
||||
const redgray = '#7A6161'
|
||||
|
@ -169,7 +175,23 @@ export function PostCtrls(opts: PostCtrlsOpts) {
|
|||
) : undefined}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={s.flex1}></View>
|
||||
<View style={s.flex1}>
|
||||
{opts.big ? undefined : (
|
||||
<PostDropdownBtn
|
||||
style={styles.ctrl}
|
||||
itemHref={opts.itemHref}
|
||||
itemTitle={opts.itemTitle}
|
||||
isAuthor={opts.isAuthor}
|
||||
onCopyPostText={opts.onCopyPostText}
|
||||
onDeletePost={opts.onDeletePost}>
|
||||
<FontAwesomeIcon
|
||||
icon="ellipsis-h"
|
||||
size={16}
|
||||
style={[s.mt2, s.mr5, sRedgray]}
|
||||
/>
|
||||
</PostDropdownBtn>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,28 +1,18 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {Platform, StyleSheet, View} from 'react-native'
|
||||
import {Link} from '../util/Link'
|
||||
import {Text} from './text/Text'
|
||||
import {PostDropdownBtn} from './forms/DropdownButton'
|
||||
import {s} from '../../lib/styles'
|
||||
import {ago} from '../../../lib/strings'
|
||||
import {useTheme} from '../../lib/ThemeContext'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
||||
interface PostMetaOpts {
|
||||
itemHref: string
|
||||
itemTitle: string
|
||||
authorHref: string
|
||||
authorHandle: string
|
||||
authorDisplayName: string | undefined
|
||||
timestamp: string
|
||||
isAuthor: boolean
|
||||
onCopyPostText: () => void
|
||||
onDeletePost: () => void
|
||||
}
|
||||
|
||||
export function PostMeta(opts: PostMetaOpts) {
|
||||
const theme = useTheme()
|
||||
const pal = usePalette('default')
|
||||
let displayName = opts.authorDisplayName || opts.authorHandle
|
||||
let handle = opts.authorHandle
|
||||
|
@ -31,13 +21,15 @@ export function PostMeta(opts: PostMetaOpts) {
|
|||
// Android simply cannot handle the truncation case we need
|
||||
// so we have to do it manually here
|
||||
// -prf
|
||||
if (displayName.length + handle.length > 26) {
|
||||
if (displayName.length > 26) {
|
||||
displayName = displayName.slice(0, 23) + '...'
|
||||
} else {
|
||||
handle = handle.slice(0, 23 - displayName.length) + '...'
|
||||
if (handle.endsWith('....')) {
|
||||
handle = handle.slice(0, -4) + '...'
|
||||
if (Platform.OS === 'android') {
|
||||
if (displayName.length + handle.length > 26) {
|
||||
if (displayName.length > 26) {
|
||||
displayName = displayName.slice(0, 23) + '...'
|
||||
} else {
|
||||
handle = handle.slice(0, 23 - displayName.length) + '...'
|
||||
if (handle.endsWith('....')) {
|
||||
handle = handle.slice(0, -4) + '...'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -45,7 +37,7 @@ export function PostMeta(opts: PostMetaOpts) {
|
|||
return (
|
||||
<View style={styles.meta}>
|
||||
<Link
|
||||
style={styles.metaItem}
|
||||
style={[styles.metaItem, styles.maxWidth]}
|
||||
href={opts.authorHref}
|
||||
title={opts.authorHandle}>
|
||||
<Text type="h5" style={[pal.text]} numberOfLines={1}>
|
||||
|
@ -60,20 +52,6 @@ export function PostMeta(opts: PostMetaOpts) {
|
|||
<Text type="h6" style={[styles.metaItem, pal.textLight]}>
|
||||
· {ago(opts.timestamp)}
|
||||
</Text>
|
||||
<View style={s.flex1} />
|
||||
<PostDropdownBtn
|
||||
style={[styles.metaItem, s.pl5]}
|
||||
itemHref={opts.itemHref}
|
||||
itemTitle={opts.itemTitle}
|
||||
isAuthor={opts.isAuthor}
|
||||
onCopyPostText={opts.onCopyPostText}
|
||||
onDeletePost={opts.onDeletePost}>
|
||||
<FontAwesomeIcon
|
||||
icon="ellipsis-h"
|
||||
size={14}
|
||||
style={[s.mt2, s.mr5, pal.text]}
|
||||
/>
|
||||
</PostDropdownBtn>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
@ -81,11 +59,14 @@ export function PostMeta(opts: PostMetaOpts) {
|
|||
const styles = StyleSheet.create({
|
||||
meta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
alignItems: 'baseline',
|
||||
paddingTop: 0,
|
||||
paddingBottom: 2,
|
||||
},
|
||||
metaItem: {
|
||||
paddingRight: 5,
|
||||
},
|
||||
maxWidth: {
|
||||
maxWidth: '70%',
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue