Post UI updates (Profile Preview on mobile) (#990)

* Update postmeta to put the timestamp on the right side on mobile

* Drop the two-line PostMeta mode

* Add ProfilePreview modal

* Tune PostMeta to give the best behavior possible for a given platform

* Remove old showFollowBtn attributes

* Fix style issue

* Switch the follow button in the profile header to use the inverted color for consistency with the rest of the app

* Fix lint

* Fix darkmode

* Tune the profile preview footer

* Better analytics choice
This commit is contained in:
Paul Frazee 2023-07-06 21:12:54 -05:00 committed by GitHub
parent df7552135a
commit 6f69157269
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 215 additions and 190 deletions

View file

@ -13,7 +13,7 @@ import {RichText} from '../util/text/RichText'
import {Text} from '../util/text/Text'
import {PostDropdownBtn} from '../util/forms/DropdownButton'
import * as Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {PreviewableUserAvatar} from '../util/UserAvatar'
import {s} from 'lib/styles'
import {ago, niceDate} from 'lib/strings/time'
import {sanitizeDisplayName} from 'lib/strings/display-names'
@ -163,22 +163,17 @@ export const PostThreadItem = observer(function PostThreadItem({
<PostSandboxWarning />
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link
href={authorHref}
title={authorTitle}
asAnchor
accessibilityLabel={`${item.post.author.handle}'s avatar`}
accessibilityHint="">
<UserAvatar
size={52}
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
</Link>
<PreviewableUserAvatar
size={52}
did={item.post.author.did}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
</View>
<View style={styles.layoutContent}>
<View style={[styles.meta, styles.metaExpandedLine1]}>
<View style={[s.flexRow, s.alignBaseline]}>
<View style={[s.flexRow]}>
<Link
style={styles.metaItem}
href={authorHref}
@ -353,13 +348,13 @@ export const PostThreadItem = observer(function PostThreadItem({
<PostSandboxWarning />
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link href={authorHref} title={authorTitle} asAnchor>
<UserAvatar
size={52}
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
</Link>
<PreviewableUserAvatar
size={52}
did={item.post.author.did}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
moderation={item.moderation.avatar}
/>
</View>
<View style={styles.layoutContent}>
<PostMeta
@ -368,7 +363,6 @@ export const PostThreadItem = observer(function PostThreadItem({
authorHasWarning={!!item.post.author.labels?.length}
timestamp={item.post.indexedAt}
postHref={itemHref}
did={item.post.author.did}
/>
<ContentHider
moderation={item.moderation.thread}