Move menu controls into post footers and improve meta info rendering

zio/stable
Paul Frazee 2023-01-16 16:09:51 -06:00
parent 0e85b33276
commit 7f8f53b087
5 changed files with 58 additions and 53 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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]}>
&middot; {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%',
},
})