Fix overflows in post meta info

2022-11-14 14:16:31 -06:00 · 2022-11-14 14:16:31 -06:00 · 25fdb41948
parent d0234784eb
commit 25fdb41948
4 changed files with 105 additions and 101 deletions
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@ -1,6 +1,6 @@
 import React, {useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 import Svg, {Line} from 'react-native-svg'
 import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
@ -13,6 +13,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../lib/strings'
 import {useStores} from '../../../state'
+import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'

 const PARENT_REPLY_LINE_LENGTH = 8
@ -93,7 +94,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                style={styles.metaItem}
                href={authorHref}
                title={authorTitle}>
-                <Text style={[s.f16, s.bold]}>
+                <Text style={[s.f16, s.bold]} numberOfLines={1}>
                  {item.author.displayName || item.author.handle}
                </Text>
              </Link>
@ -117,7 +118,9 @@ export const PostThreadItem = observer(function PostThreadItem({
                style={styles.metaItem}
                href={authorHref}
                title={authorTitle}>
-                <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
+                <Text style={[s.f15, s.gray5]} numberOfLines={1}>
+                  @{item.author.handle}
+                </Text>
              </Link>
            </View>
          </View>
@ -240,36 +243,14 @@ export const PostThreadItem = observer(function PostThreadItem({
            />
          </Link>
          <View style={styles.layoutContent}>
-            <View style={styles.meta}>
-              <Link
-                style={styles.metaItem}
-                href={authorHref}
-                title={authorTitle}>
-                <Text style={[s.f17, s.bold]}>
-                  {item.author.displayName || item.author.handle}
-                </Text>
-              </Link>
-              <Link
-                style={styles.metaItem}
-                href={authorHref}
-                title={authorTitle}>
-                <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
-              </Link>
-              <Text style={[styles.metaItem, s.f15, s.gray5]}>
-                &middot; {ago(item.indexedAt)}
-              </Text>
-              <View style={s.flex1} />
-              <PostDropdownBtn
-                style={styles.metaItem}
-                itemHref={itemHref}
-                itemTitle={itemTitle}>
-                <FontAwesomeIcon
-                  icon="ellipsis-h"
-                  size={14}
-                  style={[s.mt2, s.mr5]}
-                />
-              </PostDropdownBtn>
-            </View>
+            <PostMeta
+              itemHref={itemHref}
+              itemTitle={itemTitle}
+              authorHref={authorHref}
+              authorHandle={item.author.handle}
+              authorDisplayName={item.author.displayName}
+              timestamp={item.indexedAt}
+            />
            {item.replyingToAuthor &&
              item.replyingToAuthor !== item.author.handle && (
                <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
@ -350,6 +331,7 @@ const styles = StyleSheet.create({
  },
  metaItem: {
    paddingRight: 5,
+    maxWidth: 240,
  },
  postText: {
    fontFamily: 'Helvetica Neue',
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@ -2,17 +2,12 @@ import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {AtUri} from '../../../third-party/uri'
 import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {PostThreadViewModel} from '../../../state/models/post-thread-view'
 import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
+import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {RichText} from '../util/RichText'
 import {UserAvatar} from '../util/UserAvatar'
@ -100,19 +95,14 @@ export const Post = observer(function Post({uri}: {uri: string}) {
          />
        </Link>
        <View style={styles.layoutContent}>
-          <View style={styles.meta}>
-            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f16, s.bold]}>
-                {item.author.displayName || item.author.handle}
-              </Text>
-            </Link>
-            <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
-              <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
-            </Link>
-            <Text style={[styles.metaItem, s.f15, s.gray5]}>
-              &middot; {ago(item.indexedAt)}
-            </Text>
-          </View>
+          <PostMeta
+            itemHref={itemHref}
+            itemTitle={itemTitle}
+            authorHref={authorHref}
+            authorHandle={item.author.handle}
+            authorDisplayName={item.author.displayName}
+            timestamp={item.indexedAt}
+          />
          {replyHref !== '' && (
            <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
@ -168,14 +158,6 @@ const styles = StyleSheet.create({
  layoutContent: {
    flex: 1,
  },
-  meta: {
-    flexDirection: 'row',
-    paddingTop: 2,
-    paddingBottom: 2,
-  },
-  metaItem: {
-    paddingRight: 5,
-  },
  postTextContainer: {
    flexDirection: 'row',
    alignItems: 'center',
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@ -7,13 +7,12 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FeedItemModel} from '../../../state/models/feed-view'
 import {SharePostModel} from '../../../state/models/shell-ui'
 import {Link} from '../util/Link'
-import {PostDropdownBtn} from '../util/DropdownBtn'
 import {UserInfoText} from '../util/UserInfoText'
+import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {RichText} from '../util/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
-import {ago} from '../../lib/strings'
 import {useStores} from '../../../state'

 export const FeedItem = observer(function FeedItem({
@ -101,36 +100,14 @@ export const FeedItem = observer(function FeedItem({
          />
        </Link>
        <View style={styles.layoutContent}>
-          <View style={styles.meta}>
-            <Link
-              style={styles.metaItem}
-              href={authorHref}
-              title={item.author.handle}>
-              <Text style={[s.f17, s.bold]}>
-                {item.author.displayName || item.author.handle}
-              </Text>
-            </Link>
-            <Link
-              style={styles.metaItem}
-              href={authorHref}
-              title={item.author.handle}>
-              <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
-            </Link>
-            <Text style={[styles.metaItem, s.f15, s.gray5]}>
-              &middot; {ago(item.indexedAt)}
-            </Text>
-            <View style={s.flex1} />
-            <PostDropdownBtn
-              style={styles.metaItem}
-              itemHref={itemHref}
-              itemTitle={itemTitle}>
-              <FontAwesomeIcon
-                icon="ellipsis-h"
-                size={14}
-                style={[s.mt2, s.mr5]}
-              />
-            </PostDropdownBtn>
-          </View>
+          <PostMeta
+            itemHref={itemHref}
+            itemTitle={itemTitle}
+            authorHref={authorHref}
+            authorHandle={item.author.handle}
+            authorDisplayName={item.author.displayName}
+            timestamp={item.indexedAt}
+          />
          {replyHref !== '' && (
            <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
              <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
@ -195,14 +172,6 @@ const styles = StyleSheet.create({
  layoutContent: {
    flex: 1,
  },
-  meta: {
-    flexDirection: 'row',
-    paddingTop: 2,
-    paddingBottom: 2,
-  },
-  metaItem: {
-    paddingRight: 5,
-  },
  postTextContainer: {
    flexDirection: 'row',
    alignItems: 'center',
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@ -0,0 +1,71 @@
+import React from 'react'
+import {StyleSheet, Text, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Link} from '../util/Link'
+import {PostDropdownBtn} from '../util/DropdownBtn'
+import {s} from '../../lib/styles'
+import {ago} from '../../lib/strings'
+
+interface PostMetaOpts {
+  itemHref: string
+  itemTitle: string
+  authorHref: string
+  authorHandle: string
+  authorDisplayName: string | undefined
+  timestamp: string
+}
+
+export function PostMeta(opts: PostMetaOpts) {
+  return (
+    <View style={styles.meta}>
+      <View style={styles.metaNames}>
+        <Link
+          style={styles.metaItem}
+          href={opts.authorHref}
+          title={opts.authorHandle}>
+          <Text style={[s.f17, s.bold]} numberOfLines={1}>
+            {opts.authorDisplayName || opts.authorHandle}
+          </Text>
+        </Link>
+        <Link
+          style={styles.metaItem}
+          href={opts.authorHref}
+          title={opts.authorHandle}>
+          <Text style={[s.f15, s.gray5]} numberOfLines={1}>
+            @{opts.authorHandle}
+          </Text>
+        </Link>
+      </View>
+      <Text style={[styles.metaItem, s.f15, s.gray5]}>
+        &middot; {ago(opts.timestamp)}
+      </Text>
+      <View style={s.flex1} />
+      <PostDropdownBtn
+        style={styles.metaItem}
+        itemHref={opts.itemHref}
+        itemTitle={opts.itemTitle}>
+        <FontAwesomeIcon icon="ellipsis-h" size={14} style={[s.mt2, s.mr5]} />
+      </PostDropdownBtn>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  meta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 2,
+    paddingBottom: 2,
+  },
+  metaNames: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    maxWidth: 240,
+    overflow: 'hidden',
+  },
+  metaItem: {
+    maxWidth: 240,
+    paddingRight: 5,
+  },
+})