A lot of updates

2025-06-05 22:19:13 +02:00 · 2020-12-01 00:44:28 +01:00
parent 0e3528d2cd
commit 9bfee02484
18 changed files with 463 additions and 279 deletions
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@ -77,7 +77,7 @@ const BottomSheet: React.FC<Props> = ({ children, visible, handleDismiss }) => {
            {
              top,
              backgroundColor: theme.background,
-              paddingBottom: insets.bottom
+              paddingBottom: insets.bottom || StyleConstants.Spacing.L
            }
          ]}
        >
@ -108,15 +108,16 @@ const styles = StyleSheet.create({
  },
  handle: {
    alignSelf: 'center',
-    width: StyleConstants.Spacing.Global.PagePadding * 8,
-    height: StyleConstants.Spacing.Global.PagePadding / 2,
+    width: StyleConstants.Spacing.S * 8,
+    height: StyleConstants.Spacing.S / 2,
    borderRadius: 100,
    top: -StyleConstants.Spacing.M * 2
  },
  cancel: {
    padding: StyleConstants.Spacing.S,
    borderWidth: 1,
-    borderRadius: 100
+    borderRadius: 100,
+    // marginBottom: StyleConstants.Spacing.L
  },
  text: {
    fontSize: StyleConstants.Font.Size.L,
--- a/src/components/BottomSheet/Row.tsx
+++ b/src/components/BottomSheet/Row.tsx
@ -6,16 +6,16 @@ import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'

 export interface Props {
-  onPressFunction: () => void
+  onPress: () => void
  icon: string
  text: string
 }

-const BottomSheetRow: React.FC<Props> = ({ onPressFunction, icon, text }) => {
+const BottomSheetRow: React.FC<Props> = ({ onPress, icon, text }) => {
  const { theme } = useTheme()

  return (
-    <Pressable onPress={() => onPressFunction()} style={styles.pressable}>
+    <Pressable onPress={onPress} style={styles.pressable}>
      <Feather
        name={icon}
        color={theme.primary}
@ -28,6 +28,7 @@ const BottomSheetRow: React.FC<Props> = ({ onPressFunction, icon, text }) => {

 const styles = StyleSheet.create({
  pressable: {
+    width: '100%',
    flexDirection: 'row',
    marginBottom: StyleConstants.Spacing.L
  },
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@ -17,11 +17,11 @@ const HeaderLeft: React.FC<Props> = ({ onPress, text, icon }) => {
  return (
    <Pressable onPress={onPress} style={styles.base}>
      {text ? (
-        <Text style={[styles.text, { color: theme.link }]}>{text}</Text>
+        <Text style={[styles.text, { color: theme.primary }]}>{text}</Text>
      ) : (
        <Feather
          name={icon || 'chevron-left'}
-          color={theme.link}
+          color={theme.primary}
          size={StyleConstants.Font.Size.L}
        />
      )}
--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@ -28,11 +28,11 @@ const HeaderRight: React.FC<PropsText | PropsIcon> = ({

  return (
    <Pressable onPress={onPress} style={styles.base}>
-      {text && <Text style={[styles.text, { color: theme.link }]}>{text}</Text>}
+      {text && <Text style={[styles.text, { color: theme.primary }]}>{text}</Text>}
      {icon && (
        <Feather
          name={icon}
-          color={theme.link}
+          color={theme.primary}
          size={StyleConstants.Font.Size.L}
        />
      )}
--- a/src/components/ParseContent.tsx
+++ b/src/components/ParseContent.tsx
@ -1,10 +1,12 @@
 import React, { useCallback } from 'react'
-import { Text } from 'react-native'
-import HTMLView, { HTMLViewNode } from 'react-native-htmlview'
+import { StyleSheet, Text, View } from 'react-native'
+import HTMLView from 'react-native-htmlview'
 import { useNavigation } from '@react-navigation/native'

 import Emojis from 'src/components/Timelines/Timeline/Shared/Emojis'
 import { useTheme } from 'src/utils/styles/ThemeManager'
+import { Feather } from '@expo/vector-icons'
+import { StyleConstants } from 'src/utils/styles/constants'

 // Prevent going to the same hashtag multiple times
 const renderNode = ({
@ -75,6 +77,11 @@ const renderNode = ({
            })
          }}
        >
+          <Feather
+            name='external-link'
+            size={StyleConstants.Font.Size.M}
+            color={theme.link}
+          />{' '}
          {showFullLink ? href : domain[1]}
        </Text>
      )
@ -88,7 +95,7 @@ export interface Props {
  emojis?: Mastodon.Emoji[]
  mentions?: Mastodon.Mention[]
  showFullLink?: boolean
-  linesTruncated?: number
+  numberOfLines?: number
 }

 const ParseContent: React.FC<Props> = ({
@ -97,7 +104,7 @@ const ParseContent: React.FC<Props> = ({
  emojis,
  mentions,
  showFullLink = false,
-  linesTruncated = 10
+  numberOfLines = 10
 }) => {
  const navigation = useNavigation()
  const { theme } = useTheme()
@ -117,7 +124,11 @@ const ParseContent: React.FC<Props> = ({
    []
  )
  const rootComponent = useCallback(({ children }) => {
-    return <Text numberOfLines={linesTruncated}>{children}</Text>
+    return (
+      <Text numberOfLines={numberOfLines} style={styles.root}>
+        {children}
+      </Text>
+    )
  }, [])

  return (
@ -130,4 +141,10 @@ const ParseContent: React.FC<Props> = ({
  )
 }

+const styles = StyleSheet.create({
+  root: {
+    lineHeight: StyleConstants.Font.LineHeight.M
+  }
+})
+
 export default ParseContent
--- a/src/components/Timelines/Timeline.tsx
+++ b/src/components/Timelines/Timeline.tsx
@ -80,7 +80,7 @@ const Timeline: React.FC<Props> = ({
        },
        { previous: true }
      ),
-    [disableRefresh]
+    [disableRefresh, flattenData]
  )
  const flOnEndReach = useCallback(
    () =>
@ -89,7 +89,7 @@ const Timeline: React.FC<Props> = ({
        direction: 'next',
        id: flattenData[flattenData.length - 1].id
      }),
-    [disableRefresh]
+    [disableRefresh, flattenData]
  )

  let content
@ -110,7 +110,7 @@ const Timeline: React.FC<Props> = ({
          scrollEnabled={scrollEnabled} // For timeline in Account view
          ItemSeparatorComponent={flItemSeparatorComponent}
          refreshing={!disableRefresh && isLoading}
-          onEndReachedThreshold={!disableRefresh ? 0.5 : null}
+          onEndReachedThreshold={!disableRefresh ? 1 : null}
          // require getItemLayout
          // {...(flattenPointer[0] && { initialScrollIndex: flattenPointer[0] })}
        />
--- a/src/components/Timelines/Timeline/Default.tsx
+++ b/src/components/Timelines/Timeline/Default.tsx
@ -106,7 +106,8 @@ const styles = StyleSheet.create({
  statusView: {
    flex: 1,
    flexDirection: 'column',
-    padding: StyleConstants.Spacing.Global.PagePadding
+    padding: StyleConstants.Spacing.Global.PagePadding,
+    paddingBottom: StyleConstants.Spacing.M
  },
  status: {
    flex: 1,
--- a/src/components/Timelines/Timeline/Shared/ActionsStatus.tsx
+++ b/src/components/Timelines/Timeline/Shared/ActionsStatus.tsx
@ -1,13 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
-import {
-  ActionSheetIOS,
-  Clipboard,
-  Modal,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
+import { ActionSheetIOS, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useMutation, useQueryCache } from 'react-query'
 import { Feather } from '@expo/vector-icons'

@ -17,6 +9,8 @@ import { useTheme } from 'src/utils/styles/ThemeManager'
 import { toast } from 'src/components/toast'
 import { useSelector } from 'react-redux'
 import { StyleConstants } from 'src/utils/styles/constants'
+import BottomSheet from 'src/components/BottomSheet'
+import BottomSheetRow from 'src/components/BottomSheet/Row'

 const fireMutation = async ({
  id,
@ -275,96 +269,85 @@ const ActionsStatus: React.FC<Props> = ({ queryKey, status }) => {
        />
      </View>

-      <Modal
-        animationType='fade'
-        presentationStyle='overFullScreen'
-        transparent
+      <BottomSheet
        visible={bottomSheetVisible}
+        handleDismiss={() => setBottomSheetVisible(false)}
      >
-        <Pressable
-          style={styles.modalBackground}
-          onPress={() => setBottomSheetVisible(false)}
-        >
-          <View style={styles.modalSheet}>
-            <Pressable
-              onPress={() =>
-                ActionSheetIOS.showShareActionSheetWithOptions(
-                  {
-                    url: status.uri,
-                    excludedActivityTypes: [
-                      'com.apple.UIKit.activity.Mail',
-                      'com.apple.UIKit.activity.Print',
-                      'com.apple.UIKit.activity.SaveToCameraRoll',
-                      'com.apple.UIKit.activity.OpenInIBooks'
-                    ]
-                  },
-                  () => {},
-                  () => {
-                    setBottomSheetVisible(false)
-                    toast({ type: 'success', content: '分享成功' })
-                  }
-                )
+        <BottomSheetRow
+          onPress={() => {
+            ActionSheetIOS.showShareActionSheetWithOptions(
+              {
+                url: status.uri,
+                excludedActivityTypes: [
+                  'com.apple.UIKit.activity.Mail',
+                  'com.apple.UIKit.activity.Print',
+                  'com.apple.UIKit.activity.SaveToCameraRoll',
+                  'com.apple.UIKit.activity.OpenInIBooks'
+                ]
+              },
+              () => {},
+              () => {
+                setBottomSheetVisible(false)
+                toast({ type: 'success', content: '分享成功' })
              }
-            >
-              <Text>分享</Text>
-            </Pressable>
-            <Pressable
-              onPress={() => {
-                Clipboard.setString(status.uri)
-                setBottomSheetVisible(false)
-                toast({ type: 'success', content: '链接复制成功' })
-              }}
-            >
-              <Text>复制链接</Text>
-            </Pressable>
-            {status.account.id === localAccountId && (
-              <Pressable
-                onPress={() => {
-                  setBottomSheetVisible(false)
-                  mutateAction({
-                    id: status.id,
-                    type: 'delete',
-                    stateKey: 'id'
-                  })
-                }}
-              >
-                <Text>删除</Text>
-              </Pressable>
-            )}
-            <Text>（删除并重发）</Text>
-            <Pressable
-              onPress={() => {
-                setBottomSheetVisible(false)
-                mutateAction({
-                  id: status.id,
-                  type: 'mute',
-                  stateKey: 'muted',
-                  prevState: status.muted
-                })
-              }}
-            >
-              <Text>{status.muted ? '取消静音' : '静音'}</Text>
-            </Pressable>
-            {/* Also note that reblogs cannot be pinned. */}
-            {status.account.id === localAccountId && (
-              <Pressable
-                onPress={() => {
-                  setBottomSheetVisible(false)
-                  mutateAction({
-                    id: status.id,
-                    type: 'pin',
-                    stateKey: 'pinned',
-                    prevState: status.pinned
-                  })
-                }}
-              >
-                <Text>{status.pinned ? '取消置顶' : '置顶'}</Text>
-              </Pressable>
-            )}
-            <Text>静音用户，屏蔽用户，屏蔽域名，举报用户</Text>
-          </View>
-        </Pressable>
-      </Modal>
+            )
+          }}
+          icon='share'
+          text={'分享嘟嘟'}
+        />
+        {status.account.id === localAccountId && (
+          <BottomSheetRow
+            onPress={() => {
+              setBottomSheetVisible(false)
+              mutateAction({
+                id: status.id,
+                type: 'delete',
+                stateKey: 'id'
+              })
+            }}
+            icon='trash'
+            text='删除嘟嘟'
+          />
+        )}
+        {status.account.id === localAccountId && (
+          <BottomSheetRow
+            onPress={() => {
+              console.warn('功能未开发')
+            }}
+            icon='trash'
+            text='删除并重发'
+          />
+        )}
+        <BottomSheetRow
+          onPress={() => {
+            setBottomSheetVisible(false)
+            mutateAction({
+              id: status.id,
+              type: 'mute',
+              stateKey: 'muted',
+              prevState: status.muted
+            })
+          }}
+          icon='volume-x'
+          text={status.muted ? '取消静音' : '静音'}
+        />
+        {/* Also note that reblogs cannot be pinned. */}
+        {status.account.id === localAccountId && (
+          <BottomSheetRow
+            onPress={() => {
+              setBottomSheetVisible(false)
+              mutateAction({
+                id: status.id,
+                type: 'pin',
+                stateKey: 'pinned',
+                prevState: status.pinned
+              })
+            }}
+            icon='anchor'
+            text={status.pinned ? '取消置顶' : '置顶'}
+          />
+        )}
+      </BottomSheet>
    </>
  )
 }
--- a/src/components/Timelines/Timeline/Shared/Card.tsx
+++ b/src/components/Timelines/Timeline/Shared/Card.tsx
@ -1,12 +1,15 @@
 import React, { useCallback } from 'react'
 import { Image, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
+import { StyleConstants } from 'src/utils/styles/constants'
+import { useTheme } from 'src/utils/styles/ThemeManager'

 export interface Props {
  card: Mastodon.Card
 }

 const Card: React.FC<Props> = ({ card }) => {
+  const { theme } = useTheme()
  const navigation = useNavigation()
  const onPress = useCallback(() => {
    navigation.navigate('Screen-Shared-Webview', {
@ -15,20 +18,35 @@ const Card: React.FC<Props> = ({ card }) => {
  }, [])

  return (
-    <Pressable style={styles.card} onPress={onPress}>
+    <Pressable
+      style={[styles.card, { borderColor: theme.border }]}
+      onPress={onPress}
+    >
      {card.image && (
        <View style={styles.left}>
          <Image source={{ uri: card.image }} style={styles.image} />
        </View>
      )}
      <View style={styles.right}>
-        <Text numberOfLines={1}>{card.title}</Text>
+        <Text
+          numberOfLines={2}
+          style={[styles.rightTitle, { color: theme.primary }]}
+        >
+          {card.title}
+        </Text>
        {card.description ? (
-          <Text numberOfLines={2}>{card.description}</Text>
+          <Text
+            numberOfLines={1}
+            style={[styles.rightDescription, { color: theme.primary }]}
+          >
+            {card.description}
+          </Text>
        ) : (
          <></>
        )}
-        <Text numberOfLines={1}>{card.url}</Text>
+        <Text numberOfLines={1} style={{ color: theme.secondary }}>
+          {card.url}
+        </Text>
      </View>
    </Pressable>
  )
@ -38,18 +56,30 @@ const styles = StyleSheet.create({
  card: {
    flex: 1,
    flexDirection: 'row',
-    height: 70,
-    marginTop: 12
+    height: StyleConstants.Avatar.L,
+    marginTop: StyleConstants.Spacing.M,
+    borderWidth: 0.5,
+    borderRadius: 6
  },
  left: {
-    width: 70
+    width: StyleConstants.Avatar.L
  },
  image: {
    width: '100%',
-    height: '100%'
+    height: '100%',
+    borderTopLeftRadius: 6,
+    borderBottomLeftRadius: 6
  },
  right: {
-    flex: 1
+    flex: 1,
+    padding: StyleConstants.Spacing.S
+  },
+  rightTitle: {
+    marginBottom: StyleConstants.Spacing.XS,
+    fontWeight: StyleConstants.Font.Weight.Bold
+  },
+  rightDescription: {
+    marginBottom: StyleConstants.Spacing.XS
  }
 })

--- a/src/components/Timelines/Timeline/Shared/Emojis.tsx
+++ b/src/components/Timelines/Timeline/Shared/Emojis.tsx
@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, StyleSheet, Text } from 'react-native'
+import { Image, StyleSheet, Text, View } from 'react-native'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'

@ -22,19 +22,20 @@ const Emojis: React.FC<Props> = ({
  const styles = StyleSheet.create({
    text: {
      fontSize: size,
-      lineHeight: size + 2,
      color: theme.primary,
      ...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
    },
    image: {
      width: size,
-      height: size
+      height: size,
+      paddingTop: 1,
+      marginBottom: -1
    }
  })
  const hasEmojis = content.match(regexEmoji)

-  return hasEmojis ? (
-    <>
+  return (
+    <Text>
      {content.split(regexEmoji).map((str, i) => {
        if (str.match(regexEmoji)) {
          const emojiShortcode = str.split(regexEmoji)[1]
@ -46,23 +47,26 @@ const Emojis: React.FC<Props> = ({
              {emojiShortcode}
            </Text>
          ) : (
-            <Image
-              key={i}
-              source={{ uri: emojis[emojiIndex].url }}
-              style={styles.image}
-            />
+            <View key={i} style={styles.image}>
+              <Image
+                key={i}
+                resizeMode='contain'
+                source={{ uri: emojis[emojiIndex].url }}
+                style={{ width: '100%', height: '100%' }}
+              />
+            </View>
          )
        } else {
-          return (
+          return str ? (
            <Text key={i} style={styles.text}>
              {str}
            </Text>
+          ) : (
+            undefined
          )
        }
      })}
-    </>
-  ) : (
-    <Text style={styles.text}>{content}</Text>
+    </Text>
  )
 }

--- a/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
@ -166,7 +166,7 @@ const HeaderDefault: React.FC<Props> = ({
    <View>
      <View style={styles.nameAndAction}>
        <View style={styles.name}>
-          {emojis ? (
+          {emojis?.length ? (
            <Emojis
              content={name}
              emojis={emojis}
@ -174,7 +174,10 @@ const HeaderDefault: React.FC<Props> = ({
              fontBold={true}
            />
          ) : (
-            <Text numberOfLines={1} style={{ color: theme.primary }}>
+            <Text
+              numberOfLines={1}
+              style={[styles.nameWithoutEmoji, { color: theme.primary }]}
+            >
              {name}
            </Text>
          )}
@ -193,6 +196,7 @@ const HeaderDefault: React.FC<Props> = ({
          />
        )}
      </View>
+
      <View style={styles.meta}>
        <View>
          <Text style={[styles.created_at, { color: theme.secondary }]}>
@ -224,7 +228,7 @@ const HeaderDefault: React.FC<Props> = ({
      >
        {accountId !== localAccountId && (
          <BottomSheetRow
-            onPressFunction={() => {
+            onPress={() => {
              setModalVisible(false)
              mutateAction({
                id: accountId,
@ -238,7 +242,7 @@ const HeaderDefault: React.FC<Props> = ({
        )}
        {accountId !== localAccountId && (
          <BottomSheetRow
-            onPressFunction={() => {
+            onPress={() => {
              setModalVisible(false)
              mutateAction({
                id: accountId,
@ -252,7 +256,7 @@ const HeaderDefault: React.FC<Props> = ({
        )}
        {domain !== localDomain && (
          <BottomSheetRow
-            onPressFunction={() => {
+            onPress={() => {
              setModalVisible(false)
              mutateAction({
                id: domain,
@ -265,7 +269,7 @@ const HeaderDefault: React.FC<Props> = ({
        )}
        {accountId !== localAccountId && (
          <BottomSheetRow
-            onPressFunction={() => {
+            onPress={() => {
              setModalVisible(false)
              mutateAction({
                id: accountId,
@ -288,17 +292,20 @@ const styles = StyleSheet.create({
    justifyContent: 'space-between'
  },
  name: {
-    flexBasis: '80%',
+    flexBasis: '90%',
    flexDirection: 'row'
  },
+  nameWithoutEmoji: {
+    fontSize: StyleConstants.Font.Size.M,
+    fontWeight: StyleConstants.Font.Weight.Bold
+  },
  action: {
-    flexBasis: '20%',
-    alignItems: 'center'
+    alignItems: 'flex-end'
  },
  account: {
    flexShrink: 1,
-    marginLeft: StyleConstants.Spacing.XS,
-    lineHeight: StyleConstants.Font.Size.M + 2
+    marginLeft: StyleConstants.Spacing.XS
+    // lineHeight: StyleConstants.Font.LineHeight.M
  },
  meta: {
    flexDirection: 'row',